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. opencv学习笔记3——图像缩放,翻转和阈值分割

    #图像的缩放操作 #cv.resize(src,dsize,dst=None,,fx=None,fy=None,interpolation=None) #src->原图像,dsize->目 ...

  2. 在makefile通过宏定义来控制源程序的编译

    在Makefile中我们可以通过宏定义来控制源程序的编译.只要在Makefile中的CFLAGS中通过选项-D来指定你于定义的宏即可. 如:CFLAGS += -D _XXX在编译的时候加上此选项就可 ...

  3. 【转】Cannot add or update a child row: a foreign key constraint fails 解决办法

    原因:设置的外键和对应的另一个表的主键值不匹配.解决方法:找出不匹配的值修改.或者清空两表数据. 转自https://blog.csdn.net/qq_29405421/article/details ...

  4. 在pycharm中使用指定的虚拟环境virtualenv

    第一步 建立虚拟环境 cmd下: pip install virtualenv 创建虚拟环境目录 env 第二步:激活虚拟环境 进入虚拟环境下的script目录 第三步:创建一个flask文件夹并打开 ...

  5. sharepoint_study_5

    描述:手动进行SharePoint网页调试图解 解决: 第一步:打开页面的后台代码,设置断点 第二步:添加到进程 第三步:选择SharePoint进程,我这里都选了,如果你知道要调试的页面是哪一个进程 ...

  6. 【算法笔记】B1027 打印沙漏

    1027 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇 ...

  7. POJ_2010 Moo University - Financial Aid 【堆预处理】

    一.题面 POJ2010 二.分析 堆预处理 首先可以考虑吧随便取一个点,判断两侧的最小的总费用是多少,然后相加判断是否满足条件.如果直接判断会超时,所以需要用大根堆预处理一下.先看从分数最小的往最大 ...

  8. 109th LeetCode Weekly Contest Number of Recent Calls

    Write a class RecentCounter to count recent requests. It has only one method: ping(int t), where t r ...

  9. [转] 利用CORS实现跨域请求

    [From] http://newhtml.net/using-cors/ 跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C ...

  10. Oracle列转行函数Listagg以及pivot查询示例

    简单的Oracle列转行函数Listagg示例: CREATE TABLE tbl_test (catalog VARCHAR(1),product VARCHAR(2),amount NUMBER) ...