jqueryUI学习
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学习的更多相关文章
- JqueryUI学习笔记-自动完成autocomplete
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...
- 学习笔记:jqueryui
Jquery UI cdn.bootcss.com <!-- jquery --> <script src="http://cdn.bootcss.com/jquery/1 ...
- HTML 学习笔记 JQueryUI(Interactions,Widgets)
Draggable 允许使用鼠标移动元素(拖动) demo <html> <head> <meta charset="UTF-8" ...
- JQueryUI基础知识学习
JQueryUI官网 http://jqueryui.com/ 菜鸟教程 http://www.runoob.com/jqueryui/jqueryui-tutorial.html
- 20151215jquery学习笔记--jqueryUI --dialog(对话框)
对话框(dialog),是 jQuery UI 非常重要的一个功能.它彻底的代替了 JavaScript 的 alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余 一.开启多个 di ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- Jqgrid学习API
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
随机推荐
- opencv学习笔记3——图像缩放,翻转和阈值分割
#图像的缩放操作 #cv.resize(src,dsize,dst=None,,fx=None,fy=None,interpolation=None) #src->原图像,dsize->目 ...
- 在makefile通过宏定义来控制源程序的编译
在Makefile中我们可以通过宏定义来控制源程序的编译.只要在Makefile中的CFLAGS中通过选项-D来指定你于定义的宏即可. 如:CFLAGS += -D _XXX在编译的时候加上此选项就可 ...
- 【转】Cannot add or update a child row: a foreign key constraint fails 解决办法
原因:设置的外键和对应的另一个表的主键值不匹配.解决方法:找出不匹配的值修改.或者清空两表数据. 转自https://blog.csdn.net/qq_29405421/article/details ...
- 在pycharm中使用指定的虚拟环境virtualenv
第一步 建立虚拟环境 cmd下: pip install virtualenv 创建虚拟环境目录 env 第二步:激活虚拟环境 进入虚拟环境下的script目录 第三步:创建一个flask文件夹并打开 ...
- sharepoint_study_5
描述:手动进行SharePoint网页调试图解 解决: 第一步:打开页面的后台代码,设置断点 第二步:添加到进程 第三步:选择SharePoint进程,我这里都选了,如果你知道要调试的页面是哪一个进程 ...
- 【算法笔记】B1027 打印沙漏
1027 打印沙漏 (20 分) 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇 ...
- POJ_2010 Moo University - Financial Aid 【堆预处理】
一.题面 POJ2010 二.分析 堆预处理 首先可以考虑吧随便取一个点,判断两侧的最小的总费用是多少,然后相加判断是否满足条件.如果直接判断会超时,所以需要用大根堆预处理一下.先看从分数最小的往最大 ...
- 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 ...
- [转] 利用CORS实现跨域请求
[From] http://newhtml.net/using-cors/ 跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C ...
- Oracle列转行函数Listagg以及pivot查询示例
简单的Oracle列转行函数Listagg示例: CREATE TABLE tbl_test (catalog VARCHAR(1),product VARCHAR(2),amount NUMBER) ...