JQuery Mobile External Tool Bar ui-btn-active样式问题

在使用JQuery Mobile时我需要使用外部的工具栏，并使用了ui-btn-active样式来设定活动标签的样式，发现在外部固定工具栏状态下，ui-btn-active在生效后马上实效，经调试发现时JQM库的问题（我提交了Github issue），通网上找了一个示例，他通过JS解决了这个问题，我用他的方法也不行，他用的版本不是1.4.5. 

目前有两个解决方案：

1. 通过修改JQM的js代码

for JQM1.4.5

jquery.mobile-1.4.5.js#420

removeActiveLinkClass: function( forceRemoval ) {
			if ( !!$.mobile.activeClickedLink &&
				( !$.mobile.activeClickedLink.closest( "." + $.mobile.activePageClass ).length ||
					forceRemoval ) ) {

				//<--$.mobile.activeClickedLink.removeClass( $.mobile.activeBtnClass );
			}
			$.mobile.activeClickedLink = null;
		},

jquery.mobile-1.4.5.js#7434

// The code below is a workaround to fix #1181

$( document ).one( "pagehide", function() {

//<--activeBtn.removeClass( $.mobile.activeBtnClass );

});

1. 通过自定义样式，通过脚本进行设定(推荐)

2.1 在标签中添加对自定义样式的支持，比如：my-btn-active样式，对page添加page-title属性，该属性值为导航条的文本值

页面：

<div data-role="page" id="vbook-personal" data-title="个人">

</div>

<div data-role="page" id="vbook-store" data-title="教材库">

</div>

导航条标签：

<li id="personal"><a href="#vbook-personal" data-theme="d" class="ui-state-persist">个人</a></li>

<li id="bookshelf"><a href="#vbook-bookshelf"  data-theme="d" class="ui-btn-active ui-state-persist">我的教材</a></li>

<li id="library"><a href="#vbook-store" data-theme="d" class="ui-state-persist">教材库</a></li>

2.2 定义有my-btn-active和没有my-btn-active两种样式

/*主页－个人菜单活动状态下背景和颜色*/

div.ui-footer .ui-navbar ul li#personal a.my-btn-active {

    background: url(../images/ico-person-active.png) 50% 20% no-repeat;

    background-size:25px;

    color:#ffffff;

}

/*主页－个人菜单正常状态下背景和颜色*/

div.ui-footer .ui-navbar ul li#personal a {

    background: url(../images/ico-person.png) 50% 20% no-repeat;

    background-size:24px;

    color:#cccccc;

}

2.3 在页面添加响应的脚本实现样式添加和删除

// Update the contents of the toolbars
$(document).on("pageshow", "[data-role='page']", function () {
    // Each of the four pages in this demo has a data-title attribute
    // which value is equal to the text of the nav button
    // For example, on first page: <div data-role="page" data-title="Info">
    var current = $(this).jqmData("title");
    // Change the heading
    //$("[data-role='header'] h1").text(current);
    // Remove active class from nav buttons
    $("[data-role='navbar'] a.my-btn-active").removeClass("my-btn-active");
    // Add active class to current nav button
    $("[data-role='navbar'] a").each(function () {
        if ($(this).text() === current) {
            $(this).addClass("my-btn-active");
        }
    }); 
});

参考：

http://stackoverflow.com/questions/19574429/jqm-1-4-beta-persistent-navbar-not-keeping-active-state-class-for-links

版权声明：本文为博主原创文章，未经博主允许不得转载。