Dreamweaver CC第6章 移动设备网页.ppt

6.1.4 关于jQuery Mobile主题 6.1 使用jQuery Mobile组件 jQuery Mobile提供了从“a”到“e”5种不同的样式主题，每种主题带有不同颜色的按钮、栏、内容块等。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 6.1.4 关于jQuery Mobile主题 6.1 使用jQuery Mobile组件 主题化的对话框，参考代码如下： a href=#pagetwo data-rel=dialogGo 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=aButton/a a href=# data-role=button data-theme=bButton/a a href=# data-role=button data-theme=cButton/a 6.1.4 关于jQuery Mobile主题 6.1 使用jQuery Mobile组件 主题化的图标，参考代码如下： a href=# data-role=button data-icon=plus data-theme=ePlus /a 页眉和页脚中的主题化按钮，参考代码如下： div data-role=header a href=# data-role=button data-icon=home data-theme=bHome /a h1Welcome To My Homepage/h1 a href=# data-role=button data-icon=search data-theme=e Search/a /div 6.1.4 关于jQuery Mobile主题 6.1 使用jQuery Mobile组件 主题化的导航栏，参考代码如下： div data-role=footer a href=# data-role=button data-theme=b data-icon=plusButton1/a a href=# data-role=button data-theme=c data-icon=plus Button2/a a href=# data-role=button data-theme=e data-icon=plus Button3/a /div div data-role=footer data-theme=e h1Insert Footer Text Here/h1 div data-role=navbar ul lia href=# data-icon=home data-theme=bButton 1/a/li lia href=# data-icon=arrow-rButton 2/a/li lia href=# data-icon=arrow-rButton 3/a/li lia href=# data-icon=search data-theme=a Button 4/a /li /ul /div /div 6.1.4 关于jQuery Mobile主题 6.1 使用