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

一种方法是class为每个按钮添加特定的背景图像。

removeBtn.addClass('btn1');

并拥有像这样的 CSS：

button.btn1 { 
   background-image: url('yourimage')
}
于 2012-10-26T15:09:05.597 回答
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 回答
0

就这样做

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

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