一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Frontend

js触发事件列表

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. 表单相关事件 […]

龙生   14 Jun 2016
View Details

js中window的属性

Window的属性 属性描述 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 当对象停止移动时触发。 […]

龙生   14 Jun 2016
View Details

artDialog文档

artDialog —— 经典的网页对话框组件,内外皆用心雕琢。 支持普通与 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 […]

龙生   12 May 2016
View Details

字体图标 Font Face

设计师做的高保真原型图,难免会用到艺术字体。 采用切片的方式,简单,粗暴,节省时间。除了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

龙生   09 May 2016
View Details

KindEditor 4.x documentation

编辑器初始化参数 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输入框的宽度 示例:

  height 编辑器的高度,只能设置px,比textarea输入框样式表高度优先度高。 数据类型: String 默认值: textarea输入框的高度   minWidth 指定编辑器最小宽度,单位为px。 数据类型: Int 默认值: 650   minHeight 指定编辑器最小高度,单位为px。 数据类型: […]

龙生   04 May 2016
View Details

那些 JavaScript 容易被忽视的细节

《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 中提供了一个 […]

龙生   22 Apr 2016
View Details

wx.onMenuShareTimeline使用注意事项

我在开发测试过程中,发现使用wx.onMenuShareTimeline无效果,没有显示我定义的图片、title和链接,经过调试发现原因如下: 1.图片大小要大于300pix才能显示 2.这个方法必须先config成功,然后再wx.ready里才能调用。我直接放到$(function(){})里执行,实践证明是不行的。

from:http://www.cnblogs.com/zhouyu629/p/4496065.html

龙生   30 Mar 2016
View Details

Navigator 对象

Navigator 对象 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

龙生   24 Mar 2016
View Details

HTML5 WebStorage(HTML5本地存储技术)

WebStorage是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                     […]

龙生   24 Mar 2016
View Details

js移动设备手机跳转地址代码

另外的三种: 版本1

版本2

版本3 百度webapp版

龙生   23 Mar 2016
View Details
1 31 32 33 58