位置: 编程技术 - 正文

jquery-mobile基础属性与用法详解(jquery mobile)

编辑:rootadmin

推荐整理分享jquery-mobile基础属性与用法详解(jquery mobile),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery mobile实例,jquery mobile是干什么的,jquery mobile是干什么的,jquery mobile是干什么的,jquery mobile教程,jquery mobile教程,jquery mobile ui,jquery mobile ui,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考,具体如下:

写在前面

本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷。

0. 引入库

引入对应的文件:

一、页面结构说明

页面的三要素:

页面 data-role="page" //注意这个属性必须有 且为最外层div 否则事件注册的时候 会自动注册俩次页头 data-role="header" //页面头部标题 或菜单区内容 data-role="content" //页面内容页尾 data-role="footer" //页尾标题 或菜单区

【1.页面全屏】

需要当前页面的头部和尾部留在最上和最下的时候 可以在 header 和 footer 的div 中 加上属性

注意俩个必须同时加,否则将无任何效果

【2.页面标题居中】

必须在 header 或 footer的 div的下一级加上 h1 标签 其他标签无效

二、在HTML中创建多个页面

【页面内之间切换】

默认显示第一个页面其他页面隐藏

【对话框】

如果页面中只用俩个page 默认第一个page 为主体页面不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框

当然如果有多个page,其他的也是可以更改的,但是第一个page 不会更改

三、多个页面之间的过渡效果

在a标签中添加属性

当然可以添加滑动的反方向动作

fade 默认。淡入淡出到下一页。

flip 从后向前翻动到下一页。

flow 抛出当前页面,引入下一页。

pop 像弹出窗口那样转到下一页。

slide 从右向左滑动到下一页。

slidefade 从右向左滑动并淡入到下一页。

slideup 从下到上滑动到下一页。

slidedown 从上到下滑动到下一页。

turn 转向下一页。

none 无过渡效果。

四、按钮的使用

生成按钮的三种方式

<button><input type="submit/reset/button"/><a data-role="button"> (推荐)

【导航按钮】

【行内按钮】

默认一个按钮占据一行,如果不想占据一行可以使用内联属性

【组合按钮】

【后退按钮】(会自动忽略 href属性)

data-corners true | false规定按钮是否有圆角。默认truedata-mini true | false规定是否是小型按钮。默认falsedata-shadow true | false规定按钮是否有阴影。默认true

五、图标的使用

为按钮添加图标 只要加上如下属性 即可

data-icon="search"

data-icon="arrow-l" 左箭头

data-icon="arrow-r" 右箭头

data-icon="delete" 删除

data-icon="info" 信息

data-icon="home" 首页

data-icon="back" 返回

data-icon="search" 搜索

data-icon="grid" 网格

图标定位

data-iconpos="top/left/right/bottom" 默认left

只要图标的话:

将上述属性设置为 notext

六、工具栏的使用

【页眉】

向文字的左右俩测各加一个按钮

[单个按钮居右](默认居左)

如果只加一个按钮,不管是加在h1的前面还是后面都会默认放在左侧,如果想放在右侧,需在按钮上添加

如下属性

[注意]:页眉只可以包含一到俩个按钮,页脚无限制

【页脚】

页脚和页眉不同,他省去了一些内联样式 且不会居中如果需要居中,则可以在footer上添加

jquery-mobile基础属性与用法详解(jquery mobile)

class="ui-btn" (并且只能在footer上添加)

当然也可以选择水平或垂直的组合方式

【页眉和页脚的定位】

[inline] 默认

页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度增加

[fixed]

根据滚动条的位置 分别显示 或 隐藏页眉或页脚

[fullscreen]

需要同时定义俩个属性 会同时显示隐藏 页眉或页脚

七、导航栏的使用

【导航栏】

使用 navbar 定义导航栏

注意:navbar下面的a标签 可以免去data-role="button" 自动会添加类似属性

【选中按钮】

在不点击的情况下 激活选中

点击后激活选中(这个预先放入按钮 属性中 点击时会被激活)

class="ui-state-persist"

[注意]:

导航按钮可以放在 footer content header中

需要使用的时候:

必须按照

div:data-role="footer">div:data-role="navbar">ul>li>a 的层级来展示

八、可折叠的使用

【单个可折叠】

格式:

折叠默认是关闭的,需要默认打开 可添加属性

【嵌套的可折叠】

此格式 可以去掉内容 保留标题,制作无限极菜单

【集合可折叠】

父:data-role="collapsible-set"子:data-role="collapsible"

【去掉标题圆角】

【小化按钮】

【改变图标】

九、网格布局

【四种网格布局】

网格类 列 列宽度对应 实例ui-grid-a 2 % / % ui-block-a|b

ui-grid-b 3 % / % / % ui-block-a|b|c

ui-grid-c 4 % / % / % / % ui-block-a|b|c|d

ui-grid-d 5 % / % / % / % / % ui-block-a|b|c|d|e

父类 行rowui-grid-a 俩列ui-block-aui-block-b

注意子类每一个新的类 ui-block-a 都会另起一行

十、列表视图

在ul或ol上增加 属性

【特定列分割】

li列表中增加分隔符 手动分割

【按字母自动分割】

ul/ol 增加属性

【圆角】

【搜索与过滤】

data-role="listview" 列表属性data-autodividers="true" 按字母自动分组属性data-inset="true" 圆角属性data-filter="true" 数据过滤属性data-filter-placeholder="搜索姓名 ..." 过滤文本框默认文字属性

【只读属性】

去掉 li里的a标签 保留文字即可

【列表内容】

1. 包含缩略图的列表

2. 列表图标

如果是*的 图标 加上

不是 就同上。

3. 拆分按钮

4. 计数泡沫

a标签 里的sapn加上类名

5. 更改默认图标

li 里添加属性

6. 日历事件

列表>分隔列表 >列表内容

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jquery-mobile表单的创建方法详解 本文实例讲述了jquery-mobile表单的创建方法。分享给大家供大家参考,具体如下:一、注意事项1.form元素必须设置method和action属性2.每个表单元素必须设

jQuery-mobile事件监听与用法详解 本文实例讲述了jQuery-mobile事件监听与用法。分享给大家供大家参考,具体如下:触摸事件-当用户触摸屏幕时触发(敲击和滑动)滚动事件-当上下滚动

jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法 jQueryCannotreadproperty‘msie'ofundefined错误的解决方法最近把一个项目的jQuery升级到最新版,发现有些页面报如下错误Cannotreadproperty'msie'ofundefined上jQuery网站

标签: jquery mobile

本文链接地址:https://www.jiuchutong.com/biancheng/377852.html 转载请保留说明!

上一篇:利用jquery获取select下拉框的值(jquery怎么获取)

下一篇:jquery-mobile表单的创建方法详解(jquery 报表)

  • 应付税费重分类如何做会计分录?
  • 购买汽车的印花税要计入汽车原值吗
  • 房产税纳税义务人
  • 如何合伙注册公司
  • 小规模增值税免征额
  • 文化事业建设费怎么申报
  • 报表中的存货是如何填报的
  • 小微企业注册流程及费用微
  • 公允价值变动损益影响营业利润吗
  • 小规模开专票附加税要计提吗
  • 银行入息是入几个月的
  • 单位发放中秋月饼价值有规定吗
  • 在途物资的运费放在哪个科目
  • 企业用现金购进存货是单选题
  • 收到厂家返利如何做账
  • 待处置资产损溢在什么科目
  • 异地预缴企业所得税几个点
  • 房地产母公司将其土地变更到其全资子公司
  • 租赁业务增值税纳税义务发生时间
  • 增值税票查无此票是什么原因
  • 个人所得税法规定可减征个税的情形有
  • 电器以旧换新的套路
  • 预缴和实际应付的区别
  • 控股公司如何抵押股权
  • 赎回股份是利好还是利空
  • 主营业务收入少记跨年怎么办
  • 供热公司向用户提供
  • 以前年度多计提的附加税怎么调账
  • 多发的工资可以从下月扣除吗
  • 简易征收办法征收一般纳税人
  • 苹果电脑怎么打顿号
  • 公司买车怎么入户
  • php数组函数输出《咏雪》里有多少"片"字
  • 收购农产品进项税抵扣税率是多少
  • easyexcel解析csv
  • PHP:zip_entry_close()的用法_Zip函数
  • 购买车辆的会计分录该怎样做
  • php使用js
  • php echo语句
  • php文件上传用什么请求方法
  • wordpress转化为html
  • vue项目创建流程
  • 固定资产清理属于非流动资产吗
  • 支付职工差旅费发生的现金流出
  • 金融企业会计科目有哪些
  • 资产减值损失属于什么科目借贷方向
  • php验证码代码怎么写
  • dedecms配置
  • 成本核算需要哪些数据
  • 什么样的公司可以申请破产
  • 劳动合同和劳务合同可以一起签吗
  • 增值税发票品名 归类
  • Oracle、MySQL和SqlServe三种数据库分页查询语句的区别介绍
  • Win2003系统下SQL Server 2008安装图解教程(详细图解)
  • 营业收入净额是利润表的哪个数
  • 公司帮员工买的意外险钱是打到公司还是员工账号
  • 盈余公积的提取条件
  • 应付账款的主要成本包括
  • 收到稳岗补贴要交税吗
  • 农民工工资从专户里发放工资需要甲方盖章吗
  • 加计扣除10%进项税政策文件
  • 主营业务成本可以直接贷银行存款吗
  • 其他应付款通俗
  • 养老保险滞纳金计算器
  • Linux下mysql 5.6.17 安装图文教程
  • OpenSolaris 6/06 DVD版本
  • logo是什么文件夹
  • c盘越来越小了
  • linux在vim编辑器中,将光标移动
  • opengl语言
  • excel自定义样式
  • linux 映射 fn键
  • css使用教程
  • js原生方法大全
  • javascript的prompt
  • express.js教程
  • android反编译smali
  • 地方文化包括哪几种
  • 杭州注册公司需要钱吗
  • 安徽省国税局局长是谁
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设