1

i want to create a button or check box with an image along with listview.I have a list of items which are retrieved from the databse using jquery for each item there should be an image button,the image could be star,i want to implement a concept like bookmark.. i want to add in this list,how can i do this??

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
  • try jquery-ui button with icons
    – zb'
    Aug 10, 2012 at 11:06
  • it is ok..but i want to make a custom image..like i have to put my ow icon with my listview..
    – pujitav
    Aug 10, 2012 at 12:15
  • 1
    just create new ui-icon-mystar in css
    – zb'
    Aug 10, 2012 at 13:01
  • ok got an idea,so can i write like this?? bold <button id="demo"></button> $(function() { $( ".demo button:first" ).button({ icons: { background-image:url('star.png'); }, text: false }) });
    – pujitav
    Aug 10, 2012 at 13:13

2 Answers 2

1

add your own icon using 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%;
    
}​

in javascript:

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

in html:

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

working sample:

0

Below is the css and jquery code snippet

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.