客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
jQuery Mobile 主题jQuery Mobile提供了丰富的主题界面，可以呈现出好看的UI效果。 jQuery Mobile 主题jQuery Mobile 提供了5种不同的主题样式, 从 "a" 到 "e" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。 通过设置元素的data-theme属性可以自定义应用的外观: <div data-role="page" data-theme="a|b|c|d|e">
主题头部，内容和底部实例 <div data-role="header" data-theme="b"></div> <div data-role="content" data-theme="a"></div> <div data-role="footer" data-theme="e"></div> 尝试一下 » 主题对话框实例 <a href="#pagetwo" data-rel="dialog">Go To The Themed Dialog Page</a> <div data-role="page" id="pagetwo" data-overlay-theme="e"> <div data-role="header" data-theme="b"></div> <div data-role="content" data-theme="a"></div> <div data-role="footer" data-theme="c"></div> </div> 尝试一下 » 主题按钮实例 <a href="#" data-role="button" data-theme="a">Button</a> <a href="#" data-role="button" data-theme="b">Button</a> <a href="#" data-role="button" data-theme="c">Button</a> 尝试一下 » 提示：在jQuery Mobile中包含了一套标准的jQuery Mobile图标，可以分配给按钮。 主题图标头部和底部的主题按钮实例 <div data-role="header"> <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a> <h1>Welcome To My Homepage</h1> <a href="#" data-role="button" data-icon="search" data-theme="e">Search</a> </div> <div data-role="footer"> <a href="#" data-role="button" data-theme="b" data-icon="plus">Button 1</a> <a href="#" data-role="button" data-theme="c" data-icon="plus">Button 2</a> <a href="#" data-role="button" data-theme="e" data-icon="plus">Button 3</a> </div> 尝试一下 » 主题导航条实例 <div data-role="footer" data-theme="e"> <h1>Insert Footer Text Here</h1> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home" data-theme="b">Button 1</a></li> <li><a href="#" data-icon="arrow-r">Button 2</a></li> <li><a href="#" data-icon="arrow-r">Button 3</a></li> <li><a href="#" data-icon="search" data-theme="a" >Button 4</a></li> </ul> </div> </div> 尝试一下 » 主题可折叠按钮和内容实例 <div data-role="collapsible" data-theme="b" data-content-theme="e"> <h1>Click me - I'm collapsible!</h1> <p>I'm the expanded content.</p> </div> 尝试一下 » 主题列表实例 <ul data-role="listview" data-theme="e"> <li><a href="#">List Item</a></li> <li data-theme="a"><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> 尝试一下 » 主题分割按钮主题可折叠列表实例 <div data-role="collapsible" data-theme="b" data-content-theme="e"> <ul data-role="listview"> <li><a href="#">Agnes</a></li> </ul> </div> 尝试一下 » 主题表单实例 <label for="name">Full Name:</label> <input type="text" name="text" id="name" data-theme="a"> <label for="colors">Choose Favorite Color:</label> <select id="colors" name="colors" data-theme="b"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> 尝试一下 » 主题可折叠表单实例 <fieldset data-role="collapsible" data-theme="b" data-content-theme="e"> <legend>Click me - I'm collapsible!</legend> 尝试一下 » 添加新主题jQuery Mobile 可以在移动页面添加新主题。 通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块，然后重命令字母类名（f-z）,并在样式中添加你喜欢的颜色和字体。 你也可以在 HTML 文档中添加主题的新样式 - 工具条添加类： ui-bar-(a-z) ，文本内容添加类: ui-body-(a-z) for the content: 实例 <style> .ui-bar-f { color:green; background-color:yellow; } .ui-body-f { font-weight:bold; color:purple; } </style> 尝试一下 » 好了，现在通过本章的练习，使用jQuery Mobile主题，以美化你的操作界面吧！  |
请发表评论