Chrome扩展开发教程(三)Browser Action(扩展图标)

评论(0)浏览(676)分类:JavaScript/Ajax开发技巧
Chrome扩展开发教程(三)Browser Action(扩展图标)文章翻译自http://code.google.com/chrome/extensions/browserAction.html,介绍Browser Action,即右侧的扩展图标。Browser Actions的作用就是控制Chrome地址栏右侧添加一个图标。除了给chrome增加一个图标的功能外,还可以设置提示文字、图标标记、弹出窗口。下图中,在地址栏右侧的彩色图标就是一个Browser Action。Browser Actions创建的图标..

网站未发布,ajax能请求的本地资源有哪些

评论(0)浏览(674)分类:JavaScript/Ajax开发技巧
网站未发布,ajax能请求的本地资源有哪些  网站发布,通过http协议访问时,由于浏览器安全问题1)js不允许访问本地文件2)ajax请求也不能访问跨域的页面。3)firefox下端口不一致也会导致跨域  解决办法就是做代理或者使用jsonp操作。参考:AJAX 跨域解决办法  网站未发布,本地file协议测试【就是直接双击打开或者拖拽进入浏览器中】时,有以下几种情况  假设目录结构如下r..

jquery文档处理方法append,html可以执行脚本

评论(0)浏览(673)分类:JavaScript/Ajax开发技巧
jquery文档处理方法append,html可以执行脚本  今天才发现原来jquery文档处理方法如append,html,before等方法可以执行内容中的script标签中的javascript脚本或者加载src指向的脚本文件,真是失败啊,用了那么久jquery...注意:text方法除外,text方法会将html标签中的替换为对应的实体对象  jquery源代码中部分文档处理方法如下 append: function() { return this.domManip..

JavaScript限制输入框只允许输入数字和符号,小数点

评论(0)浏览(672)分类:JavaScript/Ajax开发技巧
JavaScript限制输入框只允许输入数字和符号,小数点  JavaScript限制输入框只允许输入数字和符号,小数点,不允许输入其他内容,并且输入符号后不能在前面输入数字,小数点同理。titleJavaScript限制输入框只允许输入数字和符号,小数点/titleinput type=text onkeydown=return checkKeyCode(event,this) style=ime-mode: disabled; /script function getCursorPosition(el) {//获取光标位置..

扩展JavaScript trim,trimStart,trimEnd方法

评论(0)浏览(664)分类:JavaScript/Ajax开发技巧
扩展JavaScript trim,trimStart,trimEnd方法  javascript没有类型C#的Trim,TrimStart,TrimEnd方法去除空白字符或者指定的字符,需要自己扩展javascript的string类型的prototype增加string类型的Trim,TrimStart,TrimEnd方法。  源代码如下,来源:http://code.google.com/p/vegas/var FRL = {};FRL.strings = {};FRL.strings.whiteSpaceChars = [ \u0009 /*Horizontal tab*/ , ..

javascript函数属性caller和arguments callee介绍

评论(0)浏览(660)分类:JavaScript/Ajax开发技巧
javascript函数属性caller和arguments callee介绍callercaller返回一个函数的引用,这个函数调用了当前的函数。使用这个属性要注意:1 这个属性只有当函数在执行时才有用2 如果在JavaScript程序中,函数是由顶层调用的,则返回nullfunctionName.caller: functionName是当前正在执行的函数。script var a = function () { alert(a.caller); } var b = function () { a(); ..

jquery水平方向平铺焦点图

评论(0)浏览(652)分类:JavaScript/Ajax开发技巧
jquery水平方向平铺焦点图  jquery实现的水平方向平铺占满显示视窗效果。当视窗大小改变时,自动变换焦点图显示的区域。目前焦点图支持2个方向的滚动,水平和垂直滚动。  jquery水平方向平铺焦点图插件测试代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitlejquery水平方向平铺焦点..

ajax指定为post但是未设置content-type或未指定键时时如何获取提交的内容

评论(2)浏览(652)分类:JavaScript/Ajax开发技巧
ajax指定为post但是未设置content-type或未指定键时时如何获取提交的内容  今天在CSDN看到一个ajax指定了提交方式为post,但是设置了content-type为text/plain的时,如何在提交的页面获取提交值的问题。由于content-type为text/plain,动态页并未帮你处理成键值对的形式,所以你得自己使用2进制流数据生成对应的string类型的数据。  1)要生成键值对形式,你得指定content-type为“application/x-www-form-urlenco..

Range对象中文API

评论(0)浏览(649)分类:JavaScript/Ajax开发技巧
Range对象中文APIThe Range接口代表给定的文档的一个片段,这个片段包含节点集合和部分文本节点集合。Range可以通过document对象的createRange方法创建,可以通过Selection的getRangeAtgetRangeAt方法获取到。也可以通过 Range() 构造函数来生成。Range属性Range.collapsed :只读返回 Boolean值只是Range开始和结束点是否重合。Range.commonAncestorContainer :..

javascript正则全局匹配g慎用test方法

评论(0)浏览(647)分类:JavaScript/Ajax开发技巧
javascript正则全局匹配g慎用test方法  使用javascript的正则表达式时,如果使用test方法,需要慎用全局匹配g选项,因为多次调用test方法时会从上一次匹配的位置开始匹配,可能会导致无法匹配的错误问题,即使内容符合正则表达式要求,但是调用test方法测试时输出的为false,而不是true  来看一道JavaScript题目,据说是国内某知名互联网企业的JavaScript笔试题,如果对正则的全..

如何自定义html5新类型表单错误信息

评论(0)浏览(642)分类:JavaScript/Ajax开发技巧
如何自定义html5新类型表单错误信息  HTML5 input元素新增了很多新类型,如number,tel,email,url等类型,如指定input的type为email,浏览器还会自动验证输入输入的有效性,不是有效的email地址浏览器会自动提示错误信息。如下图所示email:input type=email/图1  错误的样式是浏览器自定义的,如果你想自定义错误控件的样式,可以使用css3的:invalid伪类style input.emai..

精简版jquery lazyload实现真正的延时图片加载

评论(0)浏览(636)分类:JavaScript/Ajax开发技巧
精简版jquery lazyload实现真正的延时图片加载  本次修改基于jquery.lazyload.js 1.5版本,删除了一些配置项,只保留了effect和placeholder配置,并且指定容器为window。  使用注意事项1)要实现真正的延时加载,将图片的src设置为默认的替换图片,实际的图片地址存储到自定义属性original如img src='替换的图片地址,1px_1px' original='实际图片地址'/2)如果没有按照..

dTree节点查找展开收缩示例

评论(0)浏览(634)分类:JavaScript/Ajax开发技巧
dTree节点查找展开收缩示例  dTree示例,带查找节点,展开收缩查找到得节点功能,dTree下载:dTree.js下载+API文档  示例实现节点查找,并展开输入的关键字的节点展开dTree包含关键字的节点搜索dTree包含关键字节点  源代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhtmlheadtitledTree示例,带..

Highcharts如何设置xAxis轴某条线的颜色

评论(0)浏览(634)分类:JavaScript/Ajax开发技巧
Highcharts如何设置xAxis轴某条线的颜色  Highcharts如何设置xAxis水平轴某条线的颜色源代码。Highcharts使用vml(IE8-)或者svg(标准浏览器)进行绘图的,x水平轴的的对象是shape(vml)或者path(svg)来绘制。所以只需要使用导入的jquery框架找到指定的对象就可以更改颜色了。  本示例居于Highcharts-4.0.4,测试DEMO为下载压缩包中的examples\line-basic\index.htm这个事例,..

javascript unbeforeunload/unload事件注意事项

评论(0)浏览(621)分类:JavaScript/Ajax开发技巧
javascript unbeforeunload/unload事件注意事项  javascript中给window注册unbeforeunload/unload事件时,不要给事件添加alert,confirm等语句,高版本的浏览器如chrome【webkit核心】,IE9+等会拦截这些语句的执行。来源:http://stackoverflow.com/questions/6063522/jquery-beforeunloadIf you want to run a function as the page is unloading, you can use $(window).unload(), just ..

javascript获取遮盖层被点击时下面的DOM对象

评论(0)浏览(617)分类:JavaScript/Ajax开发技巧
javascript获取遮盖层被点击时下面的DOM对象  今天在csdn看到一个问题:整个网页用div遮住,鼠标点击上面的div怎么获得鼠标下面遮住的HTML元素  思路:计算页面内所有的DOM对象的范围存储在一个数组中,在点击遮盖层的时候获取鼠标点击坐标,然后遍历数组判断点击坐标是否在数组对象的范围之内,是则返回这个对象。  示例代码如下style/stylediv style=width:200px;height:100px;我是..

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

评论(0)浏览(614)分类: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 ..

图片分割左右/上下分离效果

评论(0)浏览(613)分类:JavaScript/Ajax开发技巧
图片分割左右/上下分离效果  居于jquery的图片水平或者垂直分割后,设置左右或者上下分离效果。  图片分割左右/上下分离效果源代码如下!doctype htmltitle图片分割左右/上下分离效果/titlescript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js/scriptstyle .slider{width:670px;height:560px;overflow:hidden;position:relative;background-repe..

html编辑器回车换行如何指定为br

评论(0)浏览(613)分类:JavaScript/Ajax开发技巧
html编辑器回车换行如何指定为br  用iframe作为html编辑器或者web编辑器的容器时,如果不做特殊处理,不同浏览器下对回车的生成的html代码不全相同(主要是低版本的IE浏览器,如IE8-)。firefox和chrome对回车生成的html代码是br,而IE下是P标签。  要想规范html编辑器响应回车按键,生成统一的标签,如br换行,可以给iframe编辑器容器添加keydown事件,阻止默认的浏览器事..

javascript解码16进制\x\u编码

评论(0)浏览(608)分类:JavaScript/Ajax开发技巧
javascript解码16进制\x\u编码  javascript解码\x\u格式的16进制编码。script function hexToString(str) { var mc = str.match(/\\x[a-z\d]{2}|\\u[a-z\d]{4}/gi); var val = ''; for (var i = 0, j = mc.length; i j; i++) { val += String.fromCharCode(parseInt(mc[i].substring(2), 16)); } return val; ..

js文字查询条件选择查询效果

评论(0)浏览(604)分类:JavaScript/Ajax开发技巧
js文字查询条件选择查询效果  js实现类似京东的查询条件选择效果。titlejs实现类似京东的查询条件选择效果/titlestyle div.condition{border:solid 1px #eee;} div.condition a{margin-right:10px} div.condition a.selected,div.condition a:hover{background:#0094ff;color:#fff;}/stylescript src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.j..

jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜

评论(1)浏览(604)分类:JavaScript/Ajax开发技巧
jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜  一款居于jquery框架的焦点图插件,有幻灯片过渡效果,模拟IE滤镜,完全兼容firefox,chrome浏览器,不需要使用IE下的滤镜。原理依据spw/sph的配置,在容器上生成spw*sph个块(宽和高依据容器计算得出),这些块的背景设置为下一张要显示的图片,依靠background-position控制每个块显示下一张图片的某个区域,让这些块组合起来显示为下一张图..

js判断是否为IE11浏览器

评论(0)浏览(603)分类:JavaScript/Ajax开发技巧
js判断是否为IE11浏览器  IE11的navigator里面已经不包含MSIE字符串,window.ActiveXObject也不再支持。要判断是否IE11浏览器,可以使用下面的代码IE11的navigator.userAgent输出为:Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; Media Center PC 6.0; rv:11.0) like Gecko function isIE() { //ie? if (!!window.ActiveXObje..

js用flash方法报错:Error: Error calling method on NPObject!

评论(0)浏览(598)分类:JavaScript/Ajax开发技巧
js用flash方法报错:Error: Error calling method on NPObject!  javascript调用flash使用flash.external.ExternalInterface.addCallback注册的方法时,出现了Error: Error calling method on NPObject!错误。  网上找了下说是安全问题uncaught exception: Error calling method on NPObject! [plugin exception: Error in Actionscript. Use a try/catch block to find error.]默认actionscript中不允许..

javascript自动格式化输入的数字金额

评论(1)浏览(596)分类:JavaScript/Ajax开发技巧
javascript自动格式化输入的数字金额  需求:javascript自动格式化输入的数字金额,每3位数字后面增加一个,逗号分隔开,失去焦点后自动删除逗号,防止数据库写入数字类型的字段时出错,获取焦点或者输入的时候自动格式化金额。效果如下源代码如下script function formatter(o, blur) { o.value = o.value.replace(/[^\d]/g, '');//删除非数字的内容,防止乱输入..

offsetParent属性介绍

评论(0)浏览(589)分类:JavaScript/Ajax开发技巧
offsetParent属性介绍  offsetParent属性,在IE有那么几种模式,offsetParent.tagName返回的到底是什么,经过测 试,以某元素A为例,如果A是body元素,返回的是null。得到结果如下图所示:  说明:diplay为空表示元素显示不是none;position这列中的self,father,grandfather,root是 指元素A自身,A的父元素,一直到A的根元素。offsetParent和position是否定位,d..

IE6的navigator.userAgent输出MSIE 7

评论(0)浏览(585)分类:JavaScript/Ajax开发技巧
IE6的navigator.userAgent输出MSIE 7  通过javascript判断浏览器版本时,一般是通过navigator对象的userAgent或者appVersion属性,但是在xp系统下的IE6,navigator.userAgent和navigator.appVersion尽然会是MSIE 7.0,无语了。XP系统版本为Professional 2002,打了SP3补丁。  以后判断浏览器版本最好还是不要用navigator.userAgent和navigator.appVersion,怪不得今天加载的js通..

获取ztree增加删除节点后的数据

评论(0)浏览(583)分类:JavaScript/Ajax开发技巧
获取ztree增加删除节点后的数据  对ztree进行增加删除操作后,如何获取ztree此时的数据源。  获取ztree的数据源很简单,调用getNodes获取所有节点,此时得到的节点是嵌套的json数据结构(非简单) var treeObj = $.fn.zTree.getZTreeObj(treeDemo); var nodes = treeObj.getNodes(); console.log(nodes);  打印节点后你会发现会多出了很多其他属性,是ztree节点..

手机浏览器javascript事件,css总结

评论(0)浏览(576)分类:JavaScript/Ajax开发技巧
手机浏览器javascript事件,css总结1. viewport:  也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个:width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素)heigh..

jquery ui draggable限制拖动区域

评论(0)浏览(570)分类: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...