1.单击事件___onclick 用户单击鼠标按键时产生的事件.同时onclick指定的事件处理程序或代码将被调用执行. 如:<input type="button" value="打开页面" onlick="window.open('xxxx.html',’newwindow',’width=456,height=230,toolbar=no,menubar=no,scrollbars=yes');"> 2.改变事件___onchange 当text或textarea元素内的字符值改变或select表格选项状态改变里发生该事件. 如;<textarea name="liuyan" rows=5 cols=70 value=" " onchange=alert("您在文本框中添加了新的内容")> 3.选中事件____onselect 当text或textarea对象中的文字被选中里会引发该事件 如:<ipnut type="text" value="默认信息" onselect=alert("您选中了文本框中的文字")> 4.获得焦点事件____onfocus 用户单击text或textarea以及select对象时,即光标落在文本框或选择框时会产生该事件. 如:<select name="zhengjian" onfocus="alert("我成为焦点")> 5.失去焦点事件______onblur 失去焦点事件正好与获得焦点事件相对,当text对象,textarea对象或select对象不再拥有焦点而退出后台时,引发该事件. 6.载入文件事件____onload 当页面文件载入时,产生该事件.onload的一个作用就是在首次载入一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在<body>标记中. 如:<body onload=alert("正在加载页面,请等待…")> 7.卸载文件事件____onunload 与载入文件事件onload正好相反,当web页面退出时引发的事件,并可更新cookie的状态 如:<body onunload="confirm("你确定要离开本页?")> 8.鼠标覆盖事件 _____onmouseover onmouseover是当鼠标位于元素上方时所引发的事件 如:<input type="boutton" value="按钮" onmouseover="window.status=’请您注意下面的状态栏'; return true"> 9.鼠标离开事件_____onmouseout onmouseout是鼠标离开元素里引发的事件.如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果. 10.一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后,松开鼠标时触发的事件 onmouseover 当鼠标移动到某对象范围的上方时触发此事件 onmousemove 鼠标移动时触发此事件. onmouseout 当鼠标离开某对象范围时触发此事件 onkeypress 当键盘上的某个键被按下并且释放时触发的事件,要求页面内必须有激活对象 onkeydown 当键盘上某个键被按下时触发的事件,要求页面内必须有激活对象 onkeyup 当键盘上某个按键被放开时触发的事件,要求页面内必须有激活对象 11.页面相关事件 onabort 图片在下载时被用户中断 onbeforeunload 当前页面的内容将要被改变时触发的事件 onerror 捕捉当前页面因为某种原因而出现的错误,如脚本错误. onmove 浏览器的窗口被移动里触发的事件 onresize 当浏览器的大小被改变时触发的事件 onscroll 浏览器的滚动条位置发生变化时触发的事件 onstop 浏览器的"停止"按钮被按下或者正在下载的文件被中断时触发的事件. 12. 表单相关事件 […]
View DetailsWindow的属性 属性描述 closed 获取引用窗口是否已关闭。 defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息。 dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组。 dialogHeight 设置或获取模式对话框的高度。 dialogLeft 设置或获取模式对话框的左坐标。 dialogTop 设置或获取模式对话框的顶坐标。 dialogWidth 设置或获取模式对话框的宽度。 frameElement 获取在父文档中生成 window 的 frame 或 iframe 对象。 length 设置或获取集合中对象的数目。 name 设置或获取表明窗口名称的值。 offscreenBuffering 设置或获取对象在对用户可见之前是否要先在屏幕外绘制。 opener 设置或获取创建当前窗口的窗口的引用。 parent 获取对象层次中的父窗口。 returnValue 设置或获取从模式对话框返回的值。 screenLeft 获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。 screenTop 获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。 self 获取对当前窗口或框架的引用。 status 设置或获取位于窗口底部状态栏的信息。 top 获取最顶层的祖先窗口。 Window的事件 事件描述 onactivate 当对象设置为活动元素时触发。 onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。 onbeforeprint 对象的关联文档打印或打印预览前在对象上触发。 onbeforeunload 在页面将要被卸载前触发。 onblur 在对象失去输入焦点时触发。 oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。 ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。 onerror 当对象装载过程中发生错误时触发。 onfocus 当对象获得焦点时触发。 onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。 onload 在浏览器完成对象的装载后立即触发。 onmove 当对象移动时触发。 onmoveend 当对象停止移动时触发。 […]
View DetailsartDialog —— 经典的网页对话框组件,内外皆用心雕琢。 支持普通与 12 方向气泡状对话框 完善的焦点处理,自动焦点附加与回退 支持 ARIA 标准 面向未来:基于 HTML5 Dialog 的 API 支持标准与模态对话框 丰富且友好的编程接口 能自适应内容尺寸 仅 4kb (gzip) 文档导航 引入 artDialog 快速参考 普通对话框 模态对话框 气泡浮层 添加按钮 控制对话框关闭 给对话框左下脚添加复选框 阻止对话框关闭 不显示关闭按钮 创建 iframe 内容 方法 show([anchor]) showModal([anchor]) close([result]) remove() content(html) title(text) width(value) height(value) reset() button(args) focus() blur() addEventListener(type, callback) removeEventListener(type, callback) dialog.get(id) dialog.getCurrent() 选项 内容 title content statusbar 按钮 ok okValue cancel cancelValue cancelDisplay button 外观 width height skin padding 交互 fixed align quickClose autofocus zIndex 事件 onshow onbeforeremove onremove onclose onfocus onblur onreset 高级 id […]
View Details设计师做的高保真原型图,难免会用到艺术字体。 采用切片的方式,简单,粗暴,节省时间。除了retina屏其它兼容性也是一流。但是在修改的时候,会花很大的力气。即使只是修改文字大小,也需要重新切图,更别说修改文字,或者改变文字颜色了。 有没有想过,文字本来就应该是它原本的样子。只是看起来像,似乎不和情理。 之所以不直接使用艺术字体,最大的一个问题就是字体文件,一般都太大了。轻轻松松就上兆的节奏。在网页这种流量寸土寸金的地方,真的是很难应用起来。 我们在一个网页上一般用到的艺术字体的地方,往往只有banner和大标题。其实真的算下来也没有几个字。如果我们能把用到的字单独存在一起,组成一个字体文件,这不就解决了字体文件太大的问题了吗? 准备字体形状 将文字,分解成一个字一个图层。 选中所有图层,右键转换为形状。 选中所有图层,右键导出为… 导出svg图片 修改每一个图层的文件设置为svg。 导出 登录网站 登录https://icomoon.io, 选择右上角icoMoon App 或者直接登录https://icomoon.io/app/#/select 导入图片 点击import Icons导入所有svg文字 选中你要打包的文字 点击右下角Generate Font 修改文字 修改文字映射 点击download 导出代码 打开style.css文件 拷贝@font-face代码 拷贝fonts文件夹 修改相关路径,修改字体名称 只需要在使用的时候设定font-family为我们制定的字体名称就可以了 from:http://www.cnblogs.com/css27/p/5473766.html
View Details编辑器初始化参数 Contents 编辑器初始化参数 width height minWidth minHeight items noDisableItems filterMode htmlTags wellFormatMode resizeType themeType langType designMode fullscreenMode basePath themesPath pluginsPath langPath minChangeSize urlType newlineTag pasteType dialogAlignType shadowMode zIndex useContextmenu syncType indentChar cssPath cssData bodyClass colorTable afterCreate afterChange afterTab afterFocus afterBlur afterUpload uploadJson fileManagerJson allowPreviewEmoticons allowImageUpload allowFlashUpload allowMediaUpload allowFileUpload allowFileManager fontSizeTable imageTabIndex formatUploadUrl fullscreenShortcut extraFileUploadParams filePostName fillDescAfterUploadImage afterSelectFile pagebreakHtml allowImageRemote autoHeightMode fixToolBar width 编辑器的宽度,可以设置px或%,比textarea输入框样式表宽度优先度高。 数据类型: String 默认值: textarea输入框的宽度 示例:
1 2 3 |
<span class="nx">K</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="s1">'#id'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">width</span> <span class="o">:</span> <span class="s1">'700px'</span> <span class="p">});</span> |
height 编辑器的高度,只能设置px,比textarea输入框样式表高度优先度高。 数据类型: String 默认值: textarea输入框的高度 minWidth 指定编辑器最小宽度,单位为px。 数据类型: Int 默认值: 650 minHeight 指定编辑器最小高度,单位为px。 数据类型: […]
View Details《JavaScript 权威指南》这本书从第四版开始,一直到第六版,每个版本我都逐字逐句读过几遍,然而每一遍下来的感受却完全不一样。上上周的周一,再次翻开了这本犀牛书, 这一次我是带着批判精神和研究精神过来的,所以看的时候也写下了一些感受和笔记,都是些容易被忽略的点,部分内容犀牛书上不一定有提到。 之前都发在 微博 上,稍微整理了一番,放在这里,方便阅读。 一些小点 语句/表达式 换个角度理解语句(statemaents)和表达式(expressions):表达式不会改变程序的运行状态,而语句会。还有一种叫做表达式语句,可以理解为表达式和语句的交集,如 ({a:1})、"use strict;"等,我觉得没必要死扣,意义不大。 字符集 ES3 要求 JS 必须实现 Unicode 2.1 及后续版本,而 ES5 只要求支持 Unicode 3 及后续版本。Unicode 字符 2005 年超过了十万字符,至今仍在不断增修,最新版本是 8.0。 分号 如果你写 JS 代码不喜欢带分号,而又搞不清什么时候必须加分号,可以这么做:在以 “(“、”[“ 、”/“、”+”、”-“ 开头的语句前面都加上一个分号,如 ;(a + b).toString()。 进制 ES5 严格模式中禁止使用八进制。目前各种引擎对 JS 的实现是存在差异的,部分支持八进制,部分不支持。八进制被禁止的原因:String 和 Number 之间经常被相互转换,而以 0 开头的八进制数据特别容易让人迷惑,也容易让机器迷惑,比如 09 是该被转换成 9 还是直接报错?十六进制不存在这个问题,如 0x98。更多信息参阅 这里。 精度 JS 采用 IEEE-754 浮点数表示法,这是一种二进制表示法,由于精度原因 JS 不能表示所有的实数。它能展示的浮点数个数是有限的,比如它不能准确地表示三分之一的数值字面量。这也导致了它在浮点数的计算上存在误差,如 0.3-0.2 != 0.2-0.1,因为在计算的过程中,存在数据的溢出,丢失了精度。 null/undefined 系统级、出乎意料的或者类似错误的值的空缺使用 undefined,而程序级、正常的或意料之中的值的空缺使用 null。平时编程给变量赋值时,不要使用 undefined 而应该用 null。值得注意的是 ES3 中的 undefined 是可以被重新赋值的,ES5 修复了这个 bug。通常我们使用 void 0 来还原/代替 undefined 的值。 eval eval 是个不好把握的东西,它在 ES3 中更像是 Function,而在 ES5 中更像是一个运算符(严格模式下不允许设置别名,否则报错,且将其作为保留字)。实际上 ES3 中也不允许给 eval 设置别名,然而很多实现却依然允许,并将其作为全局代码来执行,浏览器尤其是 IE 对它实现相当混乱,没有什么规律可循,不过 IE 中提供了一个 […]
View Details我在开发测试过程中,发现使用wx.onMenuShareTimeline无效果,没有显示我定义的图片、title和链接,经过调试发现原因如下: 1.图片大小要大于300pix才能显示 2.这个方法必须先config成功,然后再wx.ready里才能调用。我直接放到$(function(){})里执行,实践证明是不行的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '{$appid}', // 必填,公众号的唯一标识 timestamp: "{$signPackage.timestamp}", // 必填,生成签名的时间戳 nonceStr: '{$signPackage.nonceStr}', // 必填,生成签名的随机串 signature: '{$signPackage.signature}',// 必填,签名,见附录1 jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); wx.ready(function () { wx.onMenuShareTimeline({ title: '--{$info.name}', // 分享标题 link: '{$url}__URL__/index?pid={$pid}&puid={$uid}', // 分享链接,将当前登录用户转为puid,以便于发展下线 imgUrl: '{$url}__PUBLIC__/Uploads/{$goodsvo.image}', // 分享图标 success: function () { // 用户确认分享后执行的回调函数 alert('分享成功'); }, cancel: function () { // 用户取消分享后执行的回调函数 } }); wx.error(function (res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 alert("errorMSG:" + res); }); }); |
from:http://www.cnblogs.com/zhouyu629/p/4496065.html
View DetailsNavigator 对象 Navigator 对象包含有关浏览器的信息。 注释:没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。 Navigator 对象集合 集合 描述 plugins[] 返回对文档中所有嵌入式对象的引用。 该集合是一个 Plugin 对象的数组,其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息,其中包括它所支持的 MIME 类型的列表。 虽然 plugins[] 数组是由 IE 4 定义的,但是在 IE 4 中它却总是空的,因为 IE 4 不支持插件和 Plugin 对象。 Navigator 对象属性 属性 描述 appCodeName 返回浏览器的代码名。 appMinorVersion 返回浏览器的次级版本。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 browserLanguage 返回当前浏览器的语言。 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。 cpuClass 返回浏览器系统的 CPU 等级。 onLine 返回指明系统是否处于脱机模式的布尔值。 platform 返回运行浏览器的操作系统平台。 systemLanguage 返回 OS 使用的默认语言。 userAgent 返回由客户机发送服务器的 user-agent 头部的值。 userLanguage 返回 OS 的自然语言设置。 Navigator 对象方法 方法 描述 javaEnabled() 规定浏览器是否启用 Java。 taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。 from:http://www.w3school.com.cn/jsref/dom_obj_navigator.asp
View DetailsWebStorage是HTML5中本地存储的解决方案之一,在HTML5的WebStorage概念引入之前除去IE User Data、Flash Cookie、Google Gears等看名字就不靠谱的解决方案,浏览器兼容的本地存储方案只有使用cookie。有同学可能会问,既然有了cookie本地存储,为什么还要引入WebStorage的概念? Cookie肿么了 cookie的缺陷是非常明显的 1. 数据大小:作为存储容器,cookie的大小限制在4KB左右这是非常坑爹的,尤其对于现在复杂的业务逻辑需求,4KB的容量除了存储一些配置字段还简单单值信息,对于绝大部分开发者来说真的不知指望什么了。 2. 安全性问题:由于在HTTP请求中的cookie是明文传递的(HTTPS不是),带来的安全性问题还是很大的。 3. 网络负担:我们知道cookie会被附加在每个HTTP请求中,在HttpRequest 和HttpResponse的header中都是要被传输的,所以无形中增加了一些不必要的流量损失。 WebStorage WebStorage是HTML新增的本地存储解决方案之一,但并不是为了取代cookie而制定的标准,cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的,session正是依赖于实现的客户端状态保持。WebStorage的意图在于解决本来不应该cookie做,却不得不用cookie的本地存储。 WebStorage提供两种类型的API:localStorage和sessionStorage,两者的区别看名字就有大概了解,localStorage在本地永久性存储数据,除非显式将其删除或清空,sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。两个对象都有共同的API。 复制代码 代码如下: interface Storage { readonly attribute unsigned long length; DOMString? key(unsigned long index); getter DOMString getItem(DOMString key); setter creator void setItem(DOMString key, DOMString value); deleter void removeItem(DOMString key); void clear(); }; 1、length:唯一的属性,只读,用来获取storage内的键值对数量。 2、key:根据index获取storage的键名 3、getItem:根据key获取storage内的对应value 4、setItem:为storage内添加键值对 5、removeItem:根据键名,删除键值对 6、clear:清空storage对象 WebStorage如何使用 在实现了WebStorage的浏览器中,页面有两个全局的对象localStorage和sessionStorage 以localStorage为例,看一段简单的操作代码 复制代码 代码如下: var ls=localStorage; console.log(ls.length);//0 ls.setItem('name',’Byron'); ls.setItem('age',’24'); console.log(ls.length);//2 //遍历localStorage for(var i=0;i<ls.length;i++){ /* age : 24 […]
View Details
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ window.location.href="手机页面"; }else if(/iPad/i.test(navigator.userAgent)){ window.location.href="平板页面"; }else{ window.location.href="其他移动端页面" } }catch(e){} } } |
另外的三种: 版本1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script language="javascript"> //平台、设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); //跳转语句,如果是手机访问就自动跳转到caibaojian.com页面 if(system.win||system.mac||system.xll){ }else{ window.location.href="http://caibaojian.com"; } </script> |
版本2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script language="javascript"> function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i; var u = navigator.userAgent; if (null == u) { return true; } var result = regex_match.exec(u); if (null == result) { return false } else { return true } } if (is_mobile()) { document.location.href= 'http://caibaojian.com'; //修改http://caibaojian.com为你所需跳转目标页地址 } </script> |
版本3 百度webapp版
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!---识别手机或电脑的js开始---> <script language="javascript"> (function(){ var res = GetRequest(); var par = res['index']; if(par!='gfan'){ var ua=navigator.userAgent.toLowerCase(); var contains=function (a, b){ if(a.indexOf(b)!=-1){return true;} }; //将下面的http://caibaojian.com改成你的wap手机版页面地址 如我的 http://caibaojian.com var toMobileVertion = function(){ window.location.href = 'http://caibaojian.com/' } if(contains(ua,"ipad")||(contains(ua,"rv:1.2.3.4"))||(contains(ua,"0.0.0.0"))||(contains(ua,"8.0.552.237"))){return false} if((contains(ua,"android") && contains(ua,"mobile"))||(contains(ua,"android") && contains(ua,"mozilla")) ||(contains(ua,"android") && contains(ua,"opera")) ||contains(ua,"ucweb7")||contains(ua,"iphone")){toMobileVertion();} } })(); function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest; } </script> <!---识别手机或电脑的js结束---> |