使用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 相关文章推荐
Javascript中自动切换焦点实现代码
Dec 15 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
vue使用过滤器格式化日期
Jan 20 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
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
js常用代码段整理
2011/11/30 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
幼儿园教师岗位职责
2014/03/17 职场文书
社区两委对照检查材料
2014/08/23 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
先进个人总结范文
2015/02/15 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
vue+spring boot实现校验码功能
2021/05/27 Vue.js
详解Vue slot插槽
2021/11/20 Vue.js
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python