首页
网站首页
公司简介
资讯中心
推荐内容
返回顶部
www.64222.com改进版_jquery_脚本之家,javascript下对于事件
发布时间:2019-12-25 16:27
浏览次数:

复制代码 代码如下:

1.首先我们来了解几个概念,“事件”,“事件流”,“事件名称”,“事件处理函数/事件监听函数,也许是“老生常谈”,知道的朋友可以越过。 事件: 事件是用户自身或浏览器进行的特定行为。如:用户点击 也就是常用的click事件 事件流:多个事件 按一定顺序触发 形成了事件流 事件名称:如上面所讲的click就是事件名 事件处理函数/事件监听函数就是 事件触发后的处理函数,如obj.onclick=fn;函数fn就是事件处理函数 2.下面我们来了解一下历史,事件是dom的一部分 是在版本3中已经得到完整的说明,当进浏览器除ie,其他像netscape,safari,opera都基本上遵守dom的事件模型 3. 冒泡事件,其基本思想是事件从特定的事件目标向非特定的事件目标顺序触发。 先看如下代码:代码 复制代码 代码如下:

首先感谢jQuery.Select.js的作者张经纬,jQuery.Select.js项目地址:http://www.zhangjingwei.com/archives/jquery-select%E5%8D%95%E9%80%89-%E6%A8%A1%E6%8B%9F%E6%8F%92%E4%BB%B6-v1-3-6/项目中需要使用基于jQuery的Select模拟效果,主要是想实现select的onmouseover事件,而不需要点击在经过时即可进行选择,找了很多没有理想的,最后决定在jQuery.Select.js 1.3.6的基础上改进。下面是增加mouseover事件后的代码: 复制代码 代码如下: /* * jQuery Select Plugins v1.3.6.2 * Copyright 2009 zhangjingwei * Dual licensed under the MIT and GPL licenses. * Date: 2009-11-17 09:37 * Revision: 1.3.6.2 * www.leadwit.com-浪子 modify in 2010-07-26 14:26 */ { $.fn.extend { return this.each{ var selectId = +'__jQSelect'+i||'__jQSelect'+i; if(obj.style.display != 'none' && $[0].id.indexOf{ var tabindex = this.tabIndex||0; $.before("

如何实现一个js版的repeater? Asp.net WebForm的repeater控件挺好用,我想用js实现一个在Ajax应用中也该还不错!半年前做了一个jQuery.Repeater插件,并用在了一个项目中,如今拿来晒晒! 原理 项模板为HTML代码,插件接收json数据源,读取模板并创新每一项。 模板HTML 复制代码 代码如下:

我想着跨域如何解决啊!后来去网上搜索了一下子 恍然大悟 具体如下 我是复制过来了 大家重点理解一下子它的实现思路 : 问题: A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要 a.htm中的iframe自适应大小. 问题本质 : js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不 到b.html的大小. 解决方案: 首先前提是A,B是合作关系,b.html中能引入A提供的js 首先a.html中通过iframe引入了b.html 复制代码 代码如下:

无标题页

").prependTo; var selectZindex = $,selectIndex = $('#'+selectId+' option').index($('#'+selectId+' option:selected')[0]); $.append('

  • {列名}

B在b.html中引入了A提供的js文件 Html代码 复制代码 代码如下:

click me

'); $.empty().append($('#'+selectId+' option:selected').text; var selectWidth=$('#'+selectId+' select').width(); if{selectWidth = selectWidth+15} $.css; var selectUlwidth = selectWidth + parseInt.css + parseInt.css; $.css({width:selectUlwidth+'px'}); $('#'+selectId+' select').hide(); $.hover{ $.addClass{ $.removeClass; var timeobj; $.bind("mouseover",function{ clearTimeout; var click_fun =function(){ $.addClass; $.show(); var selectZindex = $.css; if ($.browser.msie || $.browser.opera){$.css({'position':'relative','z-index':'0'});} $.css({'position':'relative','z-index':'999'}); $.fn.setSelectValue; selectIndex = $.index; var windowspace = + document.documentElement.clientHeight) - $.offset().top; var ulspace = $.outerHeight; var windowspace2 = $.offset.scrollTop() - ulspace; windowspace < ulspace && windowspace2 > 0?$.css:$.css({top:$.outerHeight.scroll{ windowspace = + document.documentElement.clientHeight) - $.offset().top; windowspace < ulspace?$.css:$.css({top:$.outerHeight; $.click{ selectIndex = $.index; $.fn.keyDown; $.empty().append($('#'+selectId+' option:selected').text; $.fn.clearSelectMenu(selectId,selectZindex); e.stopPropagation(); e.cancelbubble = true; }) .hover{ $.removeClass.addClass.addClass; selectIndex = $.index{ $.removeClass; } $ .bind{ //$.fn.clearSelectMenu(selectId,selectZindex); $.addClass .bind{ if.css == 'block'){ $.fn.clearSelectMenu(selectId,selectZindex); return false; }else{ click_fun(); }; e.stopPropagation .bind("mouseover",function{ if.css == 'block'){ //$.fn.clearSelectMenu(selectId,selectZindex); return false; }else{ click_fun(); }; e.stopPropagation .bind("mouseout",function{ if.css == 'block'){ timeobj = setTimeout{ $.fn.clearSelectMenu(selectId,selectZindex); },500); return false; } e.stopPropagation .bind('mousewheel', function { e.preventDefault(); var mousewheel = { $obj : $('#'+selectId+' li.over'), $slength : $('#'+selectId+' option').length, mup:function(){ this.$obj.removeClass; selectIndex == 0?selectIndex = 0:selectIndex--; $.fn.keyDown; }, mdown:function(){ this.$obj.removeClass; selectIndex == ?selectIndex = this.$slength - 1:selectIndex ++; $.fn.keyDown; } } delta>0?mousewheel.mup; }) .bind("dblclick", function(){ $.fn.clearSelectMenu(selectId,selectZindex); return false; }) .bind{ $.bind{ if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){ return false; } }); var $obj = $('#'+selectId+' li.over'),$slength = $('#'+selectId+' option').length; switch{ case 9: return true; break; case 13: //enter $.fn.clearSelectMenu(selectId,selectZindex); break; case 27: //esc $.fn.clearSelectMenu(selectId,selectZindex); break; case 33: $obj.removeClass; selectIndex = 0; $.fn.keyDown; break; case 34: $obj.removeClass; selectIndex = ; $.fn.keyDown; break; case 35: $obj.removeClass; selectIndex = ; $.fn.keyDown; break; case 36: $obj.removeClass; selectIndex = 0; $.fn.keyDown; break; case 38: //up e.preventDefault(); $obj.removeClass; selectIndex == 0?selectIndex = 0:selectIndex--; $.fn.keyDown; break; case 40: //down e.preventDefault(); $obj.removeClass; selectIndex == ?selectIndex = $slength - 1:selectIndex ++; $.fn.keyDown; break; default: e.preventDefault .bind{ $.fn.clearSelectMenu(selectId,selectZindex); return false; }) .bind("selectstart",function; }else if[0].id.indexOf{ selectId = $[0].id; $.fn.setSelectValue; var selectWidth=$('#'+selectId+' select').width(); if{selectWidth = selectWidth+15} $.css; var selectUlwidth = selectWidth + parseInt.css + parseInt.css; $.css({width:selectUlwidth+'px'}); if(this.style.display != 'none'){$}, clearSelectMenu:function(selectId,selectZindex){ if(selectId != undefined){ selectZindex = selectZindex||'auto'; $.empty; $.removeClass.removeClass; $.css({'z-index':selectZindex}); } }, setSelectValue:function{ var content = []; $.each, function{ content.push("

"+$; }); content = content.join.html; $.html($('#'+sID+' option:selected').text.eq[0].selectedIndex).addClass.addClass; }, keyDown:function{ var $obj = $; $obj[0].selectedIndex = selectIndex; $obj.change(); $('#'+sID+' li:eq.toggleClass; $.html($('#'+sID+' option:selected').text; var types = ['DOMMouseScroll', 'mousewheel']; $.event.special.mousewheel = { setup: function() { if ( this.addEventListener ) for ( var i=types.length; i; ) this.addEventListener( types[--i], handler, false ); else this.onmousewheel = handler; }, teardown: function() { if ( this.removeEventListener ) for ( var i=types.length; i; ) this.removeEventListener( types[--i], handler, false ); else this.onmousewheel = null; } }; $.fn.extend({ mousewheel: function { return fn ? this.bind : this.trigger; }, unmousewheel: function { return this.unbind; } }); function handler { var args = [].slice.call, delta = 0, returnValue = true; event = $.event.fix(event || window.event); event.type = "mousewheel"; if delta = event.wheelDelta/120; if delta = -event.detail/3; args.unshift; return $.event.handle.apply; 演示地址 http://demo.jb51.net/js/jQuery.Select/index.html打包下载 //www.jb51.net/jiaoben/21397.html

json数据源格式 自个捣鼓的东西格式就自个做主啦:-D . 如下: {tablename:"表名",rows:[{"列1":"值1"},{"列2":"值2"}.....{"列n":"值n"}]} 扩展原生String对象 为方便使用扩展一个String对象 复制代码 代码如下: //扩展String String.prototype.trim = function() { return this.replace; } // String.prototype.Replace=function { var rs=this.replace,str2); return rs; } 将json字符串转为对象 复制代码 代码如下: //将json数据转为对象 function jsonStringToDataTable{ try{ var table=eval; return table; } catch{ return null ; } } 取网页元素自身HTML源码 由于有些浏览器不支持outerHTML,特写了一个toHTML的小插件。 复制代码 代码如下: //取自身HTML源码的插件. jQuery.fn.extend{ var obj=$; if{ return obj[0].outerHTML; } else{ if($==null || $[0]==null ){ $.append("

该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和 高设置到src的hash里面 Html代码 复制代码 代码如下:

在ie5.5其冒泡顺序如下图

"); } $.css; $.html.prependTo; var rs= $.html(); $.html; return rs; } } }); 插件主要代码 复制代码 代码如下: jQuery.fn.extend({ Repeater:function(val,ItemCreatedCallBack){//设置或取得数据源 this.each{ if(val==null || val==undefined){//如果参数为空返回相应数据 return $.data;//从缓存返回数据 } else{//如果不为空设置数据源。 // try{ var valtype=.toString(); if val =jsonStringToDataTable{ return ; } // var domtype=$.find.attr;//查找元素类型 // if.data==null ){ $.data("_ItemTemplate",$.find.toHTML.find.remove(); } var TrContentTemplate=$.data; // var fileds=____FindFiled;//找到所有列 ifreturn false ; var filedscount=fileds.length;//计算列数 //// $.data; //将数据放入缓存 var count=val.length; for{ ////绑定列值 var NewTrContent=TrContentTemplate; // NewTrContent=NewTrContent.Replace; NewTrContent=NewTrContent.Replace; for( var j=0;j复制代码 代码如下: $.Repeager(data,[ItemCreatedCallBack]); ItemCreatedCallBack 为可选参数,可以说是项创建事件吧! 如何嵌套? 通过ItemCreatedCallBack回调 Demo - HTML模板: 复制代码 代码如下:

a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与 它同域下的a.html中的iframe的宽和高. Js代码 复制代码 代码如下: var pParentFrame = parent.parent.document.getElementById; var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash; pParentFrame.style.width = locationUrlHash.split[0]+"px"; pParentFrame.style.height = locationUrlHash.split[1]+"px"; var pParentFrame = parent.parent.document.getElementById; var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash; pParentFrame.style.width = locationUrlHash.split[0]+"px"; pParentFrame.style.height = locationUrlHash.split[1]+"px"; 这样的话a.html中的iframe就自适应为b.html的宽和高了. 其他一些类似js跨域操作问题也可以按这个思路去解决

在ie6.o以上增加了html 如图:

{列名}

友情链接: 网站地图
Copyright © 2015-2019 http://www.nflfreepicks.net. 新葡萄京娱乐场网址有限公司 版权所有