1024问

jQuery Mobile 主题

Ipo ·
更新时间:2024-11-14
· 883 次阅读

jQuery Mobile 主题

jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

通过设置元素的data-theme属性可以自定义应用的外观:

按钮
值 描述 实例
a 页面为灰色背景黑色文字
头部与底部均为灰色背景黑色文字
按钮为灰色背景黑色文字
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为黑色
b 页面为黑色背景白色文字
头部与底部均为黑色背景白色文字
按钮为白色文字木炭背景
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为白色

按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色（默认）或黑色：

按钮
lamp "a" 主题的样式用于大多数元素，子元素通常继承父元素的样式。
主题头部和底部 实例



主题对话框的头部底部 实例

 

 



主题按钮 实例 黑色按钮

主题图标 实例 Search

主题弹窗 实例


头部和底部的主题按钮 实例

  主页
 

欢迎访问我的主页


  搜索
主题导航栏 实例

 

文本头部


 

   
 



主题面板 实例


主题可折叠按钮和内容 实例

 

Click me - I'm collapsible!


 

I'm the expanded content.




主题列表 实例

主题分割按钮 实例

    主题可折叠列表 实例

     

    主题表单 实例

      Red
      Green
      Blue

    主题可折叠表单 实例

    Click me - I'm collapsible!
    添加新主题

    jQuery Mobile 可以在移动页面添加新主题。

    通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（c-z）,并在样式中添加你喜欢的颜色和字体。

    你也可以在 HTML 文档中添加主题的新样式， 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) ,页面添加类：ui-page-theme-(a-z) 。

    实例
    .ui-bar-f {
        color: red;
        background-color: yellow;
    }
    .ui-body-f {
        font-weight: bold;
        color: white;
    background-color: purple;
    }
    .ui-page-theme-f {
    font-weight: bold;
        background-color: green;
    }


    lamp 在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后，框架更注重性能上的提升，已不再使用 JavaScript 来继承，而是使用纯 CSS。
    jQuery Mobile 团队为此已经创建了一个工具，地址为 ThemeRoller。你可以使用该工具来升级旧的主题，使其兼容新的版本。



    jQuery Mobile jQuery

1024 个赞
编辑 举报
需要 登录 后方可回复, 如果你还没有账号请 注册新账号
相关文章
HTML5 简介
Flavia 2020-02-10
602
layer.open 子页面弹出层向父页面传输数据的例子
Isis 2020-02-03
613
vue引入jquery时报错$isnotdefined的问题及解决
Noella 2022-11-06
1125
jQuery中DOM属性使用实例详解上篇
Cytheria 2022-11-06
972
Axios和Jquery实现文件上传功能
Damara 2022-11-06
1195
在vue中使用 jquery 的两种方法小结
Noya 2022-11-06
1856
ASP.NETMVC视图页使用jQuery传递异步数据的几种方式详解
Willow 2022-11-06
1123
ASP.NET MVC使用jQuery的Load方法加载静态页面及注意事项
Endora 2022-11-06
1799
ASP.NET MVC使用jQuery ui的progressbar实现进度条
Gaia 2022-11-06
676
jQuery 编程之jQuery 属性选择器
Kamiisa 2022-11-09
803
jquery实现网页左侧导航菜单栏
Glory 2022-11-09
1512
JavaScript中通用的jquery动画滚屏实例
Xenia 2022-11-09
892
jQuery实现简易的计算器
Winona 2022-11-09
950
jQuery实现简单计算器功能
Xandy 2022-11-09
595
JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理
Pandora 2023-02-12
1686
jquery和js显示和隐藏div的几种方法对比整理
Tanisha 2023-02-12
319
Jquery使用原生AJAX方法请求数据
Wanda 2023-02-26
1188
JQuery如何按name属性选择元素
Kande 2023-03-04
118
jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】 原创
Miette 2023-04-26
837
Jquery选择器简明版 Jquery选择器实用版
Diane 2023-05-02
382