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

忘是亡心i 2022-08-08 16:53 16阅读 0赞

在使用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属性，该属性值为导航条的文本值

页面：

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

</div>

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

</div>

导航条标签：

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

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

<liid="library"><ahref="\#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