Jquery——Day5（jQuery UI:知乎系统[初级]）

1、项目介绍

该项目仿照“知乎”的架构模式来搭建界面和布局。此外，以“百度”作为辅助进行开发的系统。主要实现的是界面的前端部分功能。

确认的几个主要的前端功能如下：

（1）弹出对话框；               （2）前端按钮；

（3）折叠菜单；                   （4）选项卡切换；

（5）滑动块；                      （6）日历；

（7）自动补全（搜索）；    （8）拖放。

2、jQuery UI

采用最新版本：jquery-ui-1.10.4.custom.zip，内部目录结构如下：

（1）css，包含与jquery UI相关的css文件；

（2）js，包含jQuery UI相关的JavaScript文件；

（3）Development-bundle，包含多个不同的子目录：demos(jQuery UI示例文件)、docs(jQuery UI文档文件)、themes(css主题文件)和ui。

（4）index.html，可以查看jQuery UI功能和索引项。

3、开启多个dialog，只要设置不同的id即可以实现。

4、修改dialog样式

5、dialog方法事件

在调用事件过程中，this表示的是div对象，而非document对象。

dialog事件选项——

（1）focus：当对话框被激活时（首次显示以及每次在上面点击）会调用focus方法。

若有两个参数（event,ui），此事件ui参数为空。

（2）create：表示对话框被创建。

（3）open：当对话框被显示时（首次显示会调用dialog('open')方法）

（4）beforeClose：在对话框将要关闭时，会调用beforeClose('close')方法；

（5）close：将要关闭时会调用该方法。

$('#button').button();

$('#reg').dialog({
	focus:function(e,ui){
		alert('注册！');
	}
});

$('#login').dialog({
	focus:function(e,ui){
		alert('登录！');
	}
});

（6）drag：当对话框移动的时候会调用drag方法，该方法两个参数：event，ui

ui有两个属性对象：a、position——得到当前移动的坐标，有两个子属性（top、left）

b、offset——同上。

（7）dragStart：当拖拽开始时执行

（8）dragStop：当拖拽结束时执行

（9）resize：当对话框拉升大小时，每一次拖拉都会执行该方法。

（10）resizeStart：拖拉开始时执行

（11）resizeStop：每一次拖拉结束时执行