[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局

简介:

创建单页布局

移动页面分:页眉,页脚和内容三部分.下面实现一个hello world(程序员的大门)页面:

 

                                                                                   image

 

show the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>

    <div id="page1" data-role="page" >
        <div data-role="header">    <h1> 标题</h1></div>
        <div data-role="content">   <h1> <a href="#">Hello World!!</a></h1></div>
        <div data-role="footer">    <h1> 页脚</h1></div>
    </div>
</body>
</html>

 

建多页布局

多页布局是单页布局的一个集合,创建一个Html文件包括很多个界面,也可以创建很多个html文件,每个文件包括一个页面爆他们连接起来.

这里我们用一个html方便进行.

 

                                                 image                           image

 

show the code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    
</head>
<body>

    <div id="page1" data-role="page" >
        <div data-role="header">    <h1> 标题1</h1></div>
        <div data-role="content">    <h1> <a href="#sub" data-role="button">跳转到页面二</a></h1></div>
        <div data-role="footer">    <h1> 页脚1</h1></div>
    </div>
    
    <div data-role="page2" id="sub">
        <div data-role="header">    <h1> 标题2</h1></div>
        <div data-role="content">    <h1> Hello World2!!</h1></div>
        <div data-role="footer">    <h1> 页脚2</h1></div>
    </div>
    
</body>
</html>

data-role="button" 自动默认的button按钮样式

jQuery Mobile 中的按钮可通过三种方法创建[ 按钮会在下面 详细讲]:

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用 data-role="button" 的 <a> 元素

 

利用网格对齐内容

网格是用放置对象,使他们对齐的工具.

可使用的布局网格有四种:ui-grid-a ui-grid-b ui-grid-c ui-grid-d

可使用的内容类有四种:ui-block-a ui-block-b ui-block-c ui-block-d

 

                                                                                    image

 

show the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>列</h1>
  </div>

  <div data-role="content">
   <h3>三列布局:</h3>
   <div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>1</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>2</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>3</span></div>
   </div>

   <h3>多行的三列布局:</h3>
   <div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>9</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>8</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>7</span></div>
     <div class="ui-block-a" style="border: 1px solid black;"><span>6</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>5</span></div>
     <div class="ui-block-a" style="border: 1px solid black;"><span>4</span></div>
   </div>
  </div>
</div> 

</body>
</html>

设计可折叠布局

可以通过点击或触摸来隐藏或显示可折叠的内容.

                                                                                      image

show the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jeff Li</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    
</head>
<body>
    
    <div data-role="page" id="subone">
        <div data-role="header">    
            <h1>折叠案例</h1>
        </div>
        <div data-role="content">    
            <div data-role="collapsible">
                <h3>点我... </h3>
                <p>点了是sb</p>
            </div>
            
            <div data-role="collapsible-set">
                <div data-role="collapsible" data-collapsed="false">
                    <h3>再点我...</h3>
                    <p>I am a boy ...</p>
                    <p>u r a girl ......</p>
                </div>
                <div data-role="collapsible" >
                    <h3>没了...</h3>
                    <p>I am expanded on page load222...</p>
                    <div data-role="collapsible">
                        <h3>I am expanded on page load333</h3>
                    <p>I am expanded on page load333...</p>
                    </div>
                </div>
            </div>
            
        </div>
        <div data-role="footer">
            <h1>页脚</h1>
        </div>
    </div>
    
</body>
</html>

相关文章
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
155 0
一篇文章带你用jquery mobile设计颜色拾取器
|
JavaScript 前端开发 CDN
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
129 0
手把手教你用jQuery Mobile做相册
|
Web App开发 JavaScript 前端开发
15款优秀的jQuery-Mobile插件
移动互联网迅速发展,PC端的网页并不能完全适应移动端页面需求,响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架,继承了jQuery的“write less,do more”精髓,具有良好的扩展性和可定制性,全面兼容各种平台设备,对于不支持的手机类型,也会降级到基础样式。
372 0
15款优秀的jQuery-Mobile插件
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
463 0
|
数据采集 JavaScript 前端开发
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
800 0
|
JSON JavaScript 前端开发
使用jQuery Mobile和JSON创建移动应用程序
  近来移动应用开发迅速受到很多公司的关注,他们寻求为现存的产品和应用程序添加移动展现或者“触点”。即便不是所有,大部分移动应用开发框架也都会适应某种现存的“桌面”开发平台。基于Web的框架则不同。业界当前采用jQuery来创建移动web应用程序(上个月发布了jQuery Mobile Alpha 3)。
995 0
|
JavaScript 前端开发 测试技术