jQuery Mobile学习笔记

阅读更多

 

总页面框架：

引用js：

让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0：

详细的控件下面一一记录哈~~

>>>>>Toolbar：

 

例：
data-role="header" data-position="inline"> 

Page Title

Options

主题样式：data-theme="a | b | c | d | e"

位置固定：data-pisition="fixed"

全屏样式：data-fullscreen="true"

返回按钮：data-rel="back" 

反向过渡：data-direction="reverse"

按钮位置：data-role="button"      class="ui-btn-right"

自定义导航菜单： class="ui-bar ui-bar-b"

例：

class="ui-bar ui-bar-b">

I'm just a div with bar classes and a Button

• One


• Two

链接：

打开对话框：Dialog link

对话框大小设置：

.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer { 	max-width: 500px; 	margin: 10% auto 15px auto; }

对话框遮罩主题：data-overlay-theme="a | b | c | d | e"

页面过渡：data-transition="fade | pop | flip |  turn | flow | slide | slideup | slidedown | none"

>>>>>Buttons：

Link button 

小按钮：data-mini="true"

 按钮上的图标：data-icon="arrow-l | arrow-r | arrow-u | arrow-d | delete | plus | minus | check | gear | refresh | forward | back | grid | star | alert | info | home | search"

图标位置：data-iconpos="top | bottom | left | right"

无文字按钮：data-iconpos="notext"

自定义图标：data-icon="myicon"   .ui-icon-myicon{ }

按钮并列：data-inline="true"

按钮组：data-role="controlgroup"

水平按钮组：data-type="horizontal"

例：

Yes
No
Maybe

 >>>>>Content：

 标题：h1 、h2。。。；文本区域；图片；

可折叠： data-role="collapsible"

内容主题：data-content-theme=“a”

默认展开：data-collapsed="false"

小号折叠：data-mini="true"

可折叠组：data-role="collapsible-set"

例：

data-collapsed="false">	
Section 1
	
I'm the collapsible set content for section B.
	

Section 2
	

I'm the collapsible set content for section B.