- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - 主题
Jquery 有两个不同的样式主题 A 和 B。每个主题的按钮、栏、内容块等都有不同的颜色。
J 查询主题的语法如下所示 -
<div data-role = "page" data-theme = "a|b">
一个简单的主题示例,如下所示 -
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role = "page" id = "pageone" data-theme = "a"> <div data-role = "header"> <h1>Tutorials Point</h1> </div> <div data-role = "main" class = "ui-content"> <p>Text link</p> <a href = "#">A Standard Text Link</a> <a href = "#" class = "ui-btn">Link Button</a> <p>A List View:</p> <ul data-role = "listview" data-autodividers = "true" data-inset = "true"> <li><a href = "#">Android </a></li> <li><a href = "#">IOS</a></li> </ul> <label for = "fullname">Input Field:</label> <input type = "text" name = "fullname" id = "fullname" placeholder = "Name.."> <label for = "switch">Toggle Switch:</label> <select name = "switch" id = "switch" data-role = "slider"> <option value = "on">On</option> <option value = "off" selected>Off</option> </select> </div> <div data-role = "footer"> <h1>Tutorials point</h1> </div> </div> </body> </html>
这应该产生以下结果 -
一个简单的 B 主题示例,如下所示 -
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role = "page" id = "pageone" data-theme = "b"> <div data-role = "header"> <h1>Tutorials Point</h1> </div> <div data-role = "main" class = "ui-content"> <p>Text link</p> <a href = "#">A Standard Text Link</a> <a href = "#" class = "ui-btn">Link Button</a> <p>A List View:</p> <ul data-role = "listview" data-autodividers = "true" data-inset = "true"> <li><a href = "#">Android </a></li> <li><a href = "#">IOS</a></li> </ul> <label for = "fullname">Input Field:</label> <input type = "text" name = "fullname" id = "fullname" placeholder = "Name.."> <label for = "switch">Toggle Switch:</label> <select name = "switch" id = "switch" data-role = "slider"> <option value = "on">On</option> <option value = "off" selected>Off</option> </select> </div> <div data-role = "footer"> <h1>Tutorials point</h1> </div> </div> </body> </html>
这应该产生以下结果 -