JQuery UI 入门
2024-09-04 14:21:13
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()
参考资料
最新文章
- 探索ASP.NET MVC5系列之~~~6.Session篇(进程外Session)
- V4L2框架分析学习二
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
- Java Integer(-128~127)值的==和equals比较产生的思考
- Arduino示例教程超声波测距实验
- 今天<;人人都能弹吉他>;免费版获得了苹果的新品推荐
- JQuery的ajax登录案例
- BZOJ 1486 最小圈
- Android开发之AIDL的使用一--跨应用启动Service
- android的项目文件介绍
- JavaWeb_Day10_学习笔记1_response(3、4、5、6、7、8、9)发送状态码、响应、重定向、定时刷新、禁用浏览器缓存、响应字节数据、快捷重定向方法、完成防盗链
- C# 杨辉三角形算法
- NLP︱LDA主题模型的应用难题、使用心得及从多元统计角度剖析
- 【转】vmware 安装 osx 无法登录 appstore 的解决办法 (伪造smbios设备信息)
- 性能优化7--App瘦身
- hdu 4034
- ubuntu解压rar文件
- Ubuntu下安装BeautifulSoup4
- 常用OS获取信息命令
- excel绝对引用中间添加符号
热门文章
- web.py学习遇到的问题
- [原创]如何让freeswitch转发客户端自定义的INFO消息
- 解决:System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用
- jquery,js,checkbox多选框复选框取值和赋值
- UVA 11014 - Make a Crystal(容斥原理)
- 常用的Http组件
- 谱聚类python实践
- java-FileDemo
- neocomplcache 自动补全
- javascript 最佳实践 ( 24 章 )