学习笔记：jqueryui
Jquery UI
cdn.bootcss.com
<!-- jquery -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- jquery ui -->
<link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>
code.jquery.com
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery ui -->
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src=" http://code.jquery.com/ui/1.11.4/jquery-ui.min.js "></script>
</head>
<body>
</body>
</html>
Themes:
<link href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">black-tie 黑领带
<link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">blitzer 闪电人
<link href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet">cupertino 苹果
<link href="http://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" rel="stylesheet">dark-hive 黑暗的蜂巢
<link href="http://code.jquery.com/ui/1.11.4/themes/dot-luv/jquery-ui.css" rel="stylesheet">dot-luv 点爱
<link href="http://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css" rel="stylesheet">eggplant 茄子
<link href="http://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css" rel="stylesheet">excite-bike 越野摩托
<link href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet">flick 轻弹
<link href="http://code.jquery.com/ui/1.11.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">hot-sneaks 热时
<link href="http://code.jquery.com/ui/1.11.4/themes/humanity/jquery-ui.css" rel="stylesheet">humanity 人类
<link href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" rel="stylesheet">le-frog 乐蛙
<link href="http://code.jquery.com/ui/1.11.4/themes/mint-choc/jquery-ui.css" rel="stylesheet">mint-choc 薄荷巧克力
<link href="http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet">overcast 阴
<link href="http://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" rel="stylesheet">pepper-grinder 胡椒研磨器
<link href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet">redmond 雷蒙德
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">smoothness 平滑
<link href="http://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css" rel="stylesheet">south-street 南大街
<link href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" rel="stylesheet">start 开始
<link href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" rel="stylesheet">sunny 阳光
<link href="http://code.jquery.com/ui/1.11.4/themes/swanky-purse/jquery-ui.css" rel="stylesheet">swanky-purse 时髦的钱包
<link href="http://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet">trontastic 前..
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet">ui-darkness UI-黑暗
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">ui-lightness UI-光亮
<link href="http://code.jquery.com/ui/1.11.4/themes/vader/jquery-ui.css" rel="stylesheet">vader 维达
自动完成：
<script>
$(function() {
var availableTags=["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
//var availableTags=["北京","上海","南京","广东","广西","山东","山西","湖南","湖北","河南","河北","江西"];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
<div class="ui-widget">
<label for="tags">标签：</label>
<input id="tags">
</div>
折叠面板：
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3>部分 1</h3>
<div>
<p>啊啊啊</p>
</div>
<h3>部分 2</h3>
<div>
<p>啊啊啊</p>
</div>
<h3>部分 3</h3>
<div>
<p>
啊啊啊
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>部分 4</h3>
<div>
<p>啊啊啊</p>
<p>啊啊啊</p>
</div>
</div>
缩放：
<style>
#resizable{width:150px;height:150px;padding:0.5em;}
#resizableh3{text-align:center;margin:0;}
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">缩放（Resizable）</h3>
</div>
排序：
<style>
#sortable{list-style-type:none;margin:0;padding:0;width:60%;}
#sortable li{ margin:0 3px 3px 3px;padding:0.4em 0.4em 0.4em 1.5em;font-size:1.4em;height:18px;}
#sortable li span {position: absolute;margin-left: -1.3em;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
拖动-放置：
<style>
#draggable{width:100px;height:100px;padding:0.5em;float:left;margin: 10px 10px 10px 0; }
#droppable{width:150px;height:150px;padding:0.5em;float:left;margin:10px;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" ).html( "Dropped!" );
}
});
});
</script>
<div id="draggable" class="ui-widget-content">请把我拖拽到目标处！</div>
<div id="droppable" class="ui-widget-header">请放置在这里！</div>
拖动：
<style>
#draggable{width:150px;height:150px;padding:0.5em;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
<div id="draggable" class="ui-widget-content">请拖动我</div>
特效：
blind 盲
bounce 反弹
clip 夹
drop 滴
explode 爆炸（炸成9块）
fade 褪色
fold 折叠
highlight 突出
puff 泡芙
pulsate 脉动
scale 规模
shake 摇
size 大小
slide 幻灯片(从左到右出来)
transfer 转移
<script>
$("#toggle").click(function() {
$( "#toggle" ).toggle( "explode" );
});
</script>
<style>
#toggle{width:300px;height:300px;background:#ccc;}
</style>
<div id="toggle">点这里</div>
待补充
学习笔记：jqueryui的更多相关文章
- HTML 学习笔记 JQueryUI（Interactions,Widgets）
Draggable 允许使用鼠标移动元素(拖动) demo <html> <head> <meta charset="UTF-8" ...
- 20151215jquery学习笔记--jqueryUI --dialog（对话框）
对话框(dialog),是 jQuery UI 非常重要的一个功能.它彻底的代替了 JavaScript 的 alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余 一．开启多个 di ...
- FullCalendar 的学习笔记（一）
前一段时间,一个老项目需要新增一个小功能,日程表~ 于是网上找了下,发现FullCalendar这个控件还不错于是就拿来用了下,下面简单介绍下我的学习笔记. 首先就是了解下FullCalendar的A ...
- jeecms学习笔记
jeecms学习笔记 内容管理系统 1.栏目列表标签 作用:获取栏目的列表 [@cms_channel_list] [#list tag_list as b] <a href="${b ...
- web前端学习（二）html学习笔记部分（11）-- 没有标号记录的知识合集
这一部分内容相对比较简单,就不按规矩排序了.(主要是网站上也没有这一部分内容的排序) 1. html5的 非主体结构元素 学习笔记(1)里面记录过. 2. html5表单提交和PHP环境搭建 1. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- char与char的区别
char与varchar的区别 : char (13)长度固定, 如'www.qq.net' 存储需要空间 12个字符: varchar(13) 可变长 如'www.qq.net' 需要存储空间 9字 ...
- 数组的高级API-sort
按升降序排列数组项.本身存在的问题:只能通过第一位排列.解决方法:通过回调函数进行规制设置. a - b 升序. b - a 降续. 其内部运用了冒泡排序 <!DOCTYPE html> ...
- nginx——控制 Nginx 并发连接数
1. 限制单个 IP 的并发连接数 .... http { include mime.types; default_type application/octet-stream; sendfile on ...
- seajs引入jquery框架问题
seajs引入jquery框架时出现的问题 原因:由于seajs是遵循cmd规范,而jquery是遵循amd规范,所以在seajs调用jquery框架时,需要将amd转换为cmd 转换方法:jquer ...
- ieee trans pami latex模板
https://www.computer.org/cms/Computer.org/transactions/templates/ https://www.computer.org/web/tpami ...
- 移动端IOS 固定下方的输入框，点击输入框位置会变的修复
if(data=="ios"){ var _this = $(".publish"); //无键盘时输入框到浏览器窗口顶部距离 var noInputViewH ...
- ubuntu16.04下配置apache2与php
系统版本:ubuntu16.04 命令均在终端中输入,用浏览器测试 //安装apache2命令 sudo apt install apache2 //测试是否安装成功 浏览器地址栏输入“localho ...
- 虚拟机环境配置(Docker)
安装虚拟机完毕后 在linux虚拟机上安装docker 使用远程工具连接虚拟机,查看ip地址 ip addr Docker常用命令&操作 1).镜像操作 | 操作 | 命令 | 说明 | | ...
- 1.2.4 Excel快速建立n个文件夹
1.准备员工信息表,选中名字 2.[设置单元格格式]>[数字]>[自定义]>右侧的[类型]>输入”md ”@>单击[确定] 3.确定后在姓名前会出现md,新建文本文档,将 ...
- py-day3 python 全局变量和局部变量
# 全局变量 如果函数的内容无 global关键字,优先读取全局变量,无法对全局变量重新赋值, name = 'mj' def change_name(): print('change_name',n ...