【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

【【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件】的更多相关文章

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每个容器都有一个 heading 元素与之关联,用来打开并显示content.当你点击一个heading,它的 content就会以动画的方式滑动到它下面的视图.当我们点击一个新的content时,当前可见的content会隐藏,新的会显示. accordion控件的结构 accordion的默认安装…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联content panel,期间会确保所有其他的 content panel 是 hidden.一次最多只有一个 content panel 可以被打开,也可以没有. 本章我们主要介绍以下几点: 默认安装启用控件 CSS框架是如何触发 tab 控件怎样为一组 tabs 应用自定义样式使用 tab 控件…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项形式启用内置动画给dialog添加按钮使用dialog回调函数编码的形式控制dialog 1 创建一个基本的dialog $(function(){ $("#myDialog").dialog(); }); </script> 使用 jquery.ui.position.js后,dialog会自动居中. 使用 jquery.ui.dra…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

Button ,可以使用 <button> <input> <a>. <input> 中的不同类型,submit , radio , checkbox .还能加上 icon ,split button . Autoconplete 为校准文本 <input>提供了一个文本选择的菜单.当浏览者开始在<input>中输入时,会自动匹配输入的字符,显示建议. 允许通过箭头按键导航,Enter键选中,Esc键关闭菜单.当箭头键被用来导航时,…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件

默认datepicker的安装启用探索它的配置选项安装启用一个触发按钮配置一个供选择的动画 dateFormat选项简单的国际化多月datepicker 日期范围选择 datepicker的方法使用AJAX的datepicker 按着Ctrl键期间,箭头可以用来选择新的day cell,按Return键选中. 1 默认的datepicker }); 2 datepicker的配置选项 Option Default value Usage altField “” 指定一个候选的<inp…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

默认slider的安装启用为slider自定义风格修改配置选项创建一个垂直的slider 设置最大最小值,和默认值启用多个手柄和范围 slider内置的回调事件 slider的方法这个简单的控件,由两个主要的元素组成,手柄,也称拇指.背景,也称为轨道. 1 安装启用一个slider }); 该控件需要以下库文件的支持: jquery-ui-x.x.x.custom.css jquery-x.x.x.js jquery.ui.core.js jquery.ui.widget.js…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件

像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为 jquery.ui.calculator.js 的文件,代码如下: })(jQuery); 我们通过 $.widget() 方法定义我们的插件.这个方法接受两个参数.第一个参数定义该插件的名称,此名称需以 ui 命名空间开头.第二个参数是可选属性,表示插件的功能,包含属性和方法. 此处,我们有两个配置…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Widget Factory - calculator </title> <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.9.custom.css"> <link rel=…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能

jquery.ui.all.css 1.所有主题必须的文件都包含在这个文件中.它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成. jquery.ui.base.css 1.这个文件被ui.all.css文件引用.它依然由ui.core.css文件中拉入的@import指令构成,像每个控件一样.但是,它不包含控制每个控件显示的主题样式. jquery.ui.core.css 1.这个文件提供CSS框架的核心样式,诸如clear-fix helper和gene…

【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件

Progressbar控件用来显示任意进程的完成百分比. 默认安装启用配置选项控件暴露的事件API progressbar暴露的独一无二的方法一些现实生活的例子当前版本中,我们或系统必须明确进度的总量. 由外部<div>容器和内部<div>容器构成.内部的<div>用来高亮当前进度. 1 安装启用默认的 progressbar $(function(){ $("#myProgressbar").progressbar(); }); <…