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


Posted in Javascript onApril 22, 2016

一.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 相关的JavaScript 文件;
3.Development-bundle,包含多个不同的子目录:demos(jQuery UI 示例文件)、docs(jQuery
UI 的文档文件)、themes(CSS 主题文件)和ui(jQuery ui 的JavaScript 文件)。
4.Index.html,可以查看jQuery UI 功能的索引页。

二.CSS 主题
CSS 主题就是jQuery UI 的皮肤,有各种色调的模版提供使用。对于程序员,可以使用
最和网站符合的模版;对于美工,也提供了没有任何样式的模版基于设计。
可以在这里:http://jqueryui.com/themeroller/  查看已有模版样式。

三.  简单引入
由于jQuery UI 不同组件的引入都有类似的特点和语法,所以这里只介绍两种组件
的引入方式,这样可以以此类推其他组件的引入方式。
button 按钮

//将button 按钮设置成UI 
$('#button').button();

dialog 对话框

//将div 设置成dialog 对话框 
$('#dialog ').click(function () { 
 
  $("#dialog ").dialog(); 
 
});

这样的形式,可以得知,jQuery UI的引入都是这样的  组件名() 方法的形式引入。

Javascript 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
jQuery 监控键盘一段时间没输入
Apr 22 #Javascript
基于jquery实现轮播特效
Apr 22 #Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
JS简单循环遍历json数组的方法
Apr 22 #Javascript
JavaScript中数组去除重复的三种方法
Apr 22 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python闭包函数定义与用法分析
2018/07/20 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python3实现二叉树的最大深度
2019/09/30 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
一份婚庆公司创业计划书
2014/01/11 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
消防安全培训工作总结
2015/10/23 职场文书