主题样式综述 Theming overview
Jquery Mobile中每一个布局和组件都被设计为一个全新的面向对象的css框架,使我们能够给站点和应用程序适用完全统一的视觉设计主题。Jquery Mobile的主题样式系统与Jquery UI的ThemeRoller 系统很类似,但是做出了几点重要的改进.
--------------------------------------------------------------------------------
他使用的css3来显示圆角,文字和盒阴影和颜色渐变,而不是图片,使得主题文件非常轻量级,减轻了服务器的负担
--------------------------------------------------------------------------------
主体框架包含了几套颜色色板。每一套都包含了可以自由混搭和匹配的头部栏,body,按钮状态。用来构建视觉纹理,创建丰富的设计
--------------------------------------------------------------------------------
开放的主题框架允许你创建最多6套主题样式,给设计增加近乎无限的多样性
--------------------------------------------------------------------------------
一套简化的图标集,包含了移动设备上大部分需要使用的图标,并且sprite到一张图片里减少了图片大小
主题与色板 Themes & swatches
主题系统的关键在于把针对颜色与材质的规则,和针对布局结构的规则(例如padding和尺寸)的定义相分离。这使得主体的颜色和材质在样式表中只需要定义一次,就可以在站点中混合,匹配以及结合,得到广泛的使用?
--------------------------------------------------------------------------------
每一套主题样式包括几项全局设置,包括字体阴影,按钮和盒模型的圆角值。另外,主题也包括几套颜色色板,每一个都定义了工具栏,内容区块,按钮和列表项的颜色以及字体的阴影
--------------------------------------------------------------------------------
Jquery Mobile默认内建了5套主题样式,用(a,b,c,d,e)引用。为了使我们的颜色主题能够保持一直地映射到我们的组件中,我们遵从的规约是:a主题是视觉上最高级别的主题(黑色),b主题为次级用主题(蓝色),c主题为基准主题,在很多情况下是默认使用的,主题d为备用的次级内容用主题,主题e为强调用主题。你也可以手动添加主题用于强调,或者是特殊的场合。例如:你可以手动添加新的主题“i",用于制作红色的工具栏或者按钮,用于错误提示
--------------------------------------------------------------------------------
全新的ThemeRoller工具会在2011年 Jquery Mobile 1.0 release 版本时发布。在这之前,也很容易手动编辑默认的基准样式而且/或者编辑css文件增加主题:拷贝主题样式那一段css,将它用新的字母重命名,然后更换颜色
Bars
默认的主题包含了一下的5种bar的样
默认情况下,Jquery Mobile给所有的头部栏和尾部栏分配的是a主题,因为他们在应用中是视觉优先级最高的。如果要给bar设置一个不同的主题,只需要给头部栏和尾部栏容器增加 data-theme 属性,然后设定一个主题样式字母即可,例如b,d等? 更多参见工具栏主题样式
内容 Content Blocks
默认主题也包含了用于内容的颜色样式,使得在设计上与头部栏的颜色相匹配
如果没有特别指定的话,Jquery Mobile会默认给content分配主题c,使得在视觉上与头部栏区分开来
列表和按钮 Lists & Buttons
每一套主题也包含了针对交互元素,比如说列表项和按钮的默认样式
默认情况下,所有放置在一个bar里的按钮都会被自动分配一个和它所在的bar或者box的主题样式所匹配的主题,用以 在视觉上形成一个整体,像变色龙。
这样的默认行为可以使你很容易地通过设置父容器的主题样式改变整个页面的主题,因为你知道按钮在不同主题的视觉配重都是一样的。而因为表单元素用按钮的样式,他们也会适配他们的父容器
如果你要给按钮在视觉上进行强调,来帮助他从工具栏中凸现出来,可以给链接增加data-theme="a"属性。给按钮在标记中设置了不同的主题后,父容器主题更改时框架不会覆盖其颜色,因为你决定了要设置它
全局“活动”状态 Global "Active" state
Jquery Mobile框架用一个单独的主题叫做"active"(蓝色),用来总是指示被选中的状态,无视该组件的主题. 我们给导航与表单元素应用了这样的"活动"主题,不管是否有指示被选中的状态的需要。因为这一个主题样式是设计用来给用户清晰的,一致的反馈的,所以不能通过标记来覆盖,在主题中该项只要设置一次,,Jquery Mobile会在不管被选中或者活动状态需要时都应用他。该样式在样式表中的ui-btn-active规则来设置
“活动”状态用来给可切换的元素标记“on”状态
图标 Icons
Jquery Mobile包含了一套标准的图标,可以分配给按钮。为了尽量减小核心图标的文件大小,Jquery Mobile只包含了图标白色的图案,然后在图标背后自动添加了半透明的黑色圆形背景,使得图标在所有背景色下都可以看的明晰
- 大小: 11.5 KB
- 大小: 12.4 KB
- 大小: 30.4 KB
- 大小: 35.3 KB
- 大小: 19.7 KB
- 大小: 28.8 KB
- 大小: 2.5 KB
分享到:
相关推荐
本资源“WinRAR_Classic_48x36.theme.rar”正是为WinRAR量身打造的一款经典主题,旨在让用户体验到复古与实用并重的操作界面。 该主题包含了一系列精心设计的界面元素,旨在提升用户的操作体验和视觉享受。当你下载...
这个版本的版本号为4.2.6.1811,它包含了多种主题,其中"ext-theme-classic"是其中一个主要的主题。 "ext-theme-classic"是Ext JS中的经典主题,它提供了一种传统的、功能丰富的用户界面样式。这个主题设计得相当...
64x64.1_01.theme.rar" 是一个专为64位系统设计的WinRAR主题压缩包,它提供了定制化的界面,让用户的使用体验更加舒适。此版本的特别之处在于无广告,是收藏家们的宝贵资源。 首先,让我们关注压缩包内的各个文件...
《Packtpub Moodle 1.9 Theme Design Beginners Guide》是一本专为初学者设计的Moodle主题设计指南,由Packtpub出版社于2010年4月出版。这本书主要涵盖了如何为Moodle 1.9版本创建和定制教育平台的主题,以提升用户...
ef7d5c6 - Create README.md (evilbinary) 95f3a12 - first version (evilbinary) Todo 代码渲染基本功能。 [完成] 支持200多种语言。 [完成] 支持82种配色...
国人主题, iPhoto_3.0.6 主题简介:一款国人制作的有类似huaban.com瀑布流效果的图片主题。 主题功能: ... 6.如果想统计页面访问量,可以安装WP-PostViews插件,主题已经集成接口,无需后期调整;
标题“WinRAR_Jr_48x48.1_01.theme”表明这是一个与WinRAR相关的主题文件,特别地,它可能是一个自定义界面皮肤,用于改变WinRAR软件的视觉样式。48x48可能指的是图标尺寸,即48像素乘以48像素,这是一般小图标的...
而"eclipse、myeclipse经典主题配色theme.epf"是一个专门针对这两款IDE的主题配置文件,它允许用户自定义编辑器的颜色方案,以提升编程时的视觉体验和舒适度。 首先,我们要理解EPF文件的含义。EPF是"Eclipse ...
压缩包中的`Si4Theme.xml`文件就是Source Insight的主题配置文件。这个XML文件包含了所有上述提到的设置参数,用户可以通过导入这个文件到Source Insight中,轻松应用这个自定义的黑色主题。导入过程一般是在Source ...
"vs2008theme.zip" 是一个包含了14个不同主题的压缩包,为VS2008用户提供更丰富的界面风格选择。 1. **主题的概念与作用** - 主题是软件界面的一种视觉样式,它决定了窗口、按钮、文本等元素的颜色、字体和布局。...
6. **自定义编辑器体验**:除了预设的主题,用户还可以根据个人喜好调整主题的一些细节,如修改字体、调整颜色等。 7. **代码编辑器**:常见的支持主题更换的编辑器如Sublime Text、Visual Studio Code、Atom等,都...
要应用华为主题,首先你需要将下载的 "SourceInsight 4.0 Theme of huawei" 文件解压,然后在SourceInsight的设置中导入该主题文件。通常,这可以通过“工具” -> “选项” -> “颜色主题”来完成。导入后,你可以...
要安装这些主题,首先需要下载对应的.css文件或.zip文件(如catfish-master.zip或typora-see-yue-theme.zip)。解压.zip文件后,找到.css文件。然后在Typora中,选择“偏好设置”->“主题”,点击“打开主题文件夹”...
【主题与Theme格式详解】 在计算机领域,"主题"(Theme)通常指的是用户界面的视觉样式,包括颜色、字体、图标、布局等元素,用于改变软件或操作系统的整体外观。YLMF,全称为“易乐盟”,是一个知名的中文开源操作...
【SINGLE PROPERTY THEME V2.2】是一款专为房地产网站设计的WordPress主题,适用于展示单个房产项目。这款主题在2022年进行了更新,带来了全新的功能和优化,以满足现代网页设计的需求。以下是对这个主题及其相关...
- 解压缩`refind&minimal_theme`文件,里面通常包含`background.png`(背景图)、`bootimg.txt`(启动图像配置)、`icon-theme.conf`(主题配置文件)等。 - 将这些文件复制到rEFInd的主目录下,通常是`/Volumes/...
6. `Theme-Shield\css\icomoon.css`:这可能是另一套自定义图标库,可能包含一些与"Theme-Shield"主题相关的图标样式。 7. `Theme-Shield\css\main.css`:这是模板的主样式文件,包含特定于"Theme-Shield"的样式...
在使用Genymotion虚拟机时,有时可能会遇到“theme(win7X64)”相关的问题,这通常涉及到Genymotion运行环境与Windows 7 64位系统中的主题服务或组件不兼容。Genymotion是一款基于Oracle VirtualBox的高性能Android...
- **样式表文件**(如`styles.css`或`theme.scss`):包含自定义的Blazor应用样式,可能利用了上述的现代CSS技术。 - **图片资源**(如`.png`或`.svg`):用于应用的图标、背景或其他视觉元素。 - **字体文件**(如`...
6. **与插件兼容**:此主题与其他流行的IntelliJ IDEA插件兼容,如GitKraken、Lombok等,确保整体用户体验的一致性。 7. **一键切换**:用户可以轻松地在不同的Material Theme预设之间切换,无需重启IDE。 8. **...