- 浏览: 228920 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
annyliyear:
找到的ExtJS实现多选下拉框3个代码 -
yinboxian:
源码太乱了
JXTA中使用JxtaServerPipe和JxtaBiDiPipe实现双向可靠的通信 -
yinboxian:
我的peers第一次执行时可以得到正确的结果,以后就不行了。不 ...
JXTA中基于管道监听方式通信 -
cuizhenfu#gmail.com:
http://www.cnblogs.com/cuizhf
JXTA中使用JxtaServerPipe和JxtaBiDiPipe实现双向可靠的通信 -
luxing44530:
请问, jsp页面如果在 META-INF 中, 改怎么访问? ...
Servlet3.0 新特性之模块化实践
JavaScriptMVC提供了一串很有用的专用事件。
下述的只是一个简短的概述。
默认事件
让你给一个事件提供默认的行为,它使用event.preventDefault()可以防止事件冒泡。 这个对像下述的配件提供DOM的API是非常有用的。
$("#tabs").delegate(".panel","default.open", function(){ $(this).show() })
销毁事件
如果一个元素从页面删除,也要把它绑定过的事件销毁。
$("#contextMenu").bind("destroyed", function(){ // cleanup $(document.body).unbind("click.contextMenu"); })
拖拉和投放事件
使用事件委托监听拖放事件。
$(".item").live("dragover", function(ev, drag){ // let user know that the item can be dropped $(this).addClass("canDrop"); }).live("dropover", function(ev, drop, drag){ // let user know that the item can be dropped on $(this).addClass('drop-able') })
注:下述的所有事件在使用之前,需要引入这些事件的插件文件,都在jquery/event这个文件夹下面。
1、拖拉
jQuery提供拖拉事件为一个专用事件。一个jQuery.Drag实例是创建一个拖拉且把它当成参数传递给拖拉事件的回调函数。 在拖拉事件中调用函数,你可以报出这个拖拉的行为。
拖拉事件
这个拖拉插件允许你监听以下事件:
1、dragdown 鼠标按下
2、draginit 拖拉监听开始
3、dragmove 拖拉元素移动
4、dragend 拖拉元素静止移动
5、dragover 拖拉对象经过一个落脚点
6、dragout 拖拉对象移出一个落脚点
只要绑定或者委托给这些事件的其中一个,你就可以让这个元素拖拉。你可以在拖动的回调中通过调用方法来修改拖拉的行为。
//makes the drag vertical $(".drags").delegate("draginit", function(event, drag){ drag.vertical(); }) //gets the position of the drag and uses that to set the width //of an element $(".resize").delegate("dragmove",function(event, drag){ $(this).width(drag.position.left() - $(this).offset().left ) })
拖拉对象
拖拉对象是通过拖拉事件传递给事件的回调函数。通过调用方法来改变这个拖拉对象的属性,
你可以知道拖拉的行为。
拖拉对象的属性和方法:
1、cancel 停止拖拉的监听,也就是不能拖拉
2、ghost 就是拖拉元素的副本
3、horizontal 拖拉元素只能在水平方向拖动
4、location 拖拉元素在界面上坐标
5、mouseElementPosition 鼠标在拖拉元素上的坐标
6、only 只拖拉,不投放
7、representative 拖拉这个元素的代码元素
8、revert 拖拉元素以动画的效果返回原始坐标处
9、vertical 拖拉元素只能在垂直方向拖动
10、limit 拖拉元素只能在一个元素内拖动
11、scrolls 拖拉元素拖动时让一个滚动条滚动。
例子:
steal("jquery/event/drag", "jquery/event/drag/scroll", "jquery/event/drag/limit").then(function($){ //drag with bind $("#drag").bind("draginit",function(){}) //delegated drags $("#delegate").delegate(".handle","draginit",function(){}) //ghost $("#ghost").bind("draginit",function(ev, drag){drag.ghost()}) //revert $(".revert").bind("draginit",function(ev, drag){ drag.revert() }) //limit $("#container").delegate(".handle","draginit",function(ev, drag){drag.limit( $("#container") )}) //representative $("#repdrag").bind("draginit",function(ev, drag){drag.representative($("#representative"),50,30)}) //horizontal $("#horizontal").bind("draginit",function(ev, drag){drag.horizontal()}) //distance $('#distance').bind('dragdown', function(ev, drag){ ev.preventDefault(); drag.distance(50) }) //scrolls $("#scroll-drag").bind("draginit",function(ev, drag){drag.scrolls( $("#scrollarea") )}) // allow form elements to be selected $("#form-drag").bind("dragdown",function(ev, drag){ if(ev.target.nodeName.toLowerCase() == 'input'){ drag.cancel(); } }) })
2、投放
jQuery提供投放事件为专用事件。 绑定一个投放事件,在对应的拖拉对象执行期间过程中将会被调用你定义的回调函数。
投放事件 所有投放事件被调用用了3个参数,对应事件,一个投放实例,和特定的拖拉对象。 这里是投放可用的事件:
1、dropinit 拖拉监听已经开始,投放坐标开始计算。
2、dropover 一个拖拉对象经过一个投放元素
3、dropout 一个拖拉对象移动一个投入元素
4、dropmove 一个拖拉对象经过一个投放元素,重复调用元素的移动。
5、dropon 一个拖拉对象释放在一个投放元素上
6、dropend 拖拉监听完成
例子:
//创建一个可拖动的拖拉对象 $('.handle').live("draginit", function(){}) //添加投放对象来监听拖拉对象进入,经过,投放等动作 $('#dropout') .delegate(".dropout","dropover", function(){ $(this).addClass('over') }) .delegate(".dropout","dropout", function(){ $(this).removeClass('over') }) .bind("dropover", function(){ $(this).addClass('over') }) .bind("dropout", function(){ $(this).removeClass('over') }); //关闭dropout/dropover $("#undelegate").click(function(){ $('#dropout').undelegate(".dropout","dropover"); $('#dropout').undelegate(".dropout","dropout"); }) //添加dropmove/dropon var count = 0 $('.dropmove') .bind('dropmove', function(){ $('.count').text(count++) }) .bind('dropon', function(){ $(this).text("Dropped on!") })
3、暂停/恢复
添加jquery/event/pause插件就通过暂停和恢复事件。
$('#todos').bind('show', function(ev){ ev.pause(); $(this).load('todos.html', function(){ ev.resume(); }); })
当一个事件暂停后,停止调用这个事件的其它事件句柄。但是当恢复这个事件后, 它会将调用暂停后的其它事件句柄。 jquery/event/pause插件是在default事件插件上实现的,让我们更加容易使用异步API创建控件。
在这里我们还要讲到一个函数:
triggerAsync:当触发一个事件已经完成DOM冒泡且preventDefault没有执行。
$('panel').triggerAsync('show', function(){ $('#panel').show(); },function(){ $('#other').addClass('error'); });
4、default事件
允许你执行default动作像一个事件。
监听一个default事件很简单,只是给事件加一个default的前缀即可,使用方法与一般事件一样:
$("div").bind("default.show", function(ev){ ... }); $("ul").delegate("li","default.activate", function(ev){ ... });
5、destroyed
给元素提供销毁事件。
当元素从DOM销毁后销毁事件会被触发。销毁事件不冒泡,所以不能使用live或者delegate来
绑定销毁事件。
$(".foo").bind("destroyed", function(){ //clean up code })
6、Hover
提供委托悬挂事件。 当鼠标移动到一个元素上停止一定时间周期会产生一个悬挂事件。你可以监听或者配置悬挂下述事件:
1、hoverinit 鼠标进入元素时调用,使用这个事件去定制delay和distance。
2、hoverenter 一个元素开始悬挂
3、hovermove 鼠标移动到一个已经悬挂的元素上。
4、hoverleave 鼠标离开悬挂元素。
常常,我们如果不使用其它页面UI的话,就会碰到按钮,表格行等元素,当鼠标经过或者悬挂在它们上面时,需要做一些样式的变化, 来达到醒目的效果。所以这个悬挂事件是很有用的。下述给出一个鼠标经过表格行时,行背景颜色变化。
示例代码:
$('tr').bind("hoverenter",function(){ $(this).addClass("hovering"); }) $('tr').delegate("hoverleave",function(){ $(this).removeClass("hovering"); })
代码当鼠标悬挂在表格某一行中,添加hovering样式,离开后删除hovering样式。
发表评论
-
test
2012-11-21 19:31 0关于请假: 1、做好工作安排,回复华为正式邮件! 2、回去 ... -
JavaScriptMVC之实战
2012-06-09 15:05 1905JavaScriptMVC之实战 下面我们通过一个真实的项目 ... -
JavaScriptMVC之快速开发
2012-04-28 21:53 4368有些同学反映说,需要看太多的篇章才能明白如何使用JavaScr ... -
JavaScriptMVC之语言助手
2012-04-26 21:00 1395在这篇文章,我只挑 ... -
JavaScriptMVC之Model
2012-04-25 22:52 1983Model顶层负责程序的数据层,使用它可以很容易做以下操作: ... -
JavaScriptMVC之View
2012-04-24 20:35 2169视图提供在JQuery中使用模板的一致接口。 当模板 ... -
JavaScriptMVC之Controller
2012-04-24 20:08 1710Controller帮助创建合理的,可释放内存,快速执行jQu ... -
JavaScriptMVC之控制器监听事件
2012-04-23 21:16 1580控制器安装和卸载事件句柄非常容易。卸载事件句柄对于防止内存泄漏 ... -
JavaScriptMVC之Class
2012-04-23 20:50 1269Class提供相当继承的功能。使用Class就可以让我们结合面 ... -
JavaScriptMVC之Fixture续
2012-04-22 00:54 1194其实下面我写的主要并 ... -
JavaScriptMVC之数据处理
2012-04-21 23:42 1207常常,项目中创建,修 ... -
JavaScriptMVC之数据绑定(jquery.tie)
2012-04-20 23:14 1681如果开发过Java的RCP程序的同学就会知道数据绑定datab ... -
JavaScriptMVC之Fixture
2012-04-20 22:19 1383注:阅读这篇同学必须 ... -
从JavaScriptMVC开始如何完成项目之压缩文件和生成帮助文档
2012-04-13 23:45 14811、压缩文件 在厨师手 ... -
从JavaScriptMVC开始如何完成项目之创建测试程序
2012-04-13 21:56 1020JavaScriptMVC放一个极大强调的重点在测试方面。Ja ... -
从JavaScriptMVC开始如何完成项目之创建应用程序
2012-04-12 23:56 1178如何使用JavaScriptMVC开发项目第一步,就是创建应用 ... -
JavascriptMVC 之 route 的 history功能的使用
2012-04-08 11:10 1650JavascriptMVC 之 route 的 his ... -
wijmo+javascriptmvc开发注意事项
2012-04-07 09:31 1312下面是在使用wijmo+javasc ... -
javascriptmvc之funcunit
2012-03-30 00:19 989javascriptmvc之funcunit funcu ... -
学习jquery mvc第一天,hello
2012-03-29 23:09 2204学习jquery mvc第一天,hello 做为程序员,对于 ...
相关推荐
JavascriptMVC代码
NULL 博文链接:https://lyndon-lin.iteye.com/blog/1556095
上传了一半的javascriptmvc3.0.5,这个是【下】
javascriptmvc-3.2.4.zip
javascriptmvc-3.3.zip
javascript的mvc框架。类似于java的mvc框架
MVC框架 JavaScriptMVC ,JavaScriptMVC 是一个 JavaScript 的 MVC 框架,通过它可以简化项目的开发...
javascriptmvc3.0.5,文件大于20MB,分成两个卷
谈谈JavaScriptMVC模式共3页.pdf.zip
javaScriptMVC开源框架,是一个不错的前端界面MVC框架,是在jquery等开源项目的基础上建立的
javaScriptMVC开源框架,是一个不错的前端界面MVC框架,是在jquery等开源项目的基础上建立的 说明:此文件解压后和第一部分文件夹必须放到一起才能正确使用
NULL 博文链接:https://lyndon-lin.iteye.com/blog/1484876
Mithril.js 是一个客户端的 JavaScript MVC 框架。可将应用分成数据层、UI层和控制层。Mithril 压缩后只有 3kb 左右。API 提供一个模板引擎,带 DOM diff 实现,支持路由和组合。 示例代码: ...
NULL 博文链接:https://lyndon-lin.iteye.com/blog/1485743
:选择JavaScriptMVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。本文对JavaScriptMVC框架Angular、Backbone、CanJS和Ember作了比较,供大家参考。...
JavaScriptMVC JavaSriptMVC 高级编程课程
内容索引:脚本资源,Ajax/JavaScript,JavaScriptMVC JavaScriptMVC 是一个功能强大的 JavaScript framework. 也是一个很棒的JavaScript测试框架,它同样能提高开发的速度。JavaScriptMVC应用了模型-视图-控制器架构...
javaScript MVC 相关资料和例子,希望对大家有帮助