您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 主题

jQuery Mobile 主题_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > jQuery Mobile 教程 > jQuery Mobile 主题

jQuery Mobile 主题

此节有 159 人学习过     更新时间:2017-08-06 12:18   参与评论

jQuery Mobile 主题

jQuery Mobile 提供了五种不同的样式主题,从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块,等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。

如需定制应用程序的外观,请使用 data-theme 属性,并为该属性分配一个字母:

<div data-role="page" data-theme="a|b|c|d|e">
描述 例子
a 默认。黑色背景上的白色文本。 测验
b 蓝色背景上的白色文本 / 灰色背景上的黑色文本 测验
c 亮灰色背景上的黑色文本 测验
d 白色背景上的黑色文本 测验
e 橙色背景上的黑色文本 测验

提示:混合您喜欢的主题!

默认地,jQuery Mobile 为页眉和页脚使用 "a" 主题,为页眉内容使用 "c" 主题(亮灰)。不过,您能够自如地对主题进行混合。

主题化的页面、内容和页脚

实例

<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>

亲自试一试

主题化的图标

实例

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

亲自试一试

页眉和页脚中的主题化按钮

实例

<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>

测验0

主题化的可折叠按钮和内容

实例

<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>

测验1

主题化列表

实例

<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>

测验2

主题化划分按钮

实例

<ul data-role="listview" data-split-theme="e">

测验3

主题化的可折叠列表

实例

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

测验4

主题化表单

实例

<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>

测验5

主题化的可折叠表单

实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Click me - I'm collapsible!</legend>

测验6

添加新主题

jQuery Mobile 同时同意您向移动页面添加新主题。

请通过编辑 CSS 文件(如已下载 jQuery Mobile)来添加或编辑新主题。只需拷贝一段样式,并用字母名(f-z)来对类进行重命名,然后调整为您喜欢的颜色和字体即可。

您也能够通过在 HTML 文档中使用主题类来添加新样式 - 为工具条添加类 ui-bar-(a-z),并为内容添加类 ui-body-(a-z):

实例

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

测验7

如对本文有疑问,请提交到交流百家乐注册送48现金,广大热心网友会为你解答!! 点击进入百家乐注册送48现金


公布评论 (159人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换亚游会国际
最新评论
------分隔线----------------------------
条评论
Sitemap