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

Written In The Font

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

工具: Aptana Studio 3 + 火狐

学习内容:

创建单页布局

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

show the code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Hello World</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13. </head>
  14. <body>
  15.  
  16.     <div id="page1" data-role="page" >
  17.         <div data-role="header">    <h1> 标题</h1></div>
  18.         <div data-role="content">   <h1> <a href="#">Hello World!!</a></h1></div>
  19.         <div data-role="footer">    <h1> 页脚</h1></div>
  20.     </div>
  21. </body>
  22. </html>

建多页布局

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

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

                          

show the code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>测试</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17.     <div id="page1" data-role="page" >
  18.         <div data-role="header">    <h1> 标题1</h1></div>
  19.         <div data-role="content">    <h1> <a href="#sub" data-role="button">跳转到页面二</a></h1></div>
  20.         <div data-role="footer">    <h1> 页脚1</h1></div>
  21.     </div>
  22.  
  23.     <div data-role="page2" id="sub">
  24.         <div data-role="header">    <h1> 标题2</h1></div>
  25.         <div data-role="content">    <h1> Hello World2!!</h1></div>
  26.         <div data-role="footer">    <h1> 页脚2</h1></div>
  27.     </div>
  28.  
  29. </body>
  30. </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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>测试</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17. <div data-role="page" id="pageone">
  18.   <div data-role="header">
  19.   <h1>列</h1>
  20.   </div>
  21.  
  22.   <div data-role="content">
  23.    <h3>三列布局：</h3>
  24.    <div class="ui-grid-b">
  25.      <div class="ui-block-a" style="border: 1px solid black;"><span>1</span></div>
  26.      <div class="ui-block-b" style="border: 1px solid black;"><span>2</span></div>
  27.      <div class="ui-block-c" style="border: 1px solid black;"><span>3</span></div>
  28.    </div>
  29.  
  30.    <h3>多行的三列布局：</h3>
  31.    <div class="ui-grid-b">
  32.      <div class="ui-block-a" style="border: 1px solid black;"><span>9</span></div>
  33.      <div class="ui-block-b" style="border: 1px solid black;"><span>8</span></div>
  34.      <div class="ui-block-c" style="border: 1px solid black;"><span>7</span></div>
  35.      <div class="ui-block-a" style="border: 1px solid black;"><span>6</span></div>
  36.      <div class="ui-block-b" style="border: 1px solid black;"><span>5</span></div>
  37.      <div class="ui-block-a" style="border: 1px solid black;"><span>4</span></div>
  38.    </div>
  39.   </div>
  40. </div> 
  41.  
  42. </body>
  43. </html>

设计可折叠布局

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

show the code:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Jeff Li</title>
  6.  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.     <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
  10.  
  11.     <script src="js/jquery.js"></script>
  12.     <script src="js/jquery.mobile-1.3.2.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17.     <div data-role="page" id="subone">
  18.         <div data-role="header">
  19.             <h1>折叠案例</h1>
  20.         </div>
  21.         <div data-role="content">
  22.             <div data-role="collapsible">
  23.                 <h3>点我... </h3>
  24.                 <p>点了是sb</p>
  25.             </div>
  26.  
  27.             <div data-role="collapsible-set">
  28.                 <div data-role="collapsible" data-collapsed="false">
  29.                     <h3>再点我...</h3>
  30.                     <p>I am a boy ...</p>
  31.                     <p>u r a girl ......</p>
  32.                 </div>
  33.                 <div data-role="collapsible" >
  34.                     <h3>没了...</h3>
  35.                     <p>I am expanded on page load222...</p>
  36.                     <div data-role="collapsible">
  37.                         <h3>I am expanded on page load333</h3>
  38.                     <p>I am expanded on page load333...</p>
  39.                     </div>
  40.                 </div>
  41.             </div>
  42.  
  43.         </div>
  44.         <div data-role="footer">
  45.             <h1>页脚</h1>
  46.         </div>
  47.     </div>
  48.  
  49. </body>
  50. </html>

Editor's Note

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

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局的更多相关文章

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

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  2. [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile工具栏 Written In The Font " Wirte less Do more& ...

  3. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  4. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  5. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

  6. 用谷歌浏览器Chrome浏览jQuery Mobile页面需要配置Tomcat服务器

    在浏览jQuery Mobile 页面中,除了 Chrome浏览器出错外,其他的浏览器都ok: 这里,是因为需要单独配置 Tomcat 服务: 1.先配置java jdk: 2.下载,安装,配置,To ...

  7. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

  8. JQuery Mobile 图片布局

    JQuery Mobile 图片布局 1.实现效果

  9. jQuery mobile网格布局

    3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局.折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化. 3.4.1 网格布局 jQu ...

随机推荐

  1. 使用electron开发指静脉客户端遇到的问题总结

    使用electron 使用nodejs 的ffi模块调用dll文件 总结1.electron 与nodejs版本不需要一致,甚至nodejs版本应该高于electron的node版本2.要安装 Vis ...

  2. Maven之pom.xml配置文件详解

    此文非原创,摘自:https://www.baidu.com/link?url=GlGgW21nijIiULDZj0RfPH8ofqGMqEnAzXiym7O3hfrZM5nFH2enukemBNTX ...

  3. Codeforces 1065 简要题解

    文章目录 A题 B题 C题 D题 E题 F题 G题 传送门 GGG题略难,膜了一波zhouyuyang{\color{red} zhouyuyang}zhouyuyang巨佬的代码. 其余都挺清真的. ...

  4. jquery-能拖拽宽度的table

    控件官方地址:http://www.bacubacu.com/colresizable/?utm_source=jquer.in&utm_medium=website&utm_camp ...

  5. CentOS 7 rabbitmq 安装

    OS版本:CentOS 7.2Rrlang:19.2RabbitMQ:3.6.6 1.1 erlang安装 1. http://www.erlang.org/下载erlang,解压缩,进入目录,检查环 ...

  6. GXB动态重配置

    可选择重配置逻辑(Optional Reconfiguration Logic) 使能选项: • Capability registers • Control and status registers ...

  7. bzoj2730(割点+分类讨论)

    把割点删去后,剩下的联通块个数就是答案,方案数就是siz乘一起,但要讨论一些特殊情况,没有割点时答案直接算,一个联通块如果连接多个割点是不需算入答案的: #include<iostream> ...

  8. python+pycharm环境搭建

    1.下载python安装包 https://www.python.org/downloads/ 2.下载pycharm安装包. https://www.jetbrains.com/pycharm/do ...

  9. python的无限循环及退出

    题目要求如下: 1 循环验证用户输入的用户名与密码 2 认证通过后,运行用户重复执行命令 3 当用户输入命令为quit时,则退出整个程序  代码如下 person={'name':'Helen','p ...

  10. jupyter-notebook快捷键

    Jupyter Notebook 的快捷键 Jupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本:这时的单元框线是绿色的.命令模式,键盘输入运行程序命令:这时的 ...