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/

添加ui。按钮的垃圾图标

1 个答案: