移动端touch事件和事件参数详解

评论(1)浏览(1426)分类:JavaScript/Ajax开发技巧
移动端touch事件和事件参数详解什么是touch事件  touch事件是移动端触屏设备上的事件,当用户触摸屏幕及进行一系列操作时发生的事件。 包含touchstart, touchmove, touchend事件。touch事件模式  touch事件同其他dom事件一样(因为本身就属于dom事件,只不过用在触屏设备的新增html5事件),用 addEventListener绑定,在事件处理时使用e.prevantDefault()来阻止默认事件执..

data:image/gif;base64设置图片路径及控件背景

评论(0)浏览(1405)分类:JavaScript/Ajax开发技巧
data:image/gif;base64设置图片路径及控件背景   data:image/gif;base64设置图片路径及控件背景,这算是一种图片路径的新写法。将图片进行编码,然后存在文档中。各自含义如下:data: ----获取数据类型名称image/gif; -----指数据类型名称base64 -----指编码模式AAAAA ------指编码以后的结果。background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是im..

jqgrid自动滚动数据内容demo

评论(0)浏览(1401)分类:jqGrid中文API
jqgrid自动滚动数据内容demo  如果jqgrid一次行加载的数据太多,而不想通过拖动滚动条来查看数据,需要javascript代码自动滚动滚动条,实现数据自动滚动展示,可以通过下面的办法实现。  jqgrid数据加载生成完毕后(gridComplete事件),获取数据数据的容器,用计时器来设置容器的scrollTop来实现。jqgrid的数据容器样式为.ui-jqgrid-bdiv,获取这个div。  jqgrid自动..

jqGrid如何使用jQuery UI

评论(0)浏览(1395)分类:jqGrid中文API
jqGrid如何使用jQuery UISortable Columns(可排序列)  这个方法已经集成在jqGrid中,所有不需要附加的其他内容。这个方法通过鼠标点击对列表头对行进行重新排序,只需要在设置jqGrid的sortable为true即可,示例代码如下jQuery(document).ready(function(){ jQuery(#list).jqGrid({ url:'example.php', datatype: 'xml', mtype: 'GET..

jqGrid导入和导出

评论(0)浏览(1393)分类:jqGrid中文API
jqGrid导入和导出  有些时候将表格的全部配置导入或者导出到另外一种格式将比较有用在服务器端构造的表格,在排序或者分页后可以重新构造,所以如果需要,不同的配置可以立马启用可以通过服务器端构造表格视觉,然后从xml字符中加载表格的配置可以作为xml保存到数据库中,然后从数据库中加载  jqGrid可以一次性加载配置和数据。安装要使用这个方法,需要在下..

IE7+浏览器下XMLHttpRequest跨域请求安全配置

评论(0)浏览(1388)分类:JavaScript/Ajax开发技巧
IE7+浏览器下XMLHttpRequest跨域请求安全配置  IE7+浏览器已经开始支持XMLHttpRequest对象,当使用XMLHttpRequest请求不同源的文件(不同域名的页面),和浏览器是否启用安全-》internet区域的通过域访问数据源有关系。如果启用了此选项,那么所有跨域的页面都可以访问,即使跨域的页面没有设置过Access-Control-Allow-Origin响应头。如果禁用了通过域访问数据源,跨域页面设置过Access-Co..

jquery1.5+ ajax跨域请求在IE下没反应分析

评论(0)浏览(1387)分类:JavaScript/Ajax开发技巧
jquery1.5+ ajax跨域请求在IE下没反应分析  jquery1.5+重写过ajax代码,增加了跨域判断(自动判断ajax请求的url地址是否和当前访问的页面同源,jquery1.4-版本没有增加跨域判断,所以直接发送ajax请求,这样就和浏览器的安全设置有关了),jquery1.5+如果跨域访问并且不支持跨域请求(这些都是jquery代码自动判断的),就不会发送ajax请求(所以浏览器安全设置被忽略),导致没有触发任..

浏览器Html5 Video支持的视频格式

评论(0)浏览(1363)分类:HTML/CSS兼容/XML
浏览器Html5 Video支持的视频格式  浏览器Html5 Video标签支持的视频格式:浏览器 | 影音格式Ogg TheoraMP4(H.264)WebMMicrosoft Internet Explorer9╳○╳Mozilla Firefox5+○╳○Google Chrome13+○○○Apple Safari5+╳○╳Opera11+○╳○从上表中可以知道,只要准备好Mp4与Ogv二种影音格式即可兼容所有支持video标签的浏览器。 video width=640 height=360 preload co..

Ext设置selModel(复选框选择)双击编辑如何恢复默认选中的数据库

评论(0)浏览(1363)分类:extjs开发技巧
Ext设置selModel(复选框选择)双击编辑如何恢复默认选中的数据库  Ext如果添加了selModel,可以选择数据行,同时添加Ext.grid.plugin.RowEditing设置双击进行编辑时,双击数据行编辑会导致之前选中的数据行被取消选择,可能是冲突了(也许可以配置其他选项来解决冲突,但是没找到)。选中数据行双击编辑后导致选中的数据行被取消选中解决办法:Ext.grid.plugin.RowEditing添加beforeedit事件保存勾选状态,然..

获取iframe中鼠标事件在父页的坐标位置

评论(0)浏览(1354)分类:JavaScript/Ajax开发技巧
获取iframe中鼠标事件在父页的坐标位置  如果在iframe中单击鼠标时,使用event.clientX和event.clientY获取到的是点击的位置相对于iframe的坐标位置,并非是相对于父页的,所以如果要获取相对于父页的坐标位置,就需要加上iframe的绝对位置x和y,这样才是相对于父页的坐标位置。  换算关系:相对坐标x=iframe绝对x位置+iframe内触发的鼠标x位置。  注意事项:由于要使用到父页..

修改input file控件默认浏览文字

评论(0)浏览(1353)分类:HTML/CSS兼容/XML
修改input file控件默认浏览文字  如何修改html input file控件默认的浏览(firefox和ie)或者选择文件(chrome)显示内容。解决办法:用一个透明的file控件浮动到你的自己的提示文字或者图片上即可。注意:IE下必须要调整默认的按钮位置对到你的文字上,前面显示文件路径的那部分覆盖住提示文字需要双击才能弹出文件选择窗口。自己调整input的font-size属性变换file控件大小..

DOM对象旋转插件jquery.rotate.js

评论(0)浏览(1334)分类:JavaScript/Ajax开发技巧
DOM对象旋转插件jquery.rotate.js  jQuery 插件jquery.rotate.js,可以实现DOM对象旋转效果。jquery.rotate.js支持所有主流浏览器,包括 IE6。如果你想在低版本的 IE 中实现旋转效果,那么jquery.rotate.js是一个很好的选择。jquery.rotate.js参数参数类型说明默认值angle数字旋转一个角度0animateTo数字从当前的角度旋转到多少度0step函数每个动画步骤中执行的回调函数,当前..

easyui DateBox/combobox配置为readonly后无法弹出日期选择层

评论(0)浏览(1327)分类:easyui开发技巧
easyui DateBox/combobox配置为readonly后无法弹出日期选择层  easyui的DateBox配置readonly后,点击控件日期图标无法弹出日期选择层解决办法。combobox,combo对象也一样配置readonly无法弹出选择内容的层。  解决办法就是给easyui生成的datebox,combobox的dom对象的图标按钮添加click事件,动态调用showPanel方法。input class=easyui-datebox readonly /input class=easyui-datebox readonly /input..

IE8-如何获取input光标所在位置(selectionstart)

评论(0)浏览(1325)分类:JavaScript/Ajax开发技巧
IE8-如何获取input光标所在位置(selectionstart)  IE9+和标准浏览器支持输入对象的selectionStart属性,可以获取到光标所在输入空间中的位置,IE8-要想获取光标所在位置(selectionstart属性),需要使用range对象。  IE8-如何获取input光标所在位置(selectionstart)源代码如下input type=text id=txt value=1234567 /input type=button value=获取text光标位置 onclick=alert(getCaret(..

jQuery jsonp跨域原理

评论(0)浏览(1309)分类:JavaScript/Ajax开发技巧
jQuery jsonp跨域原理  实际上单jQuery还是实现不了跨域加载数据的,由于XMLHttpRequest的安全设置,是不允许直接跨域的。jQuery的jsonp虽然能跨域,但是还得请求的页面支持才行,如果请求的页面不理会jQuery发送的参数,是无法跨域的,实际上来说是获取不到输出的页面内容。  jQuery jsonp跨域原理实际就是使用script标签加载配置对象中的跨域url,再使用script..

jQuery仿excel表格单元格合并插件

评论(2)浏览(1306)分类:JavaScript/Ajax开发技巧
jQuery仿excel表格单元格合并插件2017-8-3更新:修复已经执行过合并操作的table,单元格选择及合并不正确。  jQuery表格单元格合并插件,将合并后的所有单元格内容到第一个单元格中,支持已经被合并的多单元格的选择合并,功能和excel单元格合并功能一样。  jQuery防excel表格单元格合并插件源代码如下script type=text/javascript src=https://cdn.bootcss.com/jquery/1.7...

JavaScript本地存储(DOM Storage,Local Storage)

评论(0)浏览(1300)分类:JavaScript/Ajax开发技巧
JavaScript本地存储(DOM Storage,Local Storage)  DOM Storage是在网络客户端存储键值对数据的一个标准。这使离线的网络应用的开发变得更加实际和简单。  跟它看起来非常相似的另外一个就是cookies了,但是它在某些方面比cookies有很大的优势。1. 更大的存储空间。cookies的大小大约限制在4KB左右,而DOM Storage则在10MB左右,实用性大大提高。2. 能够真正的持久化到本地。cookies并没有提..

js文件三斜杠注释///reference path用途

评论(0)浏览(1298)分类:JavaScript/Ajax开发技巧
js文件三斜杠注释///reference path用途  编辑某个js文件时,要想这个js文件出现其他js成员的ide提示,可以再js文件开头使用3个斜杠注释和reference指令的path指向此js文件路径,这样在编写这个js文件时,ide就会自动出现path指向的js文件中的成员。  如导入jquery框架,在vs2013中编写js文件时,jquery的标志性字符$就会自动出现在ide中,并且其方法也会一起ide提示,大大加快代码..

javascript将html代码绘制为图片

评论(0)浏览(1296)分类:JavaScript/Ajax开发技巧
javascript将html代码绘制为图片  javascript如何将html代码转为图像,示例使用到了html2canvas这个类库,将html dom对象绘制到canvas中,然后在调用canvas的toDataURL得到图片base64字符串内容,设置img的src为toDataURL返回的内容即可显示html对应的图片。如果需要保存图片,需要自己将base64内容到服务器端进行2进制转换保存为图片后设置content-disposition为attachment进..

ckeditor自动填满容器

评论(0)浏览(1293)分类:JavaScript/Ajax开发技巧
ckeditor自动填满容器  ckeditor设置了高度为100%百分比时并不会自动将容器填充满,通过firebug查看生成的ckeditor代码结构后,如下图,编辑器的td设置了高度为height:100%的样式,但是并没有实现容器的完整填充。  ckeditor有自动全屏的功能,如果是想自动填充整个显示窗口,而不是指定的容器,可以通过调用CKEDITOR.instances.content.execCommand('maximi..

简易flv播放器jquery.jflv.js

评论(0)浏览(1287)分类:JavaScript/Ajax开发技巧
简易flv播放器jquery.jflv.js  简易flv播放器,可用通过js控制flv播放,暂停。具体参考下面的示例说明,已经做成jquery插件形式。注意:要用js控制flv的播放停止,需要将示例发布后,通过http访问,要不会报错:uncaught exception: Error in Actionscript. Use a try/catch block to find error.Line 0  jquery.jflv.js示例及使用说明文档html xmlns=http://www.w3.org..

json.js与jquery冲突too much recursion/Stack Overflow

评论(0)浏览(1275)分类:JavaScript/Ajax开发技巧
json.js与jquery冲突too much recursion/Stack Overflow  json.js文件和jquery序列化JSON对象为键值对的方法param产生冲突,导致json.js文件中的toJSONString方法重复调用自身从而堆栈溢出出现too much recursion【firefox】/Stack Overflow【IE浏览器】错误。  产生too much recursion/Stack Overflow这个问题主要是jquery调用ajax方法时,如果参数为json对象,jquery会调用param方法序列化json对..

flipsnap.js模仿手机滑动效果

评论(0)浏览(1275)分类:JavaScript/Ajax开发技巧
flipsnap.js模仿手机滑动效果  flipsnap.js是一款模拟手机浏览器滑动效果的类库,支持电脑上鼠标按下滑动和手机浏览器触摸滑动效果flipsnap.js使用指南1,导入flipsnap.js类库(flipsnap.js不依赖其他js类库)script src=flipsnap.js/script2,编写html代码html代码示例如下,外层html样式为.viewport,内层元素样式为.flipsnap。div class=viewport div class=flipsna..

Ext.tree.Panel显示checkbox并且级联选择或者取消选择

评论(0)浏览(1261)分类:extjs开发技巧
Ext.tree.Panel显示checkbox并且级联选择或者取消选择  ext4,ext5 Ext.data.TreeStore如何显示复选框checkbox,勾选复选框checkbox时如何级联选中子节点的复选框。  ext4,ext5实现check tree级联选择源代码如下提示:checkchange事件参数node,5+返回的是Ext.data.TreeModel,ext4是Ext.data.NodeInterface对象 Ext.onReady(function () { store = Ext.create('Ext.data.TreeSto..

canvas视频处理,添加文字,水印图片

评论(0)浏览(1241)分类:JavaScript/Ajax开发技巧
canvas视频处理,添加文字,水印图片canvas视频处理,给原视频添加文字,水印之类,合成新的视频,效果如下!DOCTYPE htmlhtmlhead meta charset=UTF-8 titlecanvas处理视频/title/headbody canvas id=canvas width=300 height=168/canvas video width=300 height=168 controls src=/demo/2.mp4 id=video muted/video video width=300 height=168 controls id=vr mut..

如何导入使用echarts和切换主题

评论(0)浏览(1238)分类:JavaScript/Ajax开发技巧
如何导入使用echarts和切换主题  网站如何使用echarts,要使用echarts绘制图形需要哪些js文件。下载的echarts示例里面有很多文件,实际使用到的只有3个文件(esl.js,echarts.js,echarts-map.js),如果不需要地图,那么只需要前面esl.js,echarts.js,其中esl.js是必须的。  下面以echarts-2.0.4为例,将下载的echarts-2.0.4压缩包解压到任意一个路径下,打开echarts-2...

CSS表格固定表头示例

评论(0)浏览(1233)分类:HTML/CSS兼容/XML
CSS表格固定表头示例  css+JavaScript实现表格的表头固定效果,页面滚动,表头处于页面最顶端。  CSS表格固定表头示例代码如下!doctype htmlhtml headtitleCSS表格固定表头/titlemeta http-equiv=Content-type content=text/html; charset=utf-8style type=text/css* html,* html body /* 修正IE7振动/闪动bug */{background-image:url(about:blank);background..

解决uploadify cancel取消上传再选择文件报超过限制错误

评论(0)浏览(1233)分类:JavaScript/Ajax开发技巧
解决uploadify cancel取消上传再选择文件报超过限制错误  调用uploadify的cancel方法后,如果再选择文件,超出uploadLimit配置值会报错。看源代码后,uploadify调用cancel方法只有清空队列的情况下(传递*参数,$(xxx).uploadify(cancel,*))才会重置上传队列的值,对于取消单个文件或者指定了多个要取消的队列id参数,没有重置队列长度,继续包含被取消上传的文件数量。所以继续选择文件就会报超过队..

easyui tree async加载的树动态添加参数

评论(0)浏览(1233)分类:easyui开发技巧
easyui tree async加载的树动态添加参数  easyui的tree如果是异步加载的,点击节点展开子节点,会自动将点击节点的配置的id参数回发给服务器,服务器接收这个参数后动态读取此节点的子节点输出实现easyui tree的绘制。  要想给回发服务器的参数添加其他附加的参数值,可以增加onBeforeLoad事件,此事件有2个参数,node和param,node是当前点击的节点信息,param是回发给服务器的参..

jqGrid如何设置上下导航条

评论(0)浏览(1227)分类:jqGrid中文API
jqGrid如何设置上下导航条  jqGrid的删除添加等工具栏目条默认是放在jqGrid数据项底部的,如果要想在jqGrid顶部同时放置工具条,需要用jquery克隆工具栏,然后添加到顶部的工具栏容器中,经测试这样克隆后添加的工具条相关事件也会一起克隆了,虽然控件id会出现重复。  jqGrid如何设置上下导航条源代码如下 div id=pp1/div table id =grid /table ..