当前位置:小鱼儿玄机二站 > 操作系统 > 浅析jQuery移动开发中内联按钮和分组按钮的编写

浅析jQuery移动开发中内联按钮和分组按钮的编写

文章作者:操作系统 上传时间:2019-09-03

内联按键 data-inline=true 私下认可处境下,在体内含量的全部按键都堪称块级成分,所以她们填补了荧屏的增加率。

页面动画:
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"同样,不通晓在专门的学问版本大校会保留哪个属性。

只是,即便你想让按键外观紧密,宽度只适合里面包车型地铁文字和icon,那就给开关增添data-inline="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').dialog('close')。
鉴于模态对话框是动态呈现的暂且页面,所以这些页面不会被封存在哈希表内,那就意味着我们讲不可能后退到这些页面,例如你在 A 页面中式点心击三个链接展开 B 对话框,操作实现并关闭对话框,然后跳转到 C 页面,那时候你点击浏览器的后退按键,那时候将回到 A 页面,并不是 B 页面。

图片 1

工具条
工具条重要用以”header”,”footer”等区域,用来支撑和兑现页面浙江中华南理工科业大学学程集团作功效的利用。jQuery Mobile 提供了叁个针锋相对完好的减轻方案。
工具条分为:标题(header bar),页脚(footer bar)和导航(nav bar)那三中使用。
中间标题和页脚在页面中有一部分不一的运用措施,私下认可工具条是以松开(inline)的不二秘诀固定的,这种牢固格局得以兑现最大限度的包容性,包含在对剧本和 css 包容性不佳的装置都有很好的优化。
另一种是生成(fixed)定位的措施,也足以改为“静态“定位,这种稳固格局得以让工具条始终维持在荧屏的最上部或许尾部。并还不错点击事件来体现/隐敝工具条,已落成最大化利用显示屏空间的目标。
实现格局:在标题和页脚区域进入 data-position="fixed"属性。

举个例子您有多个按钮,应该肩并肩地坐在同一行,将data-inline="true"的天性为种种按键。那将作风的按键将其剧情的肥瘦和变化开关让他们坐在同一条直线上。

标题容器
标题容器是页面页眉区域的来得控件,首要用于突显标题和根本操作的区域。
布局代码:
<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"。
假设您从未动用标准的组织来创设标题区域,那么框架将不会自动生成暗中同意的按钮。

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

页脚容器
页脚容器的布局和标题容器的结构基本同样,只要把 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 属性能够让七个页面使用同样的页脚。

图片 2

导航
导航容器是叁个得以每行容纳最多 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-mini="true" 对内联按键创设一个更严密的版本:

按钮
你能够将页面中的任何二个链接通过 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 原生参数列表

图片 3

除此之外能够暗中认可突显左侧包车型客车Logo之外,还能用 data-iconpos 属性来定义Logo与文字的地方关系。
data-iconpos 参数列表:
参数效果
right Logo在文字的左边
top Logo在文字方面
bottom 图标在文字上边
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>

<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</a>

 
按钮组
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>

图片 4

 
列表应用
音讯列表是付出应用中选用功用绝比较较高的控件,用于数据呈现、导航, 数据列表等。为了适应分裂的消息内容,列表的表现情势也总总林林。
列表的代码结构是以平稳和严节列表来促成的,只要在 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 实行分界面营造的底子准绳,后续将通盘 Ajax 和动态创设页面包车型客车技艺资

分组开关 data-role=controlgroup 突发性,你想把一组按键放进叁个独门的器皿内,使他们看起来想一个独自的导航部件。你能够把一组按键包裹在一个器皿内,然后给该容器添加data-role="controlgroup" 属性,Jquery Mobile会创建贰个垂直的开关组,删除掉开关间的margin和影子,然后只在率先个开关和末段一个开关发生圆角,使他们看起来是一组开关。

data-transition 属性能够定义页面切换是的卡通片效果。 比方:a href=index.html data-transition=popIll pop/a data-transition 参数表: 参数表明...

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

图片 5

水平排列 data-type="horizontal"

私下认可情状下,组按键表现为垂直列表,假如给容器加多 data-type="horizontal" 的性质,则足以调换为水平按键的列表,按钮会横向八个驶近一个地水平排列,并设置唯有十足大以适应内容的急剧。((所以要潜心横排景况下按键不要太多,按键的字也无须太多)

<div data-role="controlgroup" data-type="horizontal">
 <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>

图片 6

迷你版 data-mini="true"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <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>

图片 7

仅图标 data-iconpos="notext"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>

图片 8

您恐怕感兴趣的稿子:

  • 接纳jQuery在活动页面上丰富开关和给开关增添Logo
  • jQuery移动页面开采中大旨开关的陈设示例

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:浅析jQuery移动开发中内联按钮和分组按钮的编写

关键词: