JQuery Mobile入门——自定义导航栏链接按钮图标

来源：互联网发布：如何在淘宝上编辑：程序博客网时间：2024/05/01 22:46

1、开发者可以另外创建一个CSS样式文件，在文件中添加链接按钮的图标地址与显示位置来自定义按钮图标。

2、示例代码：

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<link href="Css/css3.css" rel="Stylesheet" type="text/css"/>
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script>
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div data-role="page" id="e1">
<div data-role="header" class="nav-3-9">
<div data-role="navbar" class="nav-3-9">
<ul>
<li><a href="#"data-icon="custom"class="ui-btn-active books">图书</a></li>
<li><a href="#e2" data-icon="custom" class="music">音乐</a></li>
<li><a href="#"data-icon="custom"class="movie">影视</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>这是图书页面</p>
</div>
<div data-role="footer"><h4>@1013 3I Studio</h4></div>

</div>
<div data-role="page" id="e2">
<div data-role="header" class="nav-3-9">
<div data-role="navbar" class="nav-3-9">
<ul>
<li><a href="#e1"data-icon="custom" class="books">图书</a></li>
<li><a href="#" data-icon="custom" class="ui-btn-active music">音乐</a></li>
<li><a href="#"data-icon="custom"class="movie">影视</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>这是音乐页面</p>
</div>
<div data-role="footer"><h4>@1013 3I Studio</h4></div>
</div>
</BODY>
</HTML>

CSS样式代码：

.nav-3-9 .ui-btn .ui-btn-inner
{
padding-top: 40px !important;
}
.nav-3-9 .ui-btn .ui-icon
{
width: 30px!important;
height: 30px!important;
margin-left: -15px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
.books .ui-icon
{
background: url(icons/01.png)50% 50% no-repeat;
background-size: 18px 26px;
}
.music .ui-icon
{
background: url(icons/02.png)50% 50% no-repeat;
background-size: 15px 24px;
}
.movie .ui-icon
{
background: url(icons/03.png) 50% 50% no-repeat;
background-size: 19px 25px;
}

3、效果图预览：

点击音乐按钮