Jquery——Day5(jQuery UI:知乎系统[初级])
2017-02-28 19:50
302 查看
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:将要关闭时会调用该方法。
(6)drag:当对话框移动的时候会调用drag方法,该方法两个参数:event,ui
ui有两个属性对象:a、position——得到当前移动的坐标,有两个子属性(top、left)
b、offset——同上。
(7)dragStart:当拖拽开始时执行
(8)dragStop:当拖拽结束时执行
(9)resize:当对话框拉升大小时,每一次拖拉都会执行该方法。
(10)resizeStart:拖拉开始时执行
(11)resizeStop:每一次拖拉结束时执行
该项目仿照“知乎”的架构模式来搭建界面和布局。此外,以“百度”作为辅助进行开发的系统。主要实现的是界面的前端部分功能。
确认的几个主要的前端功能如下:
(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:每一次拖拉结束时执行
相关文章推荐
- DNJ----又一个jQuery和jQuery UI的.net framework
- 兄弟连LinuxStudyNote(1)-Linux系统(CentOS6)安装(初级入门版)
- 回复 盖楼 聊天系统[php+mysql+Jquery]
- jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题
- 投票系统显示结果--jQuery插件
- 基于jQuery的投票系统显示结果插件
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件(翻译)
- JavaScript强化教程——JQuery初级教程
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- jquery获取当前系统时间+js两个时间的大小比较
- jQuery学习七 jQuery UI
- mui初级入门教程(七)— 基于native.js的文件系统管理功能实现
- Unity3D ParticleSystem粒子系统(3.5版)【初级】
- 牛腩新闻发布系统——初探JQuery,AJAX
- jQuery第二天, jQuery操作DOM小结(初级)
- 基于jQuery的动态投票系统--Ajax Poll
- ubuntu系统初级设置
- jQuery缓存系统的前世今生!
- [置顶]信息发布系统 Jquery+MVC架构开发(2) 在EA下进行数据库设计