jquery - 如何创建带有星形图像的书签之类的按钮以及列表视图？

Question

我想创建一个带有图像的按钮或复选框以及列表视图。我有一个项目列表，这些项目是使用 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>';

Answer 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>​

工作样本：

Answer 2

下面是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..');
                    }
                 });
      });
});