博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局
阅读量:7175 次
发布时间:2019-06-29

本文共 2261 字,大约阅读时间需要 7 分钟。

创建单页布局

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

 

                                                                                  

 

show the code:

    
Hello World

标题

页脚

 

建多页布局

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

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

 

                                                                           

 

show the code

    
测试

标题1

页脚1

标题2

Hello World2!!

页脚2

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
2
3

多行的三列布局:

9
8
7
6
5
4

设计可折叠布局

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

                                                                                     

show the code:

    
Jeff Li

折叠案例

点我...

点了是sb

再点我...

I am a boy ...

u r a girl ......

没了...

I am expanded on page load222...

I am expanded on page load333

I am expanded on page load333...

页脚

转载地址:http://alpzm.baihongyu.com/

你可能感兴趣的文章
机房收费系统数据库概念结构设计
查看>>
NanoJIT
查看>>
一个最简单GAL游戏资源文件黑盒分析(二)
查看>>
SQL Server 2005允许远程连接的配置说明
查看>>
HQL 语句
查看>>
全神贯注!聚精会神!一心一意!
查看>>
IBATIS事务处理 - - 博客频道 - CSDN.NET
查看>>
编程算法基础-数字数码管-隐藏password
查看>>
C++ - new与malloc的差别
查看>>
使用Html和ashx文件实现其简单的注册页面
查看>>
ZeroMQ接口函数之 :zmq_inproc – ØMQ 本地进程内(线程间)传输方式
查看>>
C#语言基础原理及优缺点
查看>>
AIX系统开启ftp服务
查看>>
linux 上拷贝文件到windows 上 文件出现锁的文件
查看>>
Xamarin iOS教程之编辑界面编写代码
查看>>
Construct Binary Tree from Preorder and Inorder Traversal
查看>>
写得好 git 提交信息
查看>>
Linux下获取线程TID的方法
查看>>
Redis和Memcache的区别分析(转)
查看>>
网络请求 http get post 一
查看>>