jQuery Mobile 按钮、图标

jQuery Mobile 中创建按钮

可通过三种方法创建:

1.使用<button> 元素

2.使用<input>元素

3.使用 data-role=”button” 的<a> 元素

★推荐使用 data-role=”button” 的 <a> 元素来创建页面之间的链接,而<input><button>元素用于表单提交。

按钮的基本属性

1.默认情况下,按钮会占据屏幕的全部宽度。若需要按钮适应其内容,或者需要两个或多个按钮并排显示时,添加

data-inline="true"

eg:

<a href="#" data-inline="true" data-role="button">a标签 按钮</a>
<a href="#" data-inline="true" data-role="button">a标签 按钮</a>
<a href="#" data-inline="true" data-role="button">a标签 按钮</a>

2.规定按钮是否有阴影

data-shadow="false|true"

规定是否有圆角

data-corners="false|true"

3.按钮的主题颜色

data-theme="letter(a-z)"

eg:

<div data-role="header" data-theme="b">

<h1>第 1 页</h1>

</div>

4.创建后腿按钮,使用data-rel="back"属性,该属性会忽略锚的href值。如下例,虽然写的链接到百度,但实际上点按钮时,则是返回上一页。

eg:

<a href="http://www.baidu.com" data-rel="back" data-role="button">返回

5.将 data-role=”controlgroup” 属性与 data-type=”horizontal|vertical” 一同使用

<div data-role="controlgroup" data-type="horizontal">
3     <a href="#" data-role="button" data-theme="a">首页</a>
4     <a href="#" data-role="button" data-theme="b">介绍</a>
5     <a href="#" data-role="button" data-theme="c">联系</a>
6 </div>

jQuery Mobile 中创建图标

1.常见的可用图标:data-icon属性

<a href="#" data-inline="true" data-role="button" data-icon="arrow-u">上</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-d">下</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-l">左</a>
<a href="#" data-inline="true" data-role="button" data-icon="arrow-r">右</a>

2.定位图标: 请使用 data-iconpos 属性来规定位置

eg:

<a href="#" data-inline="true" data-role="button" data-icon="arrow-u" data-iconpos="top">上</a>
 <a href="#" data-inline="true" data-role="button" data-icon="arrow-d" data-iconpos="bottom">下</a>
 <a href="#" data-inline="true" data-role="button" data-icon="arrow-l" data-iconpos="left">左</a>
 <a href="#" data-inline="true" data-role="button" data-icon="arrow-r" data-iconpos="right">右</a>

3.如果只需显示图标,请将 data-iconpos 设置为 “notext”

<a href="#" data-inline="true" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
<a href="#" data-inline="true" data-role="button" data-icon="home" data-iconpos="notext">主页</a>
<a href="#" data-inline="true" data-role="button" data-icon="info" data-iconpos="notext">消息</a>

时间: 2024-10-11 02:00:58

jQuery Mobile 按钮、图标的相关文章

jQuery Mobile 按钮图标

jQuery Mobile 提供的一套图标可令您的按钮更具吸引力. 1.为 jQuery Mobile 按钮添加图标 如需向您的按钮添加图标,请使用 data-icon 属性:(您也可以在 <button> 或 <input> 元素中使用 data-icon 属性.) <div data-role="page" id="pageone"> <div data-role="content"> <

(三)Jquery Mobile按钮详细讲解

Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button              此中显示和HTML5是系统的.      3.JM中button内联样式 data-inline      说到内联样式和block样式,大家估计都不知道怎么回事,内联inline是说,外面的框会根据内部的文字来改变,block则正好相反,上面展示的按钮占据了整个一行的效果,现在我们需要

JQuery Mobile - 自定义图标!

环境 jquery1.9.1.js jquery mobile 1.4.2版 图标制作 18x18px 底透明的png图标 使用图标,这个过程开始怎么弄都不行,只有个灰色的圆出现,不见图标:或者出现图标,但位置不对,经过看jquery demo,终于知道了如何使用 步骤如下 1 .当然是定义你的css图标类了 .ui-icon-myicon:after { background-image: url("img/title.png"); /**你的图片,路径是相对于当前使用文件可以访问到

对于JQuery Mobile的介绍

jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序.jQuery 适用于所有流行的智能手机和平板电脑:jQuery Mobile 构建于 jQuery 库之上,这使其更易学习.它使用 HTML5.CSS3.JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局.jQuery Mobile 将“写得更少.做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致. jQuery Mobile 主题,jQuery

皓轩的jquery mobile之路(二)

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加data-role="header",内容需要添加data-role="content",底部需要添加data-role="footer". 代码: -----------------------------------------------------

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQuer

【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: 1 <divdata-role="footer"> 2 <div data-role="navbar"data-grid="c"> 3 <ul> 4 <li><a id="chat" href="#"data-i

小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给button加图标)

在范例5-4所使用的导航栏中,已经为button增加了图标的样式,可是当时并没有介绍button的图标到底是怎么一回事.以下截取范例5-4中导航栏部分的代码: <divdata-role="footer"> <div data-role="navbar"data-grid="c"> <ul> <li><a id="chat" href="#"data-i