Jquery UI

cdn.bootcss.com

  1. <!-- jquery -->
  2. <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  3. <!-- jquery ui -->
  4. <link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet">
  5. <script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>

code.jquery.com

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <!-- jquery -->
  7. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  8. <!-- jquery ui -->
  9. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
  10. <script src=" http://code.jquery.com/ui/1.11.4/jquery-ui.min.js "></script>
  11. </head>
  12. <body>
  13. </body>
  14. </html>
  1. Themes:
  2. <link href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">black-tie    黑领带
  3. <link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">blitzer    闪电人
  4. <link href="http://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css" rel="stylesheet">cupertino    苹果
  5. <link href="http://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" rel="stylesheet">dark-hive    黑暗的蜂巢
  6. <link href="http://code.jquery.com/ui/1.11.4/themes/dot-luv/jquery-ui.css" rel="stylesheet">dot-luv    点爱
  7. <link href="http://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css" rel="stylesheet">eggplant    茄子
  8. <link href="http://code.jquery.com/ui/1.11.4/themes/excite-bike/jquery-ui.css" rel="stylesheet">excite-bike  越野摩托
  9. <link href="http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" rel="stylesheet">flick    轻弹
  10. <link href="http://code.jquery.com/ui/1.11.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">hot-sneaks    热时
  11. <link href="http://code.jquery.com/ui/1.11.4/themes/humanity/jquery-ui.css" rel="stylesheet">humanity    人类
  12. <link href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" rel="stylesheet">le-frog    乐蛙
  13. <link href="http://code.jquery.com/ui/1.11.4/themes/mint-choc/jquery-ui.css" rel="stylesheet">mint-choc    薄荷巧克力
  14. <link href="http://code.jquery.com/ui/1.11.4/themes/overcast/jquery-ui.css" rel="stylesheet">overcast    阴
  15. <link href="http://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" rel="stylesheet">pepper-grinder    胡椒研磨器
  16. <link href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet">redmond    雷蒙德
  17. <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">smoothness    平滑
  18. <link href="http://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css" rel="stylesheet">south-street    南大街
  19. <link href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" rel="stylesheet">start    开始
  20. <link href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css" rel="stylesheet">sunny    阳光
  21. <link href="http://code.jquery.com/ui/1.11.4/themes/swanky-purse/jquery-ui.css" rel="stylesheet">swanky-purse    时髦的钱包
  22. <link href="http://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet">trontastic    前..
  23. <link href="http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet">ui-darkness    UI-黑暗
  24. <link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">ui-lightness    UI-光亮
  25. <link href="http://code.jquery.com/ui/1.11.4/themes/vader/jquery-ui.css" rel="stylesheet">vader    维达

自动完成：

  1. <script>
  2. $(function() {
  3.     var availableTags=["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
  4.     //var availableTags=["北京","上海","南京","广东","广西","山东","山西","湖南","湖北","河南","河北","江西"];
  5.     $( "#tags" ).autocomplete({
  6.         source: availableTags
  7.     });
  8. });
  9. </script>
  10. <div class="ui-widget">
  11.   <label for="tags">标签：</label>
  12.   <input id="tags">
  13. </div>

折叠面板：

  1. <script>
  2. $(function() {
  3.     $( "#accordion" ).accordion();
  4. });
  5. </script>
  6. <div id="accordion">
  7.   <h3>部分 1</h3>
  8.   <div>
  9.     <p>啊啊啊</p>
  10.   </div>
  11.   <h3>部分 2</h3>
  12.   <div>
  13.     <p>啊啊啊</p>
  14.   </div>
  15.   <h3>部分 3</h3>
  16.   <div>
  17.     <p>
  18.     啊啊啊
  19.     </p>
  20.     <ul>
  21.       <li>List item one</li>
  22.       <li>List item two</li>
  23.       <li>List item three</li>
  24.     </ul>
  25.   </div>
  26.   <h3>部分 4</h3>
  27.   <div>
  28.     <p>啊啊啊</p>
  29.     <p>啊啊啊</p>
  30.   </div>
  31. </div>

缩放：

  1. <style>
  2. #resizable{width:150px;height:150px;padding:0.5em;}
  3. #resizableh3{text-align:center;margin:0;}
  4. </style>
  5. <script>
  6. $(function() {
  7.     $( "#resizable" ).resizable();
  8. });
  9. </script>
  10. <div id="resizable" class="ui-widget-content">
  11.   <h3 class="ui-widget-header">缩放（Resizable）</h3>
  12. </div>

排序：

  1. <style>
  2. #sortable{list-style-type:none;margin:0;padding:0;width:60%;}
  3. #sortable li{ margin:0 3px 3px 3px;padding:0.4em 0.4em 0.4em 1.5em;font-size:1.4em;height:18px;}
  4. #sortable li span {position: absolute;margin-left: -1.3em;}
  5. </style>
  6. <script>
  7. $(function() {
  8.     $( "#sortable" ).sortable();
  9.     $( "#sortable" ).disableSelection();
  10. });
  11. </script>
  12. <ul id="sortable">
  13. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  14. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  15. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  16. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  17. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  18. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  19. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  20. </ul>

拖动-放置：

  1. <style>
  2. #draggable{width:100px;height:100px;padding:0.5em;float:left;margin: 10px 10px 10px 0; }
  3. #droppable{width:150px;height:150px;padding:0.5em;float:left;margin:10px;}
  4. </style>
  5. <script>
  6. $(function() {
  7.     $( "#draggable" ).draggable();
  8.     $( "#droppable" ).droppable({
  9.       drop: function( event, ui ) {
  10.         $( this ).addClass( "ui-state-highlight" ).html( "Dropped!" );
  11.       }
  12.     });
  13. });
  14. </script>
  15. <div id="draggable" class="ui-widget-content">请把我拖拽到目标处！</div>
  16. <div id="droppable" class="ui-widget-header">请放置在这里！</div>

拖动：

  1. <style>
  2. #draggable{width:150px;height:150px;padding:0.5em;}
  3. </style>
  4. <script>
  5. $(function() {
  6.     $( "#draggable" ).draggable();
  7. });
  8. </script>
  9. <div id="draggable" class="ui-widget-content">请拖动我</div>

特效：

blind 盲
bounce 反弹
clip 夹
drop 滴
explode 爆炸（炸成9块）
fade 褪色
fold 折叠
highlight 突出
puff 泡芙
pulsate 脉动
scale 规模
shake 摇
size 大小
slide 幻灯片(从左到右出来)
transfer 转移

  1. <script>
  2. $("#toggle").click(function() {
  3.   $( "#toggle" ).toggle( "explode" );
  4. });
  5. </script>
  6. <style>
  7. #toggle{width:300px;height:300px;background:#ccc;}
  8. </style>
  9. <div id="toggle">点这里</div>

待补充

学习笔记：jqueryui的更多相关文章

  1. HTML 学习笔记 JQueryUI（Interactions,Widgets）

    Draggable 允许使用鼠标移动元素(拖动) demo <html>    <head>        <meta charset="UTF-8" ...

  2. 20151215jquery学习笔记--jqueryUI --dialog（对话框）

    对话框(dialog),是 jQuery UI 非常重要的一个功能.它彻底的代替了 JavaScript 的 alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余 一．开启多个 di ...

  3. FullCalendar 的学习笔记（一）

    前一段时间,一个老项目需要新增一个小功能,日程表~ 于是网上找了下,发现FullCalendar这个控件还不错于是就拿来用了下,下面简单介绍下我的学习笔记. 首先就是了解下FullCalendar的A ...

  4. jeecms学习笔记

    jeecms学习笔记 内容管理系统 1.栏目列表标签 作用:获取栏目的列表 [@cms_channel_list] [#list tag_list as b] <a href="${b ...

  5. web前端学习（二）html学习笔记部分（11）-- 没有标号记录的知识合集

    这一部分内容相对比较简单,就不按规矩排序了.(主要是网站上也没有这一部分内容的排序) 1.  html5的 非主体结构元素 学习笔记(1)里面记录过. 2.  html5表单提交和PHP环境搭建 1. ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  8. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  10. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. JavaWeb基础-过滤器监听器

    过滤器 1定义:过滤器是一个服务器的组件,他可以截取用户端的请求与响应信息,并对这些信息进行过滤;过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 2过滤器的工作原理: 3过滤器 ...

  2. A JSON example

    heroes.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. poi读取word的内容

    pache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 1.读取word 2003及word 2007需要的 ...

  4. VirtualBox安装CENTOS7.3常见问题

    1 DHCP 问题无法上网解决 :sudo dhclient 2 安装宝塔面板:yum install -y wget && wget -O install.sh http://dow ...

  5. IDEA java编译中出现了Exception in thread “main" java.lang.UnsupportedClassVersionError

    这个问题确实是由较高版本的JDK编译的java class文件试图在较低版本的JVM上运行产生的错误. 在idea中需要修改的有两区,四个地方 1. 修改项目编译器 Crtl+Shift+A 进入如下 ...

  6. Okhttp、Volley和Gson的简单介绍和配合使用

    转载自:http://www.apkbus.com/home.php?mod=space&uid=784586&do=blog&id=61255 1.okhttp是一个高效的. ...

  7. 会话的保持和form表单

    会话的保持和form表单 cookie 设置cookie from django.shortcuts import render, HttpResponse, redirect, reverse de ...

  8. python中str函数isdigit、isdecimal、isnumeric的区别

    num = "1" #unicodenum.isdigit() # Truenum.isdecimal() # Truenum.isnumeric() # True num = & ...

  9. 什么是pytorch（3神经网络）(翻译)

    神经网络 torch.nn 包可以用来构建神经网络. 前面介绍了 autograd包, nn 依赖于 autograd 用于定义和求导模型. nn.Module 包括layers(神经网络层), 以及 ...

  10. day 12

    一,什么是装饰器? 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事 ...