Search jQuery

jQuery Forum

Listview List-Divider Icon

in jQuery Mobile • 3 months ago

Anyone know the best way to add an icon to a list-divider? Taking a look at the code, icons are only added to links automatically. However, they are wrapped and classes assign that relate to links specifically. So I didn't know if someone had already figured out the CSS needed to mimic icons in a list-divider. Thanks!

Replies(9)

Godsbest

Re: Listview List-Divider Icon

3 months ago

You're probably looking for a Listview Autodivider Linkbar. You can view the source to see the relevant markup - if this is indeed what you're looking for. I think the code you'll need is:

$( "#sorter li" ).click( function() {
var top,
letter = $( this ).text(),
divider = $( "#sortedList" ).find( "li.ui-li-divider:contains(" + letter + ")" );
if ( divider.length > 0 ) {
top = divider.offset().top;
$.mobile.silentScroll( top );
} else {
return false;
}
});
$( "#sorter li" ).hover(function() {
$( this ).addClass( "ui-btn-up-b" ).removeClass( "ui-btn-up-c" );
}, function() {
$( this ).removeClass( "ui-btn-up-b" ).addClass( "ui-btn-up-c" );
});

Panman8201

Re: Listview List-Divider Icon

3 months ago

I don't think so, unless I'm missing something. Just trying to mimic the icon like linked list items, where it is on the right hand side.

Godsbest

Re: Listview List-Divider Icon

3 months ago

I believe it's the one I gave you; where you click on A, B, ....T, ... or Z on the right and the main page scrolls to the corresponding list-divider.

Godsbest

Re: Listview List-Divider Icon

3 months ago

Or are you looking for a button to open a panel? You can clarify further by giving an example of what you're trying to mimic. The clearer your question is, the better for all of us.

Panman8201

Re: Listview List-Divider Icon

3 months ago

I think you're over-thinking it. No additional functionality, just the icon. See the below screenshot.

Godsbest

Re: Listview List-Divider Icon

3 months ago

You can quote me on this. When clarity is not ...... .. not even the sky is the limit of our thoughts!

It's now CRYSTAL clear. The following page has all the details. Let us know if you have any further questions:

http://view.jquerymobile.com/1.3.0/docs/widgets/icons/

watusiware

Re: Listview List-Divider Icon

3 months ago

I think you've under-described it. It took 6 posts to get to what you actually want. You want to use one of the built-in JQM icons within content, headers, etc.

You can use this anywhere:

<div class="ui-icon ui-icon-arrow-r"></div>

You may need to do some CSS fiddling to get it to display just where you want it. You can use Web Inspector, Firebug, etc. to help you figure that out.

Alternately, you can create an icon-only button following the the documentation Godsbest linked-to above. Not clear if you wanted a button or just to display the icon.

Panman8201

Re: Listview List-Divider Icon

3 months ago

Sure, I could have thought of a better way of describing it. At the time I thought it was very strait-forward and basic, but maybe "basic" is the keyword there.

Taking a look at an icon-only button, it still adds the button border which doesn't look like the other listview icons. I've come up with a solution that basically mimics the link button icons.

Panman8201

Re: Listview List-Divider Icon

3 months ago

Suppose I could have posted my solution...

I've come up with a plugin that adds functionality for list-dividers that basically mimic's a link button icon. Below is the JavaScript and CSS required. I've also posted an example on JSFiddle: http://jsfiddle.net/Panman8201/ZpJWM/ Please let me know what you think. Thanks!

<script>
(function( $, undefined ) {
// If set, this icon will be applied to all list-dividers
$.mobile.listview.prototype.options.dividerIcon = null;
$.mobile.document.delegate( "ul,ol", "listviewcreate", function() {
var list = $( this ),
options = list.data( "mobile-listview" ).options,
dividers = list.children( ":jqmData(role='list-divider')");
// Remove dividers which shouldn't have icons
if ( !options.dividerIcon ) {
dividers = dividers.filter( ":jqmData(icon)" );
}
// Remove dividers which specifically don't want icons
dividers = dividers.not( ":jqmData(icon='false')" );
// Add icons to applicable dividers
// Could be none, in which case loop won't run
for (var i=0; i < dividers.length; i++ ) {
var divider = $( dividers[i] )
dividerIcon = divider.jqmData( "icon" ),
dividerTheme = divider.jqmData( "theme" );
// Add icon via button markup, keeping divider styling
divider.buttonMarkup({
wrapperEls: "div",
shadow: false,
corners: false,
iconpos: "right",
icon: dividerIcon || options.dividerIcon,
theme: dividerTheme || options.dividerTheme
});
// Modify classes to correctly style and disable button functionality
divider.addClass( "ui-li-has-arrow" );
divider.removeClass( "ui-btn ui-btn-up-" + (dividerTheme || options.dividerTheme) );
}
});
})(jQuery);
</script>
<style>
.ui-li-divider.ui-li-has-arrow {
padding: 0;
}
.ui-li-divider.ui-li-has-arrow .ui-btn-inner {
font-size: 14px;
padding: .5em 15px;
}
</style>

Top Reply

Response title

Attachments

jQuery Forum

Listview List-Divider Icon

Replies(9)

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Re: Listview List-Divider Icon

Statistics

Tags

Actions

Related Posts