jQuery_Mobile入门教程_提升篇.docx

个人收藏：/filod/archive/2011/08/21/2147960.htmljQuery Mobile入门教程——主题的使用和定制原作：/devnet/dreamweaver/articles/theme-control-jquery-mobile.htmlUsing and customizing jQuery Mobile themes —— /devnet/author_bios/matthew_david.htmlMatthew David翻译：/filod转载声明：请注明原作者、翻译者以及译文链接。在之前的文章/jquerymobile-2/295.htmljQuery Mobile 入门教程里，我对jQueryMobile的使用进行了入门介绍，你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。然而仅仅是这样的话，你的需求肯定不会被满足的——你或许需要给header换个颜色来配合自己公司的logo？又或者需要突出显示一下某个静音按钮？总而言之，你需要自己控制jQueryMobile的显示效果。本文旨在介绍教大家如何在jQueryMobile构建的站点中控制主题显示的效果。jQueryMobile的主题（theme）和调板（swatches）很显然，jQueryMobile是用CSS来控制在屏幕中的显示效果的，而在CSS文档中又包含两个主要的部分：结构：用于控制元素（如按钮、tab等）的在屏幕中显示的位置，内外边距等。 主题：用于控制可视元素的视觉效果，例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素（如按钮）的效果。 注意：为了尽量减少图片的使用（目的是减少请求数），jQueryMobile使用了css3的方式来替代传统的图片方式创建按钮等控件。当然用图片来设计也可以，但这并不是推荐的。jQueryMobile中的每一个主题都可以包含一个或多个调板。调板主要用于设置工具栏、页面区块、按钮和列表的颜色。调板可以很方便的切换主题中的配色方案。调板的设计思想是为了快速的切换已有网站的主题，在你使用默认主题的时候，可能偶尔需要更改某一些按钮的颜色来表示强调（如“试一试”按钮）或者弱化（如“不关注”按钮），这时便可以定义特定调板来完成。jQueryMobile默认的CSS文件中包含五个调板（a、b、c、d、e），按照惯例，a是优先级最高的调板，默认为黑色（如下图）：以下是默认主题所规定的五种调板和其含义：a：最高优先级，黑色 b：优先级次之，蓝色 c：基准优先级，灰色 d：可选优先级，灰白色 e：表示强调，黄色 如何使用默认调板jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性，将默认采用a调板。以下代码定义了一个采用默认调板的页面：div data-role=page id=page div data-role=header h1Sample Page/h1 /div div data-role=content pIm a sample page!/p /div/div　使用不同的调板：div data-role=page id=page data-theme=e div data-role=header h1Sample Page/h1 /div div data-role=content pIm a sample page!/p /div/div　从代码结构上看是一样的，仅仅使用一个data-theme=e便可以将整个页面切换为黄色色调：默认情况下页面上所有的控件都会继承page上设置的调板，这意味着你只需设置一次便可以更改整个page：div data-role=page id=page data-theme=e　当然你也可以独立设置不同元素的调板，同样设置元素的data-theme属性来实现：div data-role=page id=page div data-role=header data-theme=c h1Header/h1 /div div data-role=content data-theme=d pContent/p pnbsp; /p ul data-role=listview data-theme=b lia href=#page1Page 1/a/li /ul div data-role=collapsible-set div data-role=collapsible data-theme=b h3Header/h3 pContent/p /div div data-role=collapsible data-collapsed=true data-theme=a