1

リストビューと一緒に画像付きのボタンまたはチェックボックスを作成したい.画像ボタンが必要なアイテムごとにjqueryを使用してデータベースから取得されるアイテムのリストがあり、画像はスターである可能性があり、実装したいブックマークのような概念.. このリストに追加したいのですが、どうすればいいですか??

var htmlStr = '<li><a><h3 class="ui-li-heading">'+row['Word']+'</h3><p class="ui-li-desc">'+row['Type_Of_Word']+'</p></a></li>';
4

2 に答える 2

1

css を使用して独自のアイコンを追加します。

.ui-state-default  .ui-icon-mystar {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Full_Star_Red.svg/64px-Full_Star_Red.svg.png); 
   background-size: 100%;
    
}​

JavaScriptで：

$('#starbutton').button({icons: {primary:'ui-icon-mystar'}});​

htmlで：

<a href="#" id="starbutton">Bookmark</a>​

作業サンプル:

于 2012-08-10T13:19:18.440 に答える
0

以下はcssとjqueryのコードスニペットです

    .star {
        background-color: transparent;
        background-image: url('http://localhost/technicalkeeda/images/star-off.png');
        background-repeat:no-repeat;
        display: block;  
        height:16px;
        width:16px;
        float:left;
    }   

    .favorited {
         text-indent: -5000px;
        background-color: transparent;
        background-image: url('http://localhost/technicalkeeda/images/star-on.png');
        background-repeat:no-repeat;   
        height:16px;
        width:16px;
        float:left;
    }



$(document).ready(function(){   
     $('.star,.favorited').click(function() {
            var id = $(this).parents('div').attr('id');             
            var className = $(this).attr('class');
            var flag  = (className=='star') ? 'Y':'N';
            var $this = $(this);
            $.ajax({
                    type: "post",
                    url: "yoururl",
                    cache: false,               
                    data:{'bookmarkId': id,'flag':flag},
                    success: function(response){
                        if(response=='true'){                               
                            $this.toggleClass("favorited");
                        }   
                    },
                    error: function(){                      
                        alert('Error while request..');
                    }
                 });
      });
});
于 2013-03-03T05:25:25.960 に答える