脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C 语言 → jQuery的主题按钮设计

jQuery移动页面开发中主题按钮的设计示例

 更新时间：2015年12月04日 17:59:41   投稿：goldensun  
这篇文章主要介绍了jQuery移动页面开发中主题按钮的设计示例,jQuery是当今最具人气的JavaScript开发类库,需要的朋友可以参考下

在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子

"A"主题下的图标按钮 data-theme="a"

<div data-role="content"> 
 <div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 </div>
 <div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 </div>
</div>

2015124175139841.jpg (812×135)

"B"主题下的图标按钮 data-theme="b"

2015124175201898.jpg (809×114)

"C"主题下的图标按钮 data-theme="c"

2015124175220352.jpg (820×123)

主题按钮

Query移动具有丰富的主题系统，让您完全控制如何按钮风格。当链接添加到一个容器，它是自动分配符合其母棒或内容框的视觉整合按钮到父容器的主题样本的信，就像一条变色龙。所以一个按钮放在内容与主题为“一”（在默认主题黑色）将自动分配按钮的主题是“a”（在默认主题木炭）。a为黑，b为灰底蓝，c为灰底灰，d白底白色 ，e黄底黄色。这是默认的主题的主题对按钮的例子。所有的按钮都有相同的HTML标记：

<div data-role="content"> 
 <div class="ui-body ui-body-a"><h4>Swatch "a"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-b"><h4>Swatch "b"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-c"><h4>Swatch "c"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-d"><h4>Swatch "d"</h4><a href="index.html" data-role="button">Button</a></div>
 <div class="ui-body ui-body-e"><h4>Swatch "e"</h4><a href="index.html" data-role="button">Button</a></div>
</div>

2015124175303944.jpg (825×645)

分配系统样式 data-theme

给按钮增加data-theme="字母"属性，可以手动的给按钮添加样式，使得按钮不一定非要与父容器的样式相符

<div data-role="content"> 
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>

2015124175326633.jpg (820×74)

主题的变化 ui-body

默认有五套风格，ui-body-a,ui-body-b,ui-body-c,ui-body-d,ui-body-e

<div class="ui-body ui-body-a">
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>

2015124175344754.jpg (819×87)

<div class="ui-body ui-body-b">
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>

2015124175401990.jpg (814×84)

2015124175420387.jpg (833×395)

您可能感兴趣的文章:

相关文章

  • 深入理解约瑟夫环的数学优化方法

    深入理解约瑟夫环的数学优化方法

    本篇文章是对约瑟夫环的数学优化方法进行了详细的分析介绍，需要的朋友参考下
    2013-05-05
  • 详解C++成员函数的override和final说明符的用法

    详解C++成员函数的override和final说明符的用法

    这篇文章主要介绍了详解C++成员函数的override和final说明符的用法,分别用于重写和禁止继承类,要的朋友可以参考下
    2016-01-01
  • C++ 使用VS Code运行程序时终端输出中文乱码的解决办法

    C++ 使用VS Code运行程序时终端输出中文乱码的解决办法

    这篇文章主要介绍了C++ 使用VS Code运行程序时终端输出中文乱码的解决办法 ,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • C++使用ADO实现存取图片的方法

    C++使用ADO实现存取图片的方法

    这篇文章主要介绍了C++使用ADO实现存取图片的方法,需要的朋友可以参考下
    2014-07-07
  • C语言轻松实现扫雷小游戏

    C语言轻松实现扫雷小游戏

    扫雷是一款经典的小游戏，这篇文章主要为大家详细介绍了C语言轻松实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • C++如何用数组模拟链表

    C++如何用数组模拟链表

    大家好，本篇文章主要讲的是C++如何用数组模拟链表，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下
    2022-01-01
  • C语言中隐藏结构体的细节

    C语言中隐藏结构体的细节

    以笔者粗浅的认识，有两种最常用的方法，可以实现库内结构体定义的隐藏：接口函数形参使用结构体指针，接口函数形参使用句柄。
    2017-05-05
  • OpenCV实现乱序碎片复原

    OpenCV实现乱序碎片复原

    这篇文章主要介绍了通过OpenCV 直方图相似度对比，实现将4张打乱顺序的碎片拼接复原并展示原图。文中的示例代码讲解详细，需要的朋友可以学习一下
    2021-12-12
  • 深入理解C++函数栈帧

    深入理解C++函数栈帧

    本文主要介绍了C++函数栈帧，详细的介绍了C++函数栈帧的概念以及使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • C++内存泄漏检测和解决方法小结

    C++内存泄漏检测和解决方法小结

    内存泄露在编程中是常见的一种问题,一但程序发生内存泄露问题,将导致程序崩溃无法运行,内存泄漏是指程序在运行过程中,由于疏忽或错误导致已分配的内存空间无法被正确释放,本文给大家就介绍了C++中内存泄漏如何检测和解决,需要的朋友可以参考下
    2025-01-01

最新评论