JQuery UI皮肤定制

http://jqueryui.com/themeroller/
进入此页面便可以定制自己的UI皮肤了 

如上图，在网页的左侧的tab栏上单击Gallery选项，便会在下方列出Jquery官方提供的皮肤，点击任意一套皮肤下面的Edit便会跳到Rool Your Own，在你选中的皮肤基础上便可定制出自己想要的皮肤，定制过程是所见即所得，所有用起来很方便，定制完后，点击Rool Your Own下方的Download theme跳到下载页面，


在下载页面右侧点击Download按钮就可以把皮肤下载到自己的机器上，在下载之前你可以选择下载1.7.2版的还是1.6版的，页面中还有其它选项，可以有选择的下载各个UI插件的皮肤样式，比如说Dialog、Tabls等，一般全选，不然就没意义了。下载后我们会得到一个jquery-ui-1.7.2.custom.zip压缩包，解压后，定制的皮肤文件在"下载文件夹\jquery-ui-1.7.2.custom\development-bundle\themes\custom-theme"文件夹下。

赞 (0)

相关推荐

  • JQuery给网页更换皮肤的方法

    本文实例讲述了JQuery给网页更换皮肤的方法.分享给大家供大家参考.具体分析如下: 为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!! 下面就演示如何简单的换肤 在设计HTmL代码时,注意一些小技巧,可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同,这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表,通过操作该链接的href属性的值,从而实现换肤.即: 用户点击完就可以换肤了,但是,当用户刷新或者关闭浏览器

  • ASP、PHP与javascript根据时段自动切换CSS皮肤的代码

    根据时间自动调整站点风格是不错的想法,这种根据时间自动调整站点风格也不是什么新鲜事,记得好久以前也见过类似的文章或方法,只不过当时没有特别注意.下面说一下它们的实现方法,目前网上有这样两种实现方法: 一.采用服务端的代码 ASP版本: <link rel="stylesheet" type="text/css" href=" <% if hour(now)<12 then response.write "morning.css&

  • Android应用开发中实现apk皮肤文件换肤的思路分析

    Android应用开发中实现apk皮肤文件换肤的思路分析

    在android的项目开发中,都会遇到后期功能拓展增强与主程序代码变更的现实矛盾,也就是程序的灵活度. 由于linux平台的安全机制,再加上dalvik的特殊机制,各种权限壁垒,使得开发一个灵活多变的程序,变得比较困难,不像pc平台下那么容易. 这里实际上可以借鉴传统软件中扩展程序的方法: 也就是插件的实现. 如目前所有的浏览器,比如我们使用的eclipse,以及很多优秀的软件,都使用了此种方式. 这样轻松实现了软件的功能扩展,而升级功能时只用更新对应插件, 而不是需要更新整个应用,降低了程序的

  • jQuery无刷新切换主题皮肤实例讲解

    jQuery无刷新切换主题皮肤实例讲解

    主题皮肤切换功能在很多网站和系统中应用,用户可以根据此功能设置自己喜欢的主题颜色风格,增强了用户体验.本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能. 实现该功能的原理就是通过点击定义的主题样式,改变页面当前引用的主题CSS文件,并且将当前的主题样式写入cookie中或者写入数据库中,以便下次该用户重新访问页面时,调用的就是上次设置好的主题样式. 准备主题皮肤样式 首先,我准备了三个样式表CSS文件,分别是三种风格的主题皮肤,将其引入页面,放置在页面的<head>之间. <

  • 一步一步实现iOS主题皮肤切换效果

    一步一步实现iOS主题皮肤切换效果

    本文实例为大家分享了iOS主题皮肤切换代码,供大家参考,具体内容如下 1. 主题皮肤功能切换介绍 主题切换就是根据用户设置不同的主题,来动态改变用户的界面,通常会改变navigationBar背景图片.tabBar背景图片.tabBar中的按钮的图片和选中的背景图片.navigationItem.title 标题的字体颜色.UI中其他元素控件 下载源代码地址: http://xiazai.jb51.net/201609/yuanma/ThemeSkinSetup(jb51.net).rar 2.

  • jQuery切换网页皮肤并保存到Cookie示例代码

    以下是源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>j

  • 仿墨迹天气在Android App中实现自定义zip皮肤更换

    仿墨迹天气在Android App中实现自定义zip皮肤更换

    在这里谈一下墨迹天气的换肤实现方式,不过首先声明我只是通过反编译以及参考了一些网上其他资料的方式推测出的换肤原理, 在这里只供参考. 若大家有更好的方式, 欢迎交流. 墨迹天气下载的皮肤就是一个zip格式的压缩包,在应用的时候把皮肤资源释放到墨迹天气应用的目录下,更换皮肤时新的皮肤资源会替换掉老的皮肤资源每次加载的时候就是从手机硬盘上读取图片,这些图片资源的命名和程序中的资源的命名保持一致,一旦找不到这些资源,可以选择到系统默认中查找.这种实现是直接读取了外部资源文件,在程序运行时通过代码显示的

  • python实现360皮肤按钮控件示例

    复制代码 代码如下: #!/usr/bin/python  #-*-coding:utf-8-*- from PyQt4.QtGui import *from PyQt4.QtCore import *from PyQt4.Qt import * class ChangeSkinWidget(QWidget): def __init__(self,parent = None):  super(ChangeSkinWidget,self).__init__(parent)  self.setFix

  • js仿百度切换皮肤功能（html+css）

    js仿百度切换皮肤功能（html+css）

    js仿百度切换皮肤效果:(换肤出来一个div,选择你想要的图片,作为网页背景,保存) 要点:cookie保存状态 html代码: <body> <div id="header"> <div id="header_con"> <div class="dbg"><a href="javascript:;" onclick="showImgBox()">

  • JQuery UI皮肤定制

    JQuery UI皮肤定制

    http://jqueryui.com/themeroller/进入此页面便可以定制自己的UI皮肤了  如上图,在网页的左侧的tab栏上单击Gallery选项,便会在下方列出Jquery官方提供的皮肤,点击任意一套皮肤下面的Edit便会跳到Rool Your Own,在你选中的皮肤基础上便可定制出自己想要的皮肤,定制过程是所见即所得,所有用起来很方便,定制完后,点击Rool Your Own下方的Download theme跳到下载页面, 在下载页面右侧点击Download按钮就可以把皮肤下载到

  • jQuery UI结合Ajax创建可定制的Web界面

    如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

  • 基于jquery ui的alert,confirm方案（支持换肤）

    实现功能: 1.修改标题样式.把jquery ui的标题样式放上去.支持换肤. 2.修改按钮样式,换成jqueryui的button按钮样式. 3.将模式化窗口的背景换成了jqueryui的模式化背景. 代码: //首先要引入jquery,以及ui的包和皮肤的样式如: <script src="../js/ui/jquery-1.11.0.min.js"></script> <script src="../js/ui/jquery-migrate

  • 使用jQuery UI库开发Web界面的简单入门指引

    一．jQuery UI jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库.包 含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很 好交互性的web 应用程序. jQuery UI 的官网网站为:http://jqueryui.com/ jquery-ui-x.xx.x.custom.zip .里面目录结构如下: 1.css,包含与jQuery UI 相关的CSS 文件: 2.js,包含jQuery UI 相关的JavaScri

  • jquery.ui.progressbar 中文文档

    复制代码 代码如下: <?xml version="1.0" encoding="UTF-8" ?> <!-- 注意事项: 1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议 2. 格式中的所有项都是选填, 如果没有, 不写就是了. 3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]> 4. 翻译过程中, 一块对

  • jQuery dataTables与jQuery UI 对话框dialog的使用教程

    jQuery dataTables与jQuery UI 对话框dialog的使用教程

    首先介绍下这两个插件功能 1.DataTables是一个jQuery的表格插件. 官方网站及其下载地址:http:/www.datatables.net 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 2.对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript的aler

  • jQuery UI工具提示框部件Tooltip Widget

    jQuery UI工具提示框部件Tooltip Widget

    可自定义的.可主题化的工具提示框,替代原生的工具提示框. 一.实例 使用带有 title 属性的所有元素的事件代理,在文档上创建一个工具提示框(Tooltip). 代码: <p> <a href="#" rel="external nofollow" title="锚描述">锚文本</a> <input title="输入帮助"> </p> <script>

  • jQuery UI Grid 模态框中的表格实例代码

    jQuery UI Grid 模态框中的表格实例代码

    在弹出的模态框中使用表格. 在某些情况下,特别是 bootstrap modal,可能会出现表格渲染宽度过小或有时显示不完全.会误认为是由于 bootstrap modal 的动画渲染导致表格渲染时的可用空间不如预期.可以通过调用handleWindowResize来纠正.动画渲染的时间不好确定,所以一般推荐使用$interval,在模态框打开后的5秒内每隔500ms循环调用. 从某种意义上说,这类似于自动调整大小的功能,但它只在模态框开启后的短时间内完成. 代码: index.html <!d

  • jQuery UI Autocomplete 体验分享

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: 复制代码 代码如下: ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: 复制代码 代码如下: [{label: "博客园", value: "cnblogs"}, {label: &qu

  • jQuery UI Draggable + Sortable 结合使用(实例讲解)

    jQuery UI Draggable + Sortable 结合使用(实例讲解)

    工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了, Demo截图:从左边控件拖到右边区域 代码段: <script type="text/javascript"> $(function () { $("#box_wrap1,#box_wrap2").sortable({ connectWith: ".box_wrap", helper: "cl

随机推荐