使用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之二(接口实现介绍)
Jan 27 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
详解js的视频和音频采集
Aug 09 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 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
php中创建和调用webservice接口示例
2014/07/25 PHP
Laravel下生成验证码的类
2017/11/15 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
个人债务授权委托书范本
2014/10/05 职场文书
2014年党小组工作总结
2014/12/20 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python