jquery - 添加用户界面。垃圾图标到按钮

Question

我想知道是否有人可以帮助我。

我正在使用下面的代码创建一个带有图标的删除按钮，当它与 Javascript 结合使用时，允许用户从图库页面中删除图像。

我目前使用的是我下载的图标，但如果可能的话，我想使用的是 ui.Trash 图标。

我是第一个承认我不是特别精通应用 .css 文件和设置的人，我花了很多时间来整理当前脚本。

根据我一直在阅读的内容，我认为我说图像是通过 span 类调用是正确的？我尝试使用它而不是 url 但这会导致我的画廊风格有点不对劲。

<style>

         .galleria-thumbnails .btn-delete {    
          display: block;  
          position: absolute; bottom : 0px;  
          width: 80px;     
          height: 80px;    
          cursor: pointer;     
          background: url(trashout.png) no-repeat bottom; } 

        </style>

    <script type="text/javascript"> 
        Galleria.ready(function() {
            this.$('thumblink').click();

        $(".galleria-image").append( 
        "<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
        $(".btn-delete").live("click", function(){
        var img = $(this).closest(".galleria-image").find("img"); 

        // send the AJAX request
        $.ajax({
        url : 'delete.php',
        type : 'post',
        data : { image : img.attr('src') },
        success : function(){
        alert('Deleting image... ');
        img.parent().fadeOut('slow');
        }
        });

        return false;
        });

        });

    </script>

我已将图标名称包含在我的 AJAX 脚本中，但我无法真正创建图标，而且我不确定下一步该做什么。我只是想知道是否有人可以看看这个并就如何更改图标提供一些帮助。

非常感谢和问候

Answer 1

这是一个仅显示垃圾桶图标的 jQuery UI 按钮示例:

<button class="table-delete-link" title="Delete" href="delete-example.php?id=17">
    <span class="ui-icon ui-icon-trash"></span>
    <span class="ui-button-text">Delete</span>
</button>


$(document).ready(function() {
    $('button.table-delete-link').click(function () {
        var targetUrl = $(this).attr('href');
        $.ajax({
            url: targetUrl,
            type: 'GET',
            success: function (data, textStatus, xhr) {
                alert('Item successfully deleted!');
            },
            error: function (xhr, textStatus, errorThrown) {
                var errorMessage = xhr.responseText;
                errorMessage = errorMessage.substring(errorMessage.indexOf('<title>') + 7, errorMessage.indexOf('</title>'));
                alert('Unable to delete item: ' + errorMessage);
            }
        });
        return false;
    });
});

在 jsFiddle 上查看此操作:http://jsfiddle.net/jimmym715/qpDha/