1

こんにちは、ボタンを動的に作成しようとしていますが、ボタンにアイコンを取得できません。アイコンを表示するボタンを取得できません。助けていただければ幸いです。removeBtn ボタン ウィジェットに閉じるアイコンを設定するにはどうすればよいですか。

var a = [{
"_id": {
    "$oid": "50894875744e80aa5fa59853"
},
"name": "Test 1",
"color": "#b63e3e",
"propertyNames": ["Notes"]},
{
"_id": {
    "$oid": "50894afe744e80aa5fa59854"
},
"name": "Test 2",
"color": "#413bb6",
"propertyNames": ["Notes"]},
{
"_id": {
    "$oid": "50894c23744e80aa5fa59855"
},
"name": "Test 3",
"color": "#95eba5",
"propertyNames": ["Notes"]}];

for (var i = 0; i < a.length; i++) {

  var button = document.createElement('span');
  button.className = 'color-button';
  button.style.backgroundColor = a[i].color;

  var selectionItem = document.createElement('li');
  selectionItem.id = a[i]._id.$oid;
  selectionItem.className = "ui-widget-content";
  selectionItem.appendChild(button);

  selectionItem.appendChild(document.createTextNode(a[i].name));
  $('#id1').append(selectionItem);

  var removeBtn = $('<button/>',
            {
                    click: function(){
                    alert(this.parentNode.id);
                }
            });
  removeBtn.css("float","right");
  $("#"+a[i]._id.$oid).append(removeBtn);
}​

コードへの jsFiddle リンクは次のとおりです: http://jsfiddle.net/vivsriva/VmEeR/5/

4

3 に答える 3

1

あなたを助けるための単なるポインタ。これは、より多くの jQuery を使用したコードであり、閉じるボタンに jQueryUI の閉じるアイコンが含まれています。

for (var i = 0; i < a.length; i++) {
    var button = $("<span />").addClass("color-button").css({ "background-color": a[i].color }),
        selectionItem = $("<li />").prop({ id: a[i]._id.$oid }).addClass("ui-widget-content").css({ "background-color": a[i].color }).text(a[i].name).prepend(button);

    $('#id1').append(selectionItem);

    var removeBtn = $("<button />").css({ "float": "right", "margin-top": ".1em", "width": "1em" }).appendTo($("#"+a[i]._id.$oid));

    removeBtn.button({ icons: { primary: 'ui-icon-circle-close' }, text: false })
    .click(function(e) {
        alert(this.parentNode.id);
    });
}
于 2012-10-26T15:30:52.567 に答える
1

1 つのアプローチはclass、各ボタンに特定の with background-image を追加することです。

removeBtn.addClass('btn1');

そして、次のような CSS を使用します。

button.btn1 { 
   background-image: url('yourimage')
}
于 2012-10-26T15:09:05.597 に答える
0

これをするだけ

removeBtn.addClass('button-image').css("float","right");

.button-image 
{ 
   background-image: url('imageurl')
}
于 2012-10-26T15:12:39.710 に答える