Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Navbar: data-iconpos is ignored #1797 #1858

Closed
wants to merge 2 commits into from

4 participants

@pravinkmrr

NOTE: this may simply be a documentation bug - data-iconpos works on the navbar element itself.

Navbar: data-iconpos is ignored bug fixed in navbar plugin

@scottjehl

I think this is more of a documentation problem. On navbars, iconPos is set data-attributes on the navbar element, because the position is shared across the set. I just verified that that is working fine still. Does that work for you? I can update the docs...

@pravinkmrr

may be. but i changed the script to use top,bottom,right,left as well as notext for data-iconpos...

@scottjehl

Okay. Do any of those properties not work currently on the navbar element? Just want to make sure we fix this bug in the right place. Thanks!

@pravinkmrr

Okay. Hope i will support.

@toddparker

I'm not sure I understand where this was left off. Does this work already? Do the docs need to be updated?

@ahutch

The doc still says : "Icons can be stacked above the labels by adding the data-iconpos="top" attribute to each anchor."

However data-iconpos=".." only works when placed in the container that has data-role="navbar"

I wish that the behavior was that of the document. That way I could pick the position per anchor. Left for the button on the left and right for the button on the right.

@toddparker toddparker closed this pull request from a commit
@toddparker toddparker Re-vamped the navbar docs to fix incorrect info about icon positionin…
…g and theming. Fixes #1858, Fixes #1797, Fixes #2667, Fixes #1180, Fixes #2373

The docs incorrectly stated that the icon position could be set per
link, but this is intended as a global setting for the navbar parent.
This is working as designed and helps with visual consistency. If icon
positioning needs to be be adjusted per link, you will need to manually
apply the right classes through JS and may need to tweak CSS because
top/bottom and left/right positions have different heights.
15e984e
@timmywil timmywil referenced this pull request from a commit
@toddparker toddparker Re-vamped the navbar docs to fix incorrect info about icon positionin…
…g and theming. Fixes #1858, Fixes #1797, Fixes #2667, Fixes #1180, Fixes #2373

The docs incorrectly stated that the icon position could be set per
link, but this is intended as a global setting for the navbar parent.
This is working as designed and helps with visual consistency. If icon
positioning needs to be be adjusted per link, you will need to manually
apply the right classes through JS and may need to tweak CSS because
top/bottom and left/right positions have different heights.
743257e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 22 additions and 13 deletions.
  1. +22 −13 js/jquery.mobile.navbar.js
View
35 js/jquery.mobile.navbar.js 100755 → 100644
@@ -12,30 +12,39 @@ $.widget( "mobile.navbar", $.mobile.widget, {
},
_create: function(){
var $navbar = this.element,
- $navbtns = $navbar.find("a"),
- iconpos = $navbtns.filter( ":jqmData(icon)").length ? this.options.iconpos : undefined;
-
- $navbar
+ $navbtns = $navbar.find("a")
+ i=0,
+ j=0;
+ $navbar
.addClass('ui-navbar')
.attr("role","navigation")
.find("ul")
- .grid({grid: this.options.grid });
-
- if( !iconpos ){
- $navbar.addClass("ui-navbar-noicons");
- }
-
- $navbtns
+ .grid({grid: this.options.grid });
+ $navbtns.each(function(){
+ var icon= $(this).attr("data-iconpos") ? $(this).attr("data-iconpos") : "top",
+ iconpos =$(this).filter( ":jqmData(icon)").length ? icon: undefined,
+ notext=$(this).filter(":jqmData(iconpos='notext')");
+ if( !iconpos ){
+ i++;
+ }
+ if(iconpos=="notext") {
+ iconpos="top";
+ notext.text("");
+ }
+ $(this)
.buttonMarkup({
corners: false,
shadow: false,
iconpos: iconpos
});
-
+ j++;
+ });
+ if(i==j)
+ $navbar.addClass("ui-navbar-noicons");
$navbar.delegate("a", "vclick",function(event){
$navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
$( this ).addClass( $.mobile.activeBtnClass );
});
}
});
-})( jQuery );
+})( jQuery );
Something went wrong with that request. Please try again.