[ 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可通过三种方法创建[ button会在以下 具体讲]：

  • 使用 <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页面布局

    当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 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 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  9. jquery mobile页面跳转缓存问题解决

    最近,我的一个写后端的同事因为缺前端自己做起了前端的活儿,因为对前端的不熟悉,找寻了一些现成框架想轻松了事,做一个web app他选了jquery mobile,开发效率确实高,但是这个框架的一些坑也 ...

随机推荐

  1. ubuntu12.04硬盘安装

    ubuntu12.04发布了 , 安装又是一个话题.安装系统有很多方法,比如livecd,和u盘,但这些都需借用外部设备,所以硬盘安装是最好不过的方法了.u盘,cd安装都非常的简 单,对于那些讨厌用光 ...

  2. Unity 捕获IronPython脚本错误

    using System; using System.Collections.Generic; using System.IO; using System.Reflection; using Syst ...

  3. 更改Activity的最底层的布局

    public void attachToActivity(Activity activity) { mActivity = activity; TypedArray a = activity.getT ...

  4. JAVA学习JSTL与EL

    一.基础 1.EL(Expression Language):为了使jsp写起来更加简单,提供了在Jsp中简化表达式的方法 2.JSTL:(JSP Standard Tag Library)jstl标 ...

  5. 返璞归真 asp.net mvc (1) - 添加、查询、更新和删除的 Demo

    原文:返璞归真 asp.net mvc (1) - 添加.查询.更新和删除的 Demo [索引页] [源码下载] 返璞归真 asp.net mvc (1) - 添加.查询.更新和删除的 Demo 作者 ...

  6. java中用正則表達式推断中文字符串中是否含有英文或者数字

    public static boolean includingNUM(String str)throws  Exception{ Pattern p  = Pattern.compile(" ...

  7. 公钥\私人 ssh避password登陆

    相关概念以前见过,决不要注意,使用公共密钥管理之前,腾讯云主机的备案机,非常头发的感觉,查了一下相关资料,这里总结下: 字符a:192.168.7.188 (ubuntu) 字符b:192.168.7 ...

  8. JSON.stringify 语法解释

    行为:此函数的作用主要是串行化对象. 或许有些人是过敏的字系列.我非常理解easy.是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个例如说,你有一个类,那么你能够通过这 ...

  9. axWindowsMediaPlayer1获取音频长度

    OpenFileDialog openFileDialog1 = new OpenFileDialog { InitialDirectory = "c:\\", Filter = ...

  10. [Ext JS 4] 实战Chart 协调控制（单一的坐标，两个坐标）

    前言