JQuery UI 入门
1. JQuery UI 概述
1.1 JQuery UI 主要分为三部分:
- 交互部件(interactions):是一些与鼠标交互相关的内容;
- 小部件(widgets): 主要是一些页面的扩展;
- 效果库(effects):用于提供丰富的动画效果;
2. 交互部件
// index.html
<head>
<script src="jquery-3.2.1.min.js"></script> //必须第一个被引入,因为 UI 依赖 jquery 库
<script src="jquery-ui.min.js"></script>
<script src="app.js"></script>
<link text="text/css" href="jquery-ui.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#" id="btn">点击这里</a>
<div style="width:100px;height:100px;border:2px solid #FF0000" id="div1"></div>
<div style="width:300px;height:300px;border:2px solid #FF0000" id="div2"></div>
<ul id="st">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>山竹</li>
</ul>
</body>
// app.js
$(document).ready(function(){
// 按钮效果
$("#btn").button();
// div 拖动效果
$("#div1").draggable();
// div 里面能放 div
$("#div2").droppable();
// div 尺寸可以任意改变
$("#div1").resizable();
// 可以对列表中的两个值通过鼠标拖动,互换位置
$("#st").sortable();
})
3. 小部件
accordion()
:可折叠显示;autocoplete()
: 自动补全;datepicker()
: 日期选择;dialog()
:对话框;progressbar()
: 进度条;menu()
:菜单;slider()
:可拖动进度条;spinner()
:下拉列表;tabs()
参考资料
JQuery UI 入门的更多相关文章
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI入门
jQuery UI是jQuery的一个插件集,为jQuery的核心库添加了新的功能. jQUery UI库可以从http://jquery.com下载. 下载一个ZIP文件jquery-ui-1.9. ...
- jQuery UI 之 Bootstrap 快速入门
转载自(http://www.shouce.ren/example/show/s/6444) 1. 下载 这个页面是用来展示 jQuery UI Bootstrap 项目的 -- 我们将 Bootst ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 《jQuery UI开发指南》勘误收集
此书由罗晴明 (http://weibo.com/sunnylqm)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.c ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery UI框架
jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架( ...
- 第一百九十一节,jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
随机推荐
- WP8滑动条(Slider)控件的使用
1. <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinit ...
- js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
代码如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audio ...
- javascript跨浏览器事件对象类库
一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...
- VS2017调试MVC程序,中文输入法下浏览器闪退,程序调试终止
工具->选项-> 项目和解决方案->Web项目->浏览器窗口关闭时停止调试器(s) 复选√ 去掉即可,
- html块级元素与内联元素的区别
1. 块级元素(block element): 概念理解:如果不用css控制,块级元素在文档流中以一行显示,及它所占的宽度为其父级元素所占的宽度,若超过宽度会重新另起一行显示,高度会随着内容高度的增 ...
- Ocelot + IdentityServer4 坑自己
现像是 connect/userinfo 可以访问 但是api都提示401 后面发现是在appsettings.json "Options": {"Authority&q ...
- Linux 文件管理(C语言库函数三)
找到当前目录 char *getcwd(char * buf,size_t size) getcwd函数把当前工作目录的绝对路径名复制到buf中,size指示buf的大小 如果buf不够大,不能装下整 ...
- Eclipse 重启选项
重启 Eclipse 重启选项允许用户重启 Eclipse. 我们可以通过点击 File 菜单选择 Restart 菜单项来重启 Eclipse. 在安装插件后,用户一般都会被提醒要重启 Eclips ...
- Eclipse 运行配置(Run Configuration)
Eclipse 运行配置(Run Configuration) 创建和使用 Eclipse 运行配置 在运行配置(Run Configuration)对话框中可以创建多个运行配置.每个配置可以在应用中 ...
- Codeforces Round #398 (Div. 2) BCD
B:The Queue 题目大意:你要去办签证,那里上班时间是[s,t), 你知道那一天有n个人会来办签证,他们分别是在时间点ai来的.每个人办业务要花相同的时间x,问你什么时候来 排队等待的时间最少 ...