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的更多相关文章

  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. springboot学习之构建简单项目搭建

    概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这 ...

  2. MYSQL-8.0.11-WINX64(免安装版)配置

    1. 解压zip包到安装目录 首先,将mysql-8.0.11-winx64.zip 解压缩到 安装D:/mysql-8.0.11-winx64 目录下, 2.配置文件 在安装根目录下添加 my.in ...

  3. FreeSWITCH与FreeSWITCH对接

    (主机A ---> 主机B)192.168.100.A主机:修改/usr/local/freeswitch/conf/dialplan/default.xml 10         <ex ...

  4. Ubuntu16.04 安装 MySQL

    本篇介绍如何在Ubuntu系统上安装MySQL数据库,以及介绍数据库的基本命令. 一.下载和安装MySQL 可以通过apt-get下载并安装 sudo apt-get install mysql-se ...

  5. 使用vue+koa实现一个简单的图书小程序（1）

    这个系列的博客用来记录我开发时候遇到的问题以及学习到的知识 边做边学: 前后端分离,高内聚低耦合小程序端使用了mpvue 内部使用了vuejs的语法 来做整个小程序的渲染层 后端使用的是koa2搭建一 ...

  6. spring集成jedis简单实例

    jedis是redis的java客户端,spring将redis连接池作为一个bean配置. redis连接池分为两种,一种是“redis.clients.jedis.ShardedJedisPool ...

  7. c——动态数组

    动态数组的实现 #include<stdio.h> #include<stdlib.h> int main(){ int i,n,*a; scanf("%d" ...

  8. linux的基本操作1

    文件系统 ext4 d: 进入d盘dir /w 以友好的方式列出目录cd     目录名 进入目录cd\      退出目录cd ..    退出到上级目录ipconfig /all 显示本机网络信息 ...

  9. Angular + Websocket

    Angular使用RxJS,它本质上是一个反应式扩展的javascript实现.这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets. 简而言之,RxJS允许我们从we ...

  10. python函数之第一类对象

    目录 python函数之第一类对象 python函数之第一类对象 第一类对象(英语:First-class object)在计算机科学中指可以在执行期创造并作为参数传递给其他函数或存入一个变数的实体. ...