01.选项卡  拖动按钮
<div id="tabs">
<ul>
<li><a href="#tabs-1">第一个</a></li>
<li><a href="#tabs-2">第二个</a></li>
</ul>
<div id="tabs-1">
<a href="#" id="btn">哈哈</a>
</div>
<div id="tabs-2">
<a href="#" id="btn2">可以拖动我</a>
</div>
</div>
===================样式====================
<script>
$(function() {
$( "#tabs" ).tabs();
$("#btn").button();
/*可以拖动*/
$("#btn2").button().draggable();
});

                   

02.基本对话框

<div id="dialog" title="基本的对话框">
<p>这是一个默认的对话框,用于显示信息。对话框窗口可以移动,调整尺寸,默认可通过 'x' 图标关闭。</p>
</div>
===========================样式=================================
/*对话框*/
$(function() {
$( "#dialog" ).dialog();
});

03.选择器(光棒效果)

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
=====================样式====================================
/*选择器*/
$(function () {
$( "#selectable" ).selectable();
})
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

04.日期控件

<input type="text" name="date" id="date" value="日期控件"/>
============================样式============================
/*日期 控件*/
$(function() {
$( "#date" ).datepicker();
});

5.滑块
<div id="slider"></div>
====================样式================
/*滑块*/
$(function() {
$( "#slider" ).slider();
});

6.工具提示框

<p><label for="age">工具提示框:</label><input id="age" title="这是提示框。"></p>
==============================样式============================
$(function() {
$( "#age" ).tooltip();
});
												

jqueryUI学习的更多相关文章

  1. JqueryUI学习笔记-自动完成autocomplete

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...

  2. 从零开始学习jQuery (十) jQueryUI常用功能实战

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...

  3. 学习笔记:jqueryui

    Jquery UI cdn.bootcss.com <!-- jquery --> <script src="http://cdn.bootcss.com/jquery/1 ...

  4. HTML 学习笔记 JQueryUI(Interactions,Widgets)

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

  5. JQueryUI基础知识学习

    JQueryUI官网 http://jqueryui.com/ 菜鸟教程 http://www.runoob.com/jqueryui/jqueryui-tutorial.html

  6. 20151215jquery学习笔记--jqueryUI --dialog(对话框)

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

  7. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  8. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  9. Jqgrid学习API

    JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...

随机推荐

  1. cp命令覆盖不提示

    参数说明 -i, --interactive prompt before overwrite (overrides a previous -n option)   #文件存在是,交互式提示是否覆盖 - ...

  2. CSS复合选择器

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...

  3. ThinkPHP U方法

    方法1: {:U('User/Booking/bookingdetails')} 方法2: {:U('User/Booking/bookingdetails')}"+"&a ...

  4. 精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能)

    原文:精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能) 本篇博客主要说明如何使用 UI Virtualization(以下简称为 UIV) 来提 ...

  5. SpringBoot中 application.yml /application.properties常用配置介绍

    # Tomcat server: tomcat: uri-encoding: UTF-8 max-threads: 1000 min-spare-threads: 30 port: 10444 ser ...

  6. Docker镜像的导出和载入

    https://www.cnblogs.com/lishidefengchen/p/10564765.html

  7. 51Nod-1259-整数划分 V2

    51Nod-1259-整数划分 V2 将N分为若干个整数的和,有多少种不同的划分方式,例如:n = 4,{4} {1,3} {2,2} {1,1,2} {1,1,1,1},共5种.由于数据较大,输出M ...

  8. phpcms V9 框架目录结构

    phpcms v9框架的目录结构分析:      了解v9框架的目录结构,有助于帮助我们快速建立起对v9框架的一个整体认识 打开"mycms"项目,有如下文件和目录      使用 ...

  9. poj3187

    一.题意:给定n,求1~n的一个排列,这个排列需要满足以下两个要求:1.杨辉三角最后的和为sum  2.字典序最小 二.思路:暴力枚举每一个排列,然后计算和并与sum进行比较.这里我比较费解的是为什么 ...

  10. python学习8-闭包、迭代器(转载)

    一.第一类对象: 函数名是一个变量,可以当普通变量使用,但它又是一个特殊的变量,与括号配合可以执行函数. 函数名的运用 1.单独打印是一个内存地址 2.可以给其他变量赋值 3.可以作为容器类变量的元素 ...