菜单

JQuery Mobile实现导航栏和页脚_jquery_脚本之家

2020年1月4日 - 计算机服务器

导航栏由大器晚成组水平排列的链接构成,常常坐落于页眉或页脚内部。

html5各个页面切换效果和模态对话框用法计算,html5页面切换

那篇小说首要为我们介绍了html5各类页面切换效果和模态对话框用法总计,较为详细的介绍了HTML5的各样页面元素的应用技艺,极度富有实用价值,必要的心上人能够参谋下

本文详细总计了html5各个页面切换效果和模态对话框用法。分享给大家供大家参谋。具体解析如下:

页面动漫

data-transition 属性能够定义页面切换是的卡通效果。
例如:<a href=”index.html” data-transition=”pop”>I’ll
pop</a>
data-transition 参数表:

参数表明

slide 从右偏向左滑入页面
slideup 从底层向上海滑稽剧团入
slidedown 从上向下滑入
pop 从着力渐显张开
fade 渐显
flip 翻转

备注:即使想要在对象页面中显得后退按钮,可以在链接中加入data-direction=”reverse”属性,那天性子和原本的
data-back=”true”相符,不亮堂在专门的职业版本少校会保留哪个属性。

模态对话框

模态对话框是意气风发种含有圆角标题栏和破产开关的伪浮动层,用于独自据有事件的选取。任何结构化的页面都得以用
data-rel=”dialog”链接的艺术落实模态对话框应用。
例如:<a href=”foo.html” data-rel=”dialog”>Open dialog</a>
其生龙活虎页面切换效果同样能够动用标准页面包车型客车 data-transition
参数效果。提议选择”pop”、”slideup” 和”flip”参数以达到越来越好的效果。
其一模态对话框会私下认可生成关闭按键,用于回到父级页面。在剧本本事较弱的设备上也得以加上一个带有
data-rel=”back”的链接来落到实处关闭按键。
本着帮衬脚本的设备能够直接使用 href=”#”或许data-rel=”back”来完成关闭。还是能应用内置的”close”方法来关闭模态对话框,比方:$(‘.ui-dialog’State of Qatar.dialog(‘close’State of Qatar。
是因为模态对话框是动态展现的一时页面,所以那几个页面不会被封存在哈希表内,那就代表大家讲不可能后退到那些页面,譬喻你在
A 页面中式茶食击一个链接张开 B 对话框,操作达成并关闭对话框,然后跳转到 C
页面,那个时候你点击浏览器的滞后按键,此时将赶回 A 页面,并不是 B 页面。

工具条

工具条首要用于”header”,”footer”等区域,用来支撑和兑现页面云南中华南交通大学程集团作效用的行使。jQuery
Mobile 提供了三个针锋相投完好的解决方案。
工具条分为:标题(header bar),页脚(footer bar)和导航(nav
bar)那三中运用。
在那之中标题和页脚在页面中有风流倜傥对分化的利用措施,暗中认可工具条是以放开(inline)的方法固定的,这种牢固格局得以完结最大限度的包容性,蕴涵在对剧本和
css 包容性不好的配备都有很好的优化。
另后生可畏种是生成(fixed)定位的不二等秘书诀,也能够成为“静态“定位,这种牢固方式得以让工具条始终维持在显示器的顶上部分或然尾部。并能够负责点击事件来体现/隐讳工具条,已落得最大化利用显示屏空间的指标。
贯彻方式:在标题和页脚区域投入 data-position=”fixed”属性。

标题容器

标题容器是页面页眉区域的来得控件,首要用以显示标题和重要操作的区域。
构造代码:

代码如下:

<div data-role=”header”>
<h1>Page Title</h1>
</div>

为了有辅助页面包车型大巴相互在页面切换后会在标题容器的左臂自动生成四个滑坡按键,那样能够简化大家的付出复杂程度,可是有个别时候我们会因为运用的急需而没有须要这一个后退按键,能够在标题容器上加多data-backbtn=”false”属性用来堵住后退按键的电动创设。
标题容器的左边和左边分别能够放置三个按键,在阻拦自动生成的落后按键后,大家就足以在倒退开关之处来自定义按键了。
例如:

代码如下:

<div data-role=”header” data-position=”inline” data-backbtn=”false”
>
<a href=”index.html” data-icon=”delete”>Cancel</a>
<h1>Edit Contact</h1>
<a href=”index.html” data-icon=”check”>Save</a>
</div>

风流倜傥经急需自定义暗许的向下按键中的文本,能够用data-back-btn-text=”previous”属性来贯彻,只怕经过扩充的格局落到实处:

代码如下:

$.mobile.page.prototype.options.backBtnText = “previous”

要是您未有接受正规的构造来创设标题区域,那么框架将不会自动生成默许的开关。

页脚容器

页脚容器的布局和标题容器的结构基本相像,只要把 data-role
属性的参数设置为”footer”。
例如:

代码如下:

<div data-role=”footer”>
<h4>Footer content</h4>
</div>

与标题容器比较页脚容器有更加的多的灵活度,它不会想标题容器同样只允许放置多个按键,并且也不会默许的把按键放置在左右的顶上部分,页脚的按键私下认可是从左到右依次排列的,何况何以放置越来越多的按键。
在页脚容器上后生可畏经加上叁个class=”ui-bar”就能够将页脚形成二个工具条,你能够不要安装任何的布局样式就能够在里边增添有次序的开关。
例如:

代码如下:

<div data-role=”footer” class=”ui-bar”>
<a href=”index.html” data-role=”button”
data-icon=”delete”>Remove</a>
<a href=”index.html” data-role=”button”
data-icon=”plus”>Add</a>
<a href=”index.html” data-role=”button”
data-icon=”arrow-u”>Up</a>
<a href=”index.html” data-role=”button”
data-icon=”arrow-d”>Down</a>
</div>

倘若大家供给后生可畏组链接效果,我们得以如此写:

代码如下:

<div data-role=”footer” class=”ui-bar” data-position=”inline”>
<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”index.html” data-icon=”delete”>Remove</a>
<a href=”index.html” data-icon=”plus”>Add</a>
<a href=”index.html” data-icon=”arrow-u”>Up</a>
<a href=”index.html” data-icon=”arrow-d”>Down</a>
</div>
</div>

技巧:通过运用 data-id 属性能够让多个页面使用同大器晚成的页脚。

导航

导航容器是一个得以每行容纳最多 5 个开关的开关组控件,用二个具备data-role=”navbar”
个性的 div 来宽容那些按钮。
例子:

代码如下:

<div data-role=”footer”>
<div data-role=”navbar”>
<ul>
<li><a href=”a.html”
class=”ui-btn-active”>One</a></li>
<li><a href=”b.html”>Two</a></li>
</ul>
</div><!– /navbar –>
</div><!– /footer –>

在默许的开关上加多 class=”ui-btn-active”
假定开关的数额超过 5 个,导航容器将会自动以适龄的多寡分配成多行展现。

按钮

你能够将页面中的任何三个链接通过
data-role=”button”来声称成为按钮的展现风格。为了风格统意气风发,框架会在页面加载时自动将
form 类的开关格式化为 jQuery Mobile 风格的按键,没有需求丰富 data-role
属性。
框架中含有了生机勃勃组常用的Logo能够用来按键,用 data-icon
属性中的参数来定义展现区别的Logo效果。
例如:

代码如下:

<a href=”index.html” data-role=”button”
data-icon=”delete”>Delete</a>

data-icon 原生参数列表

而外能够私下认可呈现左边的Logo之外,还是能用 data-iconpos
属性来定义Logo与文字之处关系。
data-iconpos 参数列表:

参数效果:
right 图标在文字的侧边
top Logo在文字方面
bottom Logo在文字上面
data-iconpos=”notext”属性能够让开关隐敝文字。

内联样式

在框架中暗中认可情况下开关是横向独自据有依照显示器宽度横向自适应的,不过大家在利用的利用中有的时候要求在生机勃勃行中显得四个按键,那时我们就须求了解三个新的可以称作内联方式的习性了
data-inline=”true”。
例如:

代码如下:

<div data-inline=”true”>
<a href=”index.html” data-role=”button”>Cancel</a>
<a href=”index.html” data-role=”button”
data-theme=”b”>Save</a>
</div>

 
按钮组

jQuery Mobile
框架能够将多少个按键以组的点子展现,data-role=”controlgroup”用以呈现按键间的生龙活虎体关系。比如:

代码如下:

<div data-role=”controlgroup”>
<a href=”index.html” data-role=”button”>Yes</a>
<a href=”index.html” data-role=”button”>No</a>
<a href=”index.html” data-role=”button”>Maybe</a>
</div>

假如急需开关横向排列可以追加 data-type=”horizontal”属性。

表单应用

jQuery Mobile 框架为原生的 html
表单成分封装了新的表现格局,对触屏设备的操作举行了优化。在框架的页面中会自动将
form 成分渲染成 jQuery Mobile 风格的因素。
form 元素的使用和暗中认可的 html 方式利用相仿,能够雷同应用 Post 和 get
情势提交数据,然而须要小心的是因素的 ID
命名难点,在正规的标准中同叁个页面中是不容许现身同样的 ID命名的,在
jQuery Mobile 中出于其同意在同一个 DOM 中存在四个页面,所以提议 form
成分的 ID 命名在任何项目中是必定要经过之处的,幸免由于 ID 难点引发的荒诞。
私下认可情形下框架会活动渲染在专门的学问页面中的 form
成分的风骨,生龙活虎旦得逞渲染后,那一个控件成分将能够利用 jQuery
中的函数进行操作。在有个别景况下,大家供给选用 html 原生的 form
成分,为了阻碍 mobile 框架对该因素的自行渲染,在框架中大家在 data-role
属性中引进了三个调控参数”none”。使用这性格格参数就能让该因素以 html
原生的景色呈现。
例如:

代码如下:

<select name=”foo” id=”foo” data-role=”none”>
<option value=”a” >A</option>
<option value=”b” >B</option>
<option value=”c” >C</option>
</select>

 
列表应用

音信列表是开荒应用中应用效率绝比较较高的控件,用于数据彰显、导航,
数据列表等。为了适应分裂的新闻内容,列表的表现格局也五颜六色。
列表的代码构造是以平稳和冬天列表来完毕的,只要在 ul 或 ol 上宣示
data-role=”listview”就可以让框架以列表的法子渲染了,举例:

代码如下:

<ul data-role=”listview” data-theme=”g”>
<li><a href=”acura.html”>Acura</a></li>
<li><a href=”audi.html”>Audi</a></li>
<li><a href=”bmw.html”>BMW</a></li>
</ul>

万意气风发供给在列表里添增加少,则必要在多少加载后实施refresh(卡塔尔(قطر‎方法对列表举行数据更新。
例如:

代码如下:

$(‘ul’).listview(‘refresh’);

如上是应用 jQuery Mobile 举行分界面创设的底工准绳。

企望本文所述对大家的HTML5程序设计有着扶持。

默许地,导航栏中的链接会自动转换为按键(不供给 data-role=”button”)。

导航栏部分的代码平常放置在data-role为header的div的内。

 首页 欢迎访问我的主页 搜索 

叁个宗旨的领航栏代码如上,包罗三个开关和生机勃勃行文字作为标题。data-icon能够定义开关对应的小图标。假设期望将按钮放在文本左边,能够加多class=“ui-btn-right”样式。要注意的是,Jquery
Mobile中的导航部分只可以分包八个按键。(能够想像一下,日常的手提式有线话机app导航内都不会有过多的button,平时都投身页脚中)

相比之下,页脚的按键数量未有限定,页脚放在footer中,基本代码如下:

 转播到新浪微博 转播到腾讯微博 转播到QQ空间 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图