0

誰か助けてくれませんか。

以下のコードを使用してアイコン付きの削除ボタンを作成しています。これを Javascript と組み合わせると、ユーザーはギャラリー ページから画像を削除できます。

現在、ダウンロードしたアイコンを使用していますが、可能であれば、ui.Trash アイコンを使用したいと考えています。

私は .css ファイルと設定の適用に特に精通しておらず、現在のスクリプトをまとめるのにかなりの時間を要したことを最初に認めました。

私が読んできたものから、画像がスパンクラスを介して呼び出されていると言うのは正しいと思いますか? の代わりにこれを使用しようとしました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 スクリプトに含めましたが、実際にアイコンを作成することができず、次に何をすべきかよくわかりません。誰かがこれを見て、アイコンを変更する方法について助けてくれるかどうか疑問に思いました.

多くの感謝と敬意

4

1 に答える 1

0

ごみ箱アイコンのみを表示する 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/

于 2012-05-12T21:40:35.410 に答える