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 插件 ...
随机推荐
- ohasd failed to start: Inappropriate ioctl for device
今天同事在安装GI的时候出现故障.让我帮忙看一下. 以下记录例如以下: 问题现象: 在安装gi的时候运行root.sh报例如以下错误: Finished running generic part of ...
- NodeJS 安装cnpm命令行工具错误问题解决
考虑问题从两个方面: 1.网速(网络太慢也是安装失败的一个原因) 2.系统用户权限(需要系统最开始使用的用管理员,新增的管理员安装会有问题) 报错问题记录于此: 实际上问题是:Windows_NT 6 ...
- android自定义View&&简单布局&&回调方法
一.内容描述 根据“慕课网”上的教程,实现一个自定义的View,且该View中使用自定义的属性,同时为该自定义的View定义点击事件的回调方法. 二.定义自定义的属性 在res/valus/ 文件夹下 ...
- 【C#】重载重写重构
前言 前几篇博客说了重写和重载.今天主要说重构,顺便比較一下三者. 重构.重写.重载 重构就是通过调整程序代码改善软件的质量.性能,使其程序的设计模式和架构更趋合理.提高软件的扩展性和维护性. 通俗点 ...
- MongoDB安装、CURD增改查删操作、应用场景
NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL".非关系型的数据存储 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 ...
- 解决:System.Data.SqlClient.SqlError: FILESTREAM 功能被禁用
还原 AdventureWorks Sample DataBase 时遇到 FILESTREAM feature is disabled 错误提示. FileStream是SQL Server 200 ...
- [容器]gcr.io镜像下载
下载gcr.io的镜像hosts文件 把下面两行加入到/etc/hosts中. 更多在这里http://wst.so/files/hosts 61.91.161.217 gcr.io 61.91.1 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- DataUml Design 教程3-模型与数据库同步
上一节我们已经建立好了数据模型,那么怎么让数据模型和数据库进行同步呢?模型同步到数据库非常简单,只需要模型绑定到数据库即可.DataUml Design目前支持和Oracle与MS Server数据库 ...
- Android Notification使用方法
1.http://www.cnblogs.com/plokmju/p/android_Notification.html 2.http://blog.csdn.net/vipzjyno1/articl ...