My jQueryMobile project involves overriding the CSS for listviews with the following code:
li{
height:90px !important;
border-style: 0px !important;
border-width: 0px 5px 2px 0px !important;
-moz-border-image: url('images/FA-iPhone_my-goals_READY-(2)_02.png') 0 5 2 0 stretch !important;
-webkit-border-image: url('images/FA-iPhone_my-goals_READY-(2)_02.png') 0 5 2 0 stretch !important;
-o-border-image: url('images/FA-iPhone_my-goals_READY-(2)_02.png') 0 5 2 0 stretch !important;
border-image: url('images/FA-iPhone_my-goals_READY-(2)_02.png') 0 5 2 0 fill stretch !important;}
All is good so far. However, I have a challenge with implementing an image button within each listview. To tackle this issue, I followed the instructions provided at:
In order to change the properties and values of the li selector when clicking on the image button, I used the method below. The id #four1 represents the page, while #selectbtn refers to the image button labeled as "select". Upon clicking, the intention is to alter the CSS properties as shown below.
<script>
$('#four1').live('pagecreate', function(e){
$("#selectbtn").click(function(e) {
$('li').css({'height': '90px !important'});
$('li').css({'border-style': '0px !important'});
$('li').css({'border-width': '0px 5px 2px 0px !important'});
$('li').css({'-moz-border-image':url('+images/goalsel_02.png+ !important')'});
$('li').css({'-webkit-border-image':url('+images/goalsel_02.png+ !important')'});
$('li').css({'-o-border-image':url('+images/goalsel_02.png+')' !important});
$('li').css({'border-image': 'url('+images/goalsel_02.png+')' !important});
});
});
</script>