jQuery技术

使用 jQuery UI 主题(3)

字号+ 作者:H5之家 来源:H5之家 2015-10-05 19:00 我要评论( )

单击选项时,您会注意到一些与这些主题的构造有关的有趣现象。例如,jQuery UI 主题使用了纹理。要使用这些内容,请单击 ThemeRoller 中的 Header/Toolbar 区域,然后单击中间的 colored 按钮。此时将会显示一个下

单击选项时,您会注意到一些与这些主题的构造有关的有趣现象。例如,jQuery UI 主题使用了纹理。要使用这些内容,请单击 ThemeRoller 中的 Header/Toolbar 区域,然后单击中间的 colored 按钮。此时将会显示一个下拉列表,其中包含可以选择的图案。所选纹理将与您选择的背景颜色融合在一起,生成标题和工具栏使用的图案。这只是纹理的一种用法。jQuery UI 主题中到处都使用了纹理。例如,如果修改 "Clickable: default state" 中的纹理,就会看到这些修改对所选主题中按钮产生的影响。

jQuery UI 主题的一个有趣特性是利用了突出显示和色差(也称为视觉线索)。ThemeRoller 可以完全控制这些视觉线索呈现在用户面前的效果。纹理、背景颜色、提纲边角、文本颜色,甚至包括图标颜色(如果线索中显示图标)都可以修改。这些样式的名称均显示在 ThemeRoller 中,因此只要在自己的网站中使用这些名称,便可根据需要将这些样式应用于显示给用户看的文本。

修改各种设置均会改变浏览器中的 URL。清单 6 提供了一个 URL 作为示例。

清单 6. ThemeRoller URL 样例

#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif& fwDefault=bold&fsDefault=1.1em&cornerRadius=8px& bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png& bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff& iconColorHeader=fadc7a&bgColorContent=feeebd& bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100& borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405& bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png& bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000& iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_wave.png &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00& iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.png& bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7& iconColorActive=eb990f&bgColorHighlight=f5d361& bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100& borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26& bgColorError=d34d17&bgTextureError=07_diagonals_medium.png& bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff& iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png& bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc& bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60& thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px& cornerRadiusShadow=8px

保存并稍后恢复这个 URL,以便回过头来进一步修改设置。例如,完成修改后复制 URL,并将其粘贴到某个地方安全保存。现在,关闭浏览器(或包含 ThemeRoller 网站的浏览器选项卡),并使用复制的 URL 重新打开它。您可以看到,所有的修改都将恢复,为进一步修改做好准备。

结束语

关于 jQuery UI 的内部构件还有很多内容可供讨论,但在开始使用 jQuery UI 主题之前,应该掌握一些必要的基础知识。您已经了解了文件夹和文件的结构,它们允许您修改一个主题。您可以查看或使用这些文件,以此作为起点,在需要的时候创建自己的主题。

本文还介绍了 ThemeRoller 和相关的网站页面,支持修改现有主题或从头创建新主题。最后,您可了解在 ThemeRoller 网站上保存和恢复主题修改的过程。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评