`
流浪鱼
  • 浏览: 1682255 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery Mobile 主题

 
阅读更多

$.mobile.page.prototype.options.theme='a';

 if ($.cookie("StrTheme")) {
            $.mobile.page.prototype.options.theme = $.cookie("StrTheme");
        }


<div data-role="page">
    <div data-role="header"><h1>头部栏</h1></div>
    <div data-role="content">
      <select name="selTheme" id="selTheme" data-native-menu="false"> 
	    <option value="">选择主题</option> 
		<option value="a">主题a</option> 
		<option value="b">主题b</option> 
		<option value="c">主题c</option> 
		<option value="d">主题d</option> 
		<option value="e">主题e</option> 
	  </select>
    </div>
  <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
 </div>

 列表项

<ul data-role="listview" data-theme="c" 
        data-divider-theme="b" data-count-theme="e"> 
	  <li data-role="list-divider">图书</li> 
	  <li><a href="#">计算机 <span class="ui-li-count">100</span></a></li> 
	  <li data-theme="d"><a href="#">社科 <span class="ui-li-count">101</span></a></li> 
	  <li><a href="#">文艺 <span class="ui-li-count">102</span></a></li> 
	  <li data-role="list-divider">音乐</li> 
	  <li><a href="#">流行<span class="ui-li-count">103</span></a></li> 
	  <li><a href="#">通俗<span class="ui-li-count">104</span></a></li> 
	</ul> 

 $.mobile.listview.prototype.options.dividerTheme='a';

 指定内容和标题的样式

 <div data-role="page">
  <div data-role="header"><h1>头部栏</h1></div>
    <div data-role="content" data-theme="e"> 
	  <div data-role="collapsible" data-content-theme="c"> 
	    <h3>今天天气</h3> 
		<p>晴,气温<code> 18~4℃</code> 西风<em> 3-4</em> 级</p> 
	  </div>
	  <div data-role="collapsible" data-content-theme="b"> 
		<h3>明天天气</h3> 
		<p>晴,气温<code> 17~6℃</code> 西风<em> 4-5</em> 级</p> 
	  </div> 
    </div>
	<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> 
  </div>

 

 

 

分享到:
评论

相关推荐

    jQuery Mobile 高级设计模板

    2. **CSS 文件:** 包含定制的jQuery Mobile主题,可能包含额外的样式规则以增强模板的外观。 3. **JavaScript 文件:** 可能包含自定义的jQuery代码,用于扩展组件功能、实现特定交互或与服务器进行通信。 4. **...

    jQuery Mobile快速入门源代码

    6. **主题和样式**:展示如何定制和应用jQuery Mobile主题,以及如何调整组件样式。 7. **性能优化**:可能包括如何减少HTTP请求,延迟加载(懒加载)非首屏内容,以及优化页面初始化等方面的技巧。 通过这些源代码...

    jquery-mobile-theme

    具体来说,自定义jQuery Mobile主题的过程包括以下几个步骤: 1. **分析需求**:确定UI设计的目标风格,例如棕色与黑色的搭配,这可能是为了营造出高端、专业的感觉,或者是为了配合特定的品牌色彩。 2. **理解...

    jQuery Mobile十大常用技巧

    自定义jQuery Mobile主题包括以下步骤: a. 复制原有主题CSS到新CSS文件。 b. 为新主题命名,如`Z`,并修改所有主题类名(如`.ui-btn-up-c`更改为`.ui-btn-up-z`)。 c. 修改新主题的颜色和样式。 d. 在页面...

    jquery-mobile-square-ui-theme:jQuery Mobile Square UI主题

    jQuery Mobile Square-UI主题基于jQuery Mobile主题。演示版版本号我们将使用master分支来更新jQuery Mobile版本。 以前的版本将移至相应的分支。当前分支布局大师-jQuery Mobile 1.4版-当前正在进行中,尚未准备好...

    jquery.mobile-1.4.2.zip

    通过引用此文件,你可以为页面添加基本的jQuery Mobile主题和交互效果。 2. `jquery.mobile.inline-svg-1.4.2.css`:这个文件用于支持内联SVG图标,使图标在不同的设备和浏览器上表现一致。 3. `jquery.mobile.icons...

    jquery与jquerymobile知识大全

    jQuery Mobile 提供了一个强大的主题编辑器,允许开发者轻松创建高度定制化的主题。这包括颜色、字体、边框样式等各个方面。主题编辑器不仅支持预设的主题,还可以根据项目需求自定义主题,从而实现高度的品牌化。 ...

    基于Jquery Mobile的IOS主题

    **基于jQuery Mobile的iOS主题详解** 在移动应用开发领域,jQuery Mobile是一款强大的前端框架,它为构建响应式、触控友好的网页应用提供了便利。尤其是对于想要模仿iOS设备外观和感觉的应用,jQuery Mobile的iOS...

    jquerymobile所需要的库文件

    7. **jQuerymobile主题文件**:jQuery Mobile 允许自定义主题,这些主题文件(如 theme.css 或 theme.min.css)包含特定颜色和样式的设置。 8. **HTML 示例文件**:可能包括一些示例页面,展示如何在实际项目中使用...

    jquery-mobile-theme-174943-0

    《jQuery Mobile 主题174943-0详解》 在Web开发领域,jQuery Mobile是一个广泛使用的框架,它为构建响应式、触屏友好的移动应用提供了强大的工具。本主题,"jquery-mobile-theme-174943-0",是jQuery Mobile众多...

    jQuery mobile相册的一种样式

    jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,我们将深入探讨如何利用jQuery Mobile创建一个具有吸引力的相册展示。 首先,jQuery Mobile的核心是其...

    jQueryMobile-HTML5模板

    3. **可定制的主题系统**:jQuery Mobile提供了一套主题引擎,允许开发者通过简单的CSS修改,轻松改变整个应用的外观和风格。 4. **丰富的组件库**:包括按钮、表单、列表视图、工具栏、滑块、开关、对话框等多种...

    jquerymobile设计完整例子

    jQuery Mobile 提供了一套强大的主题系统,允许开发者通过简单的 CSS 类选择器改变整个应用的视觉风格。`data-theme`属性可以应用于任何元素,改变其背景色、边框和文本颜色。此外,还可以通过修改主题CSS文件进行...

    jQuery mobile相册

    在"jQuery mobile相册"这一主题中,我们主要关注的是如何使用jQuery Mobile的特性来构建一个功能完善的相册应用。以下是一些关键知识点: 1. **jQuery Mobile的基础**:首先,需要了解jQuery Mobile的基本结构,...

    jQuery Mobile快速入门.pdf

    - **默认主题**:jQuery Mobile 提供了几种预设的主题样式,通过修改 `data-theme` 属性选择。 - **自定义主题**:可以使用 ThemeRoller 工具来自定义颜色、字体等样式,并导出对应的 CSS 文件。 - **图标与字体**:...

    jquery mobile datepicker 手机端日期选择器

    `jquery.mobile.datebox.min.css`是该插件的样式文件,包含预设的样式规则,确保日期选择器在不同主题下保持一致的视觉效果。开发者可以根据需求调整这些样式,以符合应用的整体风格。 `jquery-1.6.4.min.js`是...

    jquery mobile官方git资源

    1. **主题系统**:jQuery Mobile使用一套主题系统(ThemeRoller),通过CSS类定义页面元素的视觉样式。开发者可以根据需要自定义主题,确保应用的视觉一致性。 2. **数据属性和增强**:jQuery Mobile通过"data-...

    jQuery Mobile实战源码

    《jQuery Mobile实战》源码分析 jQuery Mobile 是一个流行的前端框架,专为移动设备设计,旨在简化移动Web应用的开发。这个源码包提供了一手的学习资料,让我们深入理解jQuery Mobile的工作原理及其在实际项目中的...

    jquery mobile 1.4.1版

    《jQuery Mobile 1.4.1版:移动开发的核心组件》 jQuery Mobile 是一个功能强大的前端框架,专门针对移动设备的网页开发而设计。在1.4.1版本中,它提供了一系列优化的CSS和JavaScript文件,使得开发者能够快速、...

    jQuery mobile滑动式的标题导航

    在这个“jQuery mobile滑动式的标题导航”主题中,我们将深入探讨如何利用jQuery Mobile创建动态且具有滑动效果的标题导航栏。 标题导航在任何应用程序中都扮演着关键角色,因为它帮助用户在页面间轻松导航。jQuery...

Global site tag (gtag.js) - Google Analytics