jquery ui draggable限制拖动区域

评论(0)浏览(534)分类:JavaScript/Ajax开发技巧
jquery ui draggable限制拖动区域  jquery ui draggable如何限制被拖动对象的位置区域,不允许在指定区域内容放置被拖动的对象,如果在禁止区域内容放置对象则还原被拖动对象位置,效果如下。  jquery ui draggable限制拖动区域源代码如下!doctype htmlhtml lang=enheadmeta charset=utf-8titlejquery ui draggable限制拖动区域/titlelink rel=stylesheet href=http://code...

JavaScript调用百度语音朗读信息

评论(1)浏览(533)分类:JavaScript/Ajax开发技巧
JavaScript调用百度语音朗读信息  titleJavaScript利用百度语音服务朗读文字示例/title名字:input type=text id=txtName /br其他:input type=text id=txtOther /input type=button onclick=setSrc() value=朗读/div id=dvAudio/divscript type=text/javascript function setSrc() { var t = (document.getElementById('txtName').value + ' ' + ..

移动到子容器上触发父容器mouseout事件解决办法

评论(0)浏览(533)分类:JavaScript/Ajax开发技巧
移动到子容器上触发父容器mouseout事件解决办法  容器下包含a,select标签,鼠标移动到子容器下都会触发mouseout事件,文本内容,如这里列出来的则不会触发mouseout事件。div style=width:300px;height:200px;border:solid 1px black onmouseout=alert('MOUSEOUT')容器下包含a,select标签,鼠标移动到子容器下都会触发mouseout事件,文本内容,如这里列出来文字的则不会触发mouseout..

百度地图搜索当前用户位置附近停车场示例

评论(0)浏览(530)分类:JavaScript/Ajax开发技巧
百度地图搜索当前用户位置附近停车场示例  百度地图搜索当前用户位置附近停车场,公园,餐馆示例思路就是用BMap.Geolocation类获取经纬度http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b34然后使用BMap.LocalSearch进行搜索停车场http://lbsyun.baidu.com/index.php?title=jspopular/guide/service#.E6.9C.AC.E5.9C.B0.E6.90.9C.E7.B4.A2经测试使用BMap.Geolo..

js判断已经滚动到页面底部

评论(0)浏览(527)分类:JavaScript/Ajax开发技巧
js判断已经滚动到页面底部  js如何判断页面已经滚动到底部!DOCTYPE htmlhtmlhead meta charset=UTF-8 titlejs判断已经滚动到页面底部/title/headbody style=margin:0;padding:0 div id=dvBT style=position:fixed;bottom:0;right:0;background:#fff/div div id=part1 style=height:2000px;overflow: auto;background: lightblue; /div div id=part2 ..

jquery多级下拉菜单插件

评论(0)浏览(527)分类:JavaScript/Ajax开发技巧
jquery多级下拉菜单插件  居于jquery框架的网站多级下拉菜单插件,融合了jquery.color.js,jquery.lavalamp.js,jquery.easing.js 这3个插件,效果如下图link rel=Stylesheet type=text/css href=/menu/menu.css /stylebody{background:#999}/stylediv id=menu ul class=menu li a href=# class=parentspanlevel 1_1/span/a ul ..

选中网页内容弹出按钮点击发送选中内容到服务器

评论(1)浏览(526)分类:JavaScript/Ajax开发技巧
选中网页内容弹出按钮点击发送选中内容到服务器  效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。  实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。  选中网页内容弹出按钮点击发送选中内容到服务器源代码如下script ..

HTML5 history对象新方法pushState/replaceState

评论(0)浏览(518)分类:JavaScript/Ajax开发技巧
HTML5 history对象新方法pushState/replaceState    window.location在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL。    而在JavaScript MVC开始流行之后,通过刷新来修改URL的方法,不禁让人感到烦躁。然而HTML5中就制定了一个这样的API,可以通过方法的方式来修改URL,而又不会使浏览器刷新,就是History API。    熟悉JavaScript开发的同学,对History肯定不会陌..

jquery ajaxForm API使用文档

评论(0)浏览(509)分类:JavaScript/Ajax开发技巧
jquery ajaxForm API使用文档jquery ajaxForm下载地址: http://malsup.github.com/jquery.form.jsjquery ajaxForm API英文原文:http://www.malsup.com/jquery/form/#api  表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。ajaxForm  增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用 ajaxFor..

touchEnd事件不触发解决办法

评论(0)浏览(508)分类:JavaScript/Ajax开发技巧
touchEnd事件不触发解决办法  移动端touchEnd事件不触发解决办法div id=dv style=height:1000px/divscript document.addEventListener('touchstart', function (e) { e.preventDefault()//不增加这句touchend不会触发 }, false); document.addEventListener('touchend', function (e) { document.getElementById('dv').i..

IE css expression中获取scrollTop属性

评论(0)浏览(497)分类:JavaScript/Ajax开发技巧
IE css expression中获取scrollTop属性  今天在做一个浮动效果,由于IE6-不支持position:fixed,所以就对IE6-浏览器可以考虑使用IE专有css行为expression+position:absolute来实现。下面的代码全部在IE6-浏览器下测试。  HTML结构div class=ieexp浮动层/div  开始定义样式如下.ieexp{top:expression(document.body.scrollTop);left:0px;}  结果发现浮动层在IE下固定在了顶部,..

kindeditor预览窗口如何全屏显示

评论(0)浏览(496)分类:JavaScript/Ajax开发技巧
kindeditor预览窗口如何全屏显示  如何修改kindeditor预览窗口全屏实现,kindeditor的预览窗口不是全屏的,如果要改为全屏预览,可以修改kindeditor\plugins\preview\preview.js文件如下即可实现全屏预览(注意修改窗口大小是不会自适应的,只是点击预览按钮时当前窗口大小)。/******************************************************************************** KindEdito..

文字查询焦点效果

评论(0)浏览(490)分类:JavaScript/Ajax开发技巧
文字查询焦点效果  文字查询效果,js自动设置查询条件焦点样式,如下图所示  文字查询效果,js自动设置查询条件焦点样式源代码如下,需要导入jquery框架style a{text-decoration:none} a.cur{background:#00afc7;color:#fff;font-weight:bold;}/stylediv id=dvFilter!--查询条件,容器div增加rel属性存储次条件的查询键名称,连接只需要生成此查询的键..

扩展IE下的input selectionStart selectionEnd属性

评论(0)浏览(490)分类:JavaScript/Ajax开发技巧
扩展IE下的input selectionStart selectionEnd属性  firefox有selectionStart和selectionEnd属性,指示被选择的内容的开始和结束位置,如果没有选择,则selectionStart和selectionEnd一样。IE没有selectionStart selectionEnd属性,可以使用下面的代码扩展。+展开-HTMLinputonclick="selStart(this)"value="1,22,333,2,322,6,3321"/scripttype="text/javascript"functionselStart(o){if(docume..

document.createElement创建iframe在IE兼容模式无法指定target问题

评论(0)浏览(483)分类:JavaScript/Ajax开发技巧
document.createElement创建iframe在IE兼容模式无法指定target问题  使用document.createElement创建的iframe对象,在IE兼容模式(包括ie10),IE7-浏览器下运行时,无法在DOM对象中生成name属性(但是却可以获取到name属性为设置的内容,IE真是个大bug),而是变成了一个自定义属性submitName。所以链接对象,表单如果通过target指向这个iframe,那么会在新窗口打开,而不是在document.createElement创建的if..

javascript图片震动效果jQuery插件

评论(0)浏览(473)分类:JavaScript/Ajax开发技巧
javascript图片震动效果jQuery插件  javascript实现图片抖动,使用jquery实现。  插件配置说明during:图片抖动间隔计时器时间,越小抖动越快,默认100msrange:抖动频率,越大抖动的记录越大,默认10pxstart:抖动开始前执行的回调,默认空函数体function(){}end:抖动结束后执行的回调,默认空函数体function(){}dir:方向,left(左右抖动)/top(上下抖动),默认左右  测试..

IE8+只有在xhtml模式下才支持JSON对象

评论(0)浏览(473)分类:JavaScript/Ajax开发技巧
IE8+只有在xhtml模式下才支持JSON对象  标准浏览器如chrome,firefox都支持JSON对象,将json对象转为对应json格式的字符串(JSON.stringify)或者将json格式的字符串转为json对象(JSON.parse)。  IE8+浏览器也支持JSON对象,但是是有条件的,需要添加xhtml申明或者使用X-UA-Compatible指定为IE8或者edge模式,X-UA-Compatible要放对位置,要不有可能无效。参考:IE X-UA-Compa..

select多选option左右上下移动示例

评论(0)浏览(472)分类:JavaScript/Ajax开发技巧
select多选option左右上下移动示例  select多选option在2个select间左右移动,将选中的option上下移动示例titleselect多选option左右移动示例_JavaScript/Ajax_Web开发网/titletable border=1 tr td select multiple size=10 id=s1 script for (var i = 0; i 15; i++) document.write('option' + i + '/..

jquery.ui.autocomplete.js输入中文无法显示匹配项

评论(0)浏览(468)分类:JavaScript/Ajax开发技巧
jquery.ui.autocomplete.js输入中文无法显示匹配项  如果你使用jquery.ui.autocomplete.js自动完成插件功能,输入中文字符没有出现匹配的信息,那么50%的可能是出现了乱码(当然不排除动态页出错之类的)。  要将加载jquery.ui.autocomplete.js插件页面,数据源统一为utf-8编码,并且2个页面的存储编码也要为utf-8(记事本打开,另存为,编码选择utf-8,保存替换原来的文件)  从jqueryui...

JavaScript调用百度地图显示驾车,步行导航示例

评论(0)浏览(462)分类:JavaScript/Ajax开发技巧
JavaScript调用百度地图显示驾车,步行导航示例  JavaScript调用百度地图显示驾车,步行导航示例JavaScript调用百度地图显示驾车,步行导航示例源代码如下htmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=viewport content=initial-scale=1.0, user-scalable=no / style type=text/cssbody, html {width: 100%;height: 100%; margin:0;font-f..

bootstrap datetimepicker控制可选时间区域

评论(0)浏览(461)分类:JavaScript/Ajax开发技巧
bootstrap datetimepicker控制可选时间区域  bootstrap datetimepicker插件如何控制可选择的时间区域,bootstrap datetimepicker插件如何禁用不用选时间区域。  解决办法:给bootstrap datetimepicker添加changeDate事件,获取选择的小时数据部分增加判断,不符合选择的时间区域清空选中的值。  bootstrap datetimepicker控制可选时间区域源代码如如下,只能选择8~21点之间的时间$(..

JavaScript获取执行flash中flash.external.ExternalInterface.addCallback注册的函数

评论(1)浏览(458)分类:JavaScript/Ajax开发技巧
JavaScript获取执行flash中flash.external.ExternalInterface.addCallback注册的函数  JavaScript如何获取并且执行flash中flash.external.ExternalInterface.addCallback注册的函数    测试浏览器:IE6,IE7,IE8,Firefox3.6,谷歌chrome 14.0.835.202 mAS脚本function loadPicture(){//......代码......//......代码......}flash.external.ExternalInterface.addCallback(forJS, null, loadPicture);//注册JavaScript中调用的..

js图片浮动碰浏览器边界反弹效果

评论(0)浏览(456)分类:JavaScript/Ajax开发技巧
js图片浮动碰浏览器边界反弹效果  js图片浮动,碰到浏览器编辑自动反弹向方向运动效果。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html head title图片浮动/title style #img{ position:absolute; } /style /head body img src=http://avatar...

kindeditor如何保留源代码中的脚本

评论(0)浏览(450)分类:JavaScript/Ajax开发技巧
kindeditor如何保留源代码中的脚本  默认kindeditor在源代码视图中粘贴的脚本代码,在切换到设计视图或者提交到服务器前会脚本代码自动被删除,无法保留。  要想保留源代码视图中输入的脚本代码,可以配置filterMode: false,这样在切换到设计视图或者提交到服务器时仍然可以保留脚本内容。不过开启这个配置允许编辑器输入源代码比较危险,存在XSS漏洞。var editor;KindEdito..

javascript计算器

评论(0)浏览(441)分类:JavaScript/Ajax开发技巧
javascript计算器  JavaScript实现的简单计算器功能,界面如下  javascript计算器源代码如下script type=text/javascript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js/scriptstyle #calc{padding:10px;background:#f1f1f1;width:201px} #display{border:solid 1px #ccc;margin-bottom:5px;padding:5px} #up,#down{height:20px;..

ajax对象abort方法

评论(0)浏览(441)分类:JavaScript/Ajax开发技巧
ajax对象abort方法  ajax对象的abort()方法可以停止一个XMLHttpRequest对象对HTTP的请求,把该对象恢复到初始状态。  例如,如果某个操作需要一系列的操作顺序完成,而这其中出现任何异常,都会导致当前操作的结束,当检测到某个步骤出现异常时,使用abort()方法,中止当前的处理。

JavaScript apply与call的用法意义及区别

评论(0)浏览(440)分类:JavaScript/Ajax开发技巧
JavaScript apply与call的用法意义及区别JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。先来看看JS手册中对call的解释:call 方法调用一个对象的一个方法,以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg2,, argN可选项。将被传递方法参数序列。说明call 方法可以用来代替另一个..

javascript cloneNode无法复制事件

评论(0)浏览(438)分类:JavaScript/Ajax开发技巧
javascript cloneNode无法复制事件  在标准浏览器(firefox,chrome,非IE核心的)下,cloneNode(true)是不复制事件的,以防止循环引用无法释放内存,而IE却没有考虑到这一点,把事件复制了(inconformity),并且IE只能复制通过attachEvent添加的事件,直接通过domNode.onclick添加的事件也无法复制。  测试代码如下script window.onload = function () { functio..

javascript获取查询参数键值对

评论(0)浏览(437)分类:JavaScript/Ajax开发技巧
javascript获取查询参数键值对  javascript将get提交的查询参数对初始化为hashtable。  注意:下面的代码中键名称只能是数字和字母的组合,如果不是数字和字母注意修改正正则表达式。+展开-JavaScriptvars=location.search;//查询参数字符串varRequest={};//初始化Request对象functionInitRequest(){varm,reg=/([a-z\d]+)=([^&]+)/gi;s=s==''?'':s.substring(1);while(m=..