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

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

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

[ 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. Codeforces 888 简要题解

    文章目录 A题 B题 C题 D题 E题 F题 G题 传送门 A题 传送门 题意简述:给一个数列,问有多少个峰值点(同时比两边都大/小的点) 思路:按照题意模拟. 代码: #include<bit ...

  2. struct,map,json 互相转换

    1.1 struct to json 准备 很简单,使用encoding包可以互相转换,没什么好说的,但是有几点注意: 1.结构体内需要序列化的字段首字母大写(遵循驼峰式命名),不需要序列化的字段小写 ...

  3. JavaScript -DOM 编程艺术 2nd 完

    今日看完了这本书,做完了最后一个综合性例子.说实话收获良多,终于明白前端-h5 具体做什么 越学习越无知,这个看来真是一个真理. 后期计划: 1.CSS + DIV 布局深入了解,重点实战 2.Jav ...

  4. [小结] 中山纪念中学2018暑期训练小结（划掉）（颓废记）-Day10

    [小结] 中山纪念中学2018暑期训练小结(划掉)(颓废记)-Day10 各位看众朋友们,你们好,今天是2018年08月14日,星期二,农历七月初四,欢迎阅看今天的颓废联编节目 最近发生的灵异事件有 ...

  5. 玩玩微信公众号Java版之七：自定义微信分享

    前面已经学会了微信网页授权,现在微信网页的功能也可以开展起来啦! 首先,我们先来学习一下分享,如何在自己的页面获取分享接口及让小伙伴来分享呢? 今天的主人公: 微信 JS-SDK, 对应官方链接为:微 ...

  6. Python学习过程中各个难点---函数篇

    对于函数,我一直分不清局部变量与全局变量,今天又好好研究了下,终于搞清楚了. 例子: 其次对于global这个关键字我也是一知半解的状态,之前整个人都是懵懵的,现在搞明白了 匿名函数: 匿名函数使用关 ...

  7. lua 使用中遇到的坑总结

    前言 竹子是 java 程序员一枚,最近在做一个登录的改造,用 lua 实现,现在基本算是告一段落,然后在此分享下在过程中遇到的坑吧. 一定要注意使用 lua 的版本,版本不同,可能有的函数就没有了, ...

  8. ZOJ1994有源汇上下界可行流

    http://fastvj.rainng.com/contest/236779#problem/G Description: n 行 m 列 给你行和 与 列和 然后有Q个限制,表示特定单元格元素大小 ...

  9. CentOS 5 常见的configure error的解决方法

    仅限于CentOS 5 configure: error: No curses/termcap library found 网上有的说法是: --with-named-curses-libs=/usr ...

  10. c# 使用资源文件

    1.新建项目 2.新建资源文件 3. 代码中使用嵌入资源 using System;using System.Collections.Generic;using System.Text;using S ...