Jquery——Day5(jQuery UI:知乎系统[初级])
来源:互联网 发布:初中校园网络文化活动 编辑:程序博客网 时间:2024/06/15 02:50
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:每一次拖拉结束时执行
- Jquery——Day5(jQuery UI:知乎系统[初级])
- Jquery——Day5(工具函数)
- 学习知乎日报-----day5
- Jquery——Day5(插件—案例:制作导航插件)
- JQuery—JQuery UI——资料
- jQuery初级
- JQuery UI——进度条
- JQuery Treeview 初级(1)
- jQuery.Validate(初级篇)
- Jquery学习笔记(初级)
- jQuery Mobile总结(初级)
- jQuery UI(二)
- Jquery Tools——不可错过的Jquery UI库
- Jquery李炎恢——35概述及jQuery UI[1]
- 考试系统——可输入并自动匹配的下拉框(二)——JQuery Easy UI框架
- jquery UI 跟随学习笔记——拖拽(Draggable)
- jquery UI 跟随学习笔记——拖拽(Draggable)
- jQuery Mobile学习笔记(三)——UI组件
- 17年2月27日Java后台学习记录,SSM架构最终配置,Spring回滚机制。
- C++第一次上机训练项目三
- Wireshark实战分析值ICMP协议
- Java RMI简单使用案例
- 学会正则表达式让你的编程如虎添翼
- Jquery——Day5(jQuery UI:知乎系统[初级])
- redis.conf常用配置
- 容器的capacity、max_size以及内存分配
- 谈HttpClient(3.1版本)与HttpURLConnection
- C++编程模式2--策略模式
- Wireshark实战分析之DHCP协议
- jsp环境搭建
- Redis的缓存策略和主键失效机制
- CodeForces Gym 100500A A. Poetry Challenge DFS