淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery Mobile (六) header

在jquerymobile页面中，一般都会有一个header，在header一般我们除了设置标题 之外， 可以还会设置左右两边的按钮 如下：

<!DOCTYPE html>
<html>
<head>
   <title>Hello World</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, 
          initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" target="_blank" rel="external nofollow"  />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

  

</head>
<body>
  
　<div data-role="page">  
    <div data-role="header">  
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >首页</a><!--这个会自动转换为按钮-->  
        <h1>My Header</h1>  
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >设置</a>  
    </div>      
    <div data-role="content">  
    <p>  
    </p>  
    </div>    

</body>
</html>


一般情况下在header中我们添加两个按钮，如果你只写了一个默认会加到左边，无论你的a表情在代码中My header的前面还是后面。如果我们希望在My Header后面的a标签显示在右面我们可以添加一个class为ui-btn-right，代码如下：

<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="ui-btn-right">Contact</a>

如果我们想为按钮添加icon可以使用data-icon属性，jquerymobile为我们提供了一些icon（具体都有什么自己去查文档）。我们可以使用这个属性为按钮添加icon，部分代码如下： 

<div data-role="header">
<span style="white-space:pre">	</span><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-icon="home">Home</a>
	<h1>My Header</h1>
	<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-icon="info">Contact</a>
</div>


下面列表中图标“data-icon”属性对应的图标名称，不仅用于导航栏中的子类链接按钮，也适用于各类按钮型元素增加图标。