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

最新推荐文章于 2022-10-09 14:39:39 发布

weixin_30907523

最新推荐文章于 2022-10-09 14:39:39 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/yin138/p/4902239.html

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

目前有两个解决方案：

通过修改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 );

});

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

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

页面：

</div>

</div>

导航条标签：

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

转载于:https://www.cnblogs.com/yin138/p/4902239.html