使用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 函数中的参数使用分析
Mar 27 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
初识php MVC
2014/09/10 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
JS跨域问题详解
2014/11/25 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python 公共方法汇总解析
2019/09/16 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python实现手势识别
2020/10/21 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
新员工入职感言
2014/02/01 职场文书
公司董事长岗位职责
2014/06/08 职场文书
教师求职信怎么写
2015/03/20 职场文书
redis数据结构之压缩列表
2022/03/21 Redis