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