JQuery-ui

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

静态资源引用

<link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>

日期选择

用到的是datepicker()。

<!DOCTYPE html>
<html>
	<head>
		<link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>

		<script>
$(document).ready(function() {
$("#datepicker").datepicker({dateFormat:"yy-mm-dd"}); //格式为 2015-04-15这样的
});
		</script>
	</head>
	<body >
		<div>
date:
			<input type="text" id="datepicker" />
		</div>
	</body>
</html>

效果:

时间: 2024-11-05 14:54:30

JQuery-ui的相关文章

jQuery UI.Layout Plug

jQuery UI.Layout Plug-in jQuery还是蛮夯的家伙. CSS+DIV时代,要编排个页框的版面还真不简单,如果又是对为对于网页的layout不是很在行的人,非常适合这套jQuery UI.Layout Plug-in. 这个plugin的功能真的还蛮强大的,我觉得其中比较特殊的是下面这几点: collapsable:每一个pane都可以收合,而且还可以加上jQuery特效 resizable:每一个pane都可以缩放,而且还可以限制缩放的大小 hotkeys:每一个pan

Dreamweaver扩展:Web开发jQuery UI接口框架

绝大多数的Web设计师和Web开发者可能都会经常使用Adobe的产品来完成工作,本文整理了5个在Web设计开发中最常用jQuery UI 接口框架,帮助你提高项目开发效率.这些jQuery UI 框架操作非常简单,即使你是初学者. 安装这些Dreamweaver扩展前,你需要检查你的Dreamweaver和Extension Manager版本是否为当前最新版本: Dreamweaver CS4 and Extension Manager CS4. 1. jQuery UI Calendar j

使用jquery ui的datepicker开发课程日历

这两天在开发某商学院的网站,里面有涉及到课程的模块,客户希望在网站的首页显示一个日历, 在有课程的日期加上显眼的标识,使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安 排时间报名修读. 这个功能挺有意思的,符合本人及非常小器公司一直所坚持的"为客户创造价值"的理 念,它真正从用户的角度思考问题了,客户真正需要的.实用的东西是我最喜欢开发的产品因为我觉 得不能为客户创造价值的产品最终必定不能为自己创造价值,这个世界是讲因果的. 刚开始的时候感觉用第三方的东西挺麻烦的,一来要研究

如何使用jQuery UI主题

主题并不是一个新概念.当您使用级联样式表 (CSS) 样式与类设计网站的外观时,很可能已经使用了一些 主题.使用框架标准化设计方法,可以减少工作量和需要编写的代码量. jQuery UI 现在已经成为主 题实现的行业标准.虽然还存在其他的选择,比如 Dojo(与 Dijit 耦合在一起)或 Ext JS,但 jQuery UI 将主题与小部件的使用结合在一起,小部件是用户与日期选择器或按钮进行交互时需要使用的元素.构成 jQuery UI 主题的文件的内部工作原理就是 CSS 与 JavaScr

jQuery入门(21) jQuery UI示例

上篇介绍了使用jQuery UI基本工作过程,后面就逐个介绍jQuery UI库内置的UI组件,支持的拖放 ,动画效果等,如果你之前看过Yii Framework教程 ,PHP Yii Framework封装了jQuery UI组件,有兴 趣的可以看一看. 本教程面的示例基本翻译自jQuery UI 英 文网站,部分例子可能有些修改,测试环境依然是Visual Studio IDE (2012). jQuery UI  也支持多种显示主题.

jQuery入门(20) jQuery UI基本工作过程

本篇介绍JQuery UI组件的基本工作过程,以进程条(Progressbar)为例介绍JQuery UI组件工作的 基本过程. 初始化 大部分JQuery Ui组件都可以保持其状态,因此为了能够跟踪UI组件的状 态,jQuery UI组件也有一个生命周期,这个生命周期从初始化开始,为了初始化一个UI组件,一般在 某个HTML元素调用UI组件(插件)方法.,比如 $( "#elem" ).progressbar(); 这 个方法初始化id=elem的元素,因为我们调用progressb

jQuery入门(19) jQuery UI概述

前面介绍了jQuery的基本用法,jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题 的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互动式的Web应用. 它的基本功能有: 互动 拖曳(Draggable) – 让元素可以用滑鼠拖曳. 拖放 (Droppable) – 让控制项可以接受其他拖曳进来的元素. 调整大小(Resizable) – 让元素可 以调整大小. 选取(Selectable) – 提供进阶的大量元素选择功能

三大UI框架Dijit、ExtJS、jQuery UI全方位对比

 Dijit.ExtJS.jQuery UI 简介 Dojo 是开源 ja vasc ript 库中起步较早的先行者之一.由 Alex Russell, David Schontzler, Dylan Schiemann 等人于 2004 年创立.Dojo 具有类似 Java 的包机制 (packaging system), 将 JS 代码根据功能进行了模块化.主要包含 Dojo.Dijit 以及 Dojox 三个包.其中 Dojo 包提供稳定的内核 API,Dijit 包提供各类 UI 控件,

jquery ui accordion实现后台折叠菜单

  今天,我们来说下jquery ui里的Accordion,这个功能,主要是用来实现折叠的效果,比较适合做菜单,以及我们之前常见的手风琴...我们先看下我们的效果截图: 如果缺少拖动功能,那么,我们今天的作品就没什么特别了,这里,我们引进了jquery ui的sortable,这样,我就可以上下移动模块了,交互性显得强些,当然了,我们这种设计,打算是用在后台设计里的... 借助于jquery ui,我们短短几句代码,就把折叠及拖动的功能实现了,方便吧...

jquery ui dialog实现弹窗特效

  今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着