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

来源：互联网发布：逆战出现数据异常编辑：程序博客网时间：2024/05/16 11:46

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

当我们专注地研究人类生活的空虚，并考虑荣华富贵空幻无常时，也许我们正在阿谀逢迎自己懒惰的天性。

Written In The Font

为了app的手机端,我选择了 jQuery Mobile ,学习中出一系列的博客吧.我喜欢的一句话 “Talk is Cheap Show me the CODE”,所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的可以来看下哦.

工具: Aptana Studio 3 + 火狐

学习内容:

创建单页布局
建多页布局
利用网格对齐内容
设计可折叠布局

创建单页布局

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

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方便进行.

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

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>

设计可折叠布局

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

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>

Editor's Note

路漫漫其修远兮我将上下而求索

2 1

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

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

当我们专注地研究人类生活的空虚，并考虑荣华富贵空幻无常时，也许我们正在阿谀逢迎自己懒惰的天性。

Written In The Font

创建单页布局

建多页布局

利用网格对齐内容

设计可折叠布局

Editor's Note

路漫漫其修远兮 我将上下而求索

路漫漫其修远兮我将上下而求索