Question

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

in html：

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

working sample:

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

如何创建一个带有星形图像的书签以及listview的按钮？

2 个答案: