一、React的家世背景 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 Facebook的设计理念是独立、小巧、快速、创新，而React的特点也正说明了这一点。 二、React 更“轻”的MDV框架 先来说一下什么是MDV吧，MDV即Model Driven View，根据model动态生成view。MDV框架将程序员从传统手动渲染dom节点和事件绑定中解放了出来，大大提高了开发效率。 React更“轻”，这个"更"是有对比含义的，相对于AngularJs的双向数据流，ReactJs的单向数据流显然是更轻量级，而且React维护自己的VTree(虚拟Dom树)，可以更快的渲染dom节点。据说，react渲染的界面，fps可以保持在60左右，这一点使得react特别适合于制作游戏。在react刚推出的时候，有测试指出react的性能要比angular高20%左右。 但是，AngularJs的数据交互可以双向进行，可以用于CURD，应用易于接受用户的自定义以及个人数据。当然， 毕竟 React是用于“render”的，view中最关键的是管理组件状态变化，而React在这一点上做的比AngularJs好很多。 在React中，对象的状态使用this.state表示，对象的初始状态设置使用getInitialState，设置状态使用setState，数据使用props管理，DOM操作和事件监听则类似于jquery。 三、使用React制作简易悬浮框 index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"bootstrap/bootstrap.min.css"</span>></span> <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/style.css"</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"container"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"layer"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ReactJs/react.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ReactJs/react-dom.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ReactJs/browser.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/babel"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/common.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span class="hljs-id">#modal</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">400px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">210px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> auto</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> auto</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#999</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">none</span></span>; <span class="hljs-rule">}</span></span> <span class="hljs-id">#modal</span> <span class="hljs-class">.btn</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value">right</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>; <span class="hljs-rule">}</span></span> <span class="hljs-id">#layer</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">100%</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">100%</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">fixed</span></span>; <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">z-index</span>:<span class="hljs-value">-<span class="hljs-number">1</span></span></span>; <span class="hljs-rule">}</span></span> |
common.js （React创建组件）
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<span class="hljs-keyword">var</span> BootstrapButton=React.createClass({ render:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-title">a</span> {<span class="hljs-attribute">...this.props</span>} <span class="hljs-attribute">href</span>=<span class="hljs-value">"javascript:;"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">{'btn</span> '+<span class="hljs-attribute">this.props.className</span>}/></span> )</span>; } }); <span class="hljs-keyword">var</span> BootstrapModal=React.createClass({ render:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"modal"</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">"root"</span>></span> <span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Hello world<span class="hljs-tag"></<span class="hljs-title">h1</span>></span> <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span> <span class="hljs-tag"><<span class="hljs-title">p</span>></span>This is a test!<span class="hljs-tag"></<span class="hljs-title">p</span>></span> <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span> <span class="hljs-tag"><<span class="hljs-title">BootstrapButton</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"btn-primary"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleConfirm}</span>></span> Confirm <span class="hljs-tag"></<span class="hljs-title">BootstrapButton</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> )</span>; }, handleConfirm:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.close(); }, open:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ $(<span class="hljs-keyword">this</span>.refs.root).show(); $(<span class="hljs-string">"#layer"</span>).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"rgba(112,112,112,0.6)"</span>); }, close:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ $(<span class="hljs-keyword">this</span>.refs.root).hide(); $(<span class="hljs-string">"#layer"</span>).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"rgba(0,0,0,0)"</span>); } }); <span class="hljs-keyword">var</span> ModalWidget=React.createClass({ render:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span>( <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">BootstrapButton</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"btn-default"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.showModal}</span>></span> show <span class="hljs-tag"></<span class="hljs-title">BootstrapButton</span>></span> <span class="hljs-tag"><<span class="hljs-title">BootstrapModal</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">"modal"</span>></span> <span class="hljs-tag"></<span class="hljs-title">BootstrapModal</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> )</span>; }, showModal:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ {<span class="hljs-keyword">this</span>.refs.modal.open()}; } }); ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">ModalWidget</span>/></span>,$("#container")[0]);</span> |
在线演示 from:http://my.oschina.net/lonelydawn/blog/699696
View Details背景：移动端H5项目，需要实现调用手机拍照，并将图片压缩上传功能。 页面样式： 上传图片有原生的方法<input type="file" accept="image/*">，如果只想要拍照上传，不希望用户选择图片上传，可以通过添加capture属性，该属性值有camcorder/microphone/camera…，此处选择camera。PS：该属性存在浏览器兼容性问题，不是所有的浏览器都支持。
|
1 |
<input type="file" accept="image/*" capture="camera" > |
因为原生file样式不满足要求，需要进行相应的处理，此时使用定位，在input上面放置我们想要的页面效果。然后当点击上面的元素，就可以触发我们的input进行图片上传。此时的问题是：当点击input上面的元素，需要事件穿透，即相当于点击input。则借助于css3心术新pointer-events。
|
1 2 3 4 5 |
//使用cursor进行事件穿透，来阻止元素成为鼠标事件的目标 button{ cursor:pointer; pointer-events:none; } |
—-此时图片上传的样式已经处理好了—- 代码片段：
|
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 35 36 37 38 |
<style > *{ padding: 0; margin: 0; } .wrapper{ width: 320px; height: 50px; margin: 20px auto; position: relative; border: 1px solid #f0f0f0; } input{ width: 100px; height: 30px; } button{ position: absolute; cursor: pointer; pointer-events: none; width: 100px; height: 30px; left: 0; top: 0; } a{ pointer-events: none; } .img{ border: 1px solid #ccc; padding: 10px; } </style > <div class = "wrapper"> <input type = "file" accept= "image/*" capture= "camera" id= "img" /> <button >上传照片 </button > </div > |
图片压缩处理： 因为要做的是手机拍照上传，现在的手机拍照片都很大，比如小米4S，大小在3M以上，如果原图上传，太消耗用户流量，于是要解决图片压缩的问题。 通过change事件，监听图片上传，通过readerAsDataURL获取上传的图片。
|
1 2 3 4 5 6 7 8 9 10 |
document.getElementById( 'img').addEventListener( 'change', function () { var reader = new FileReader(); reader.onload = function (e) { //调用图片压缩方法：compress(); }; reader.readAsDataURL(this.files[0]); console.log(this.files[0]); var fileSize = Math.round( this.files[0].size/1024/1024) ; //以M为单位 //this.files[0] 该信息包含：图片的大小，以byte计算 获取size的方法如下：this.files[0].size; }, false); |
对上传的图片进行压缩，需要借助于canvas API，调用其中的canvas.toDataURL(type, encoderOptions); 将图片按照一定的压缩比进行压缩，得到base64编码。重点来了：压缩策略：先设置图片的最大宽度 or 最大高度，一般设置其中一个就可以了，因为所有的手机宽高比差别不是很大。然后设置图片的最大size，allowMaxSize，根据图片的实际大小和最大允许大小，设置相应的压缩比率。
|
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
//最终实现思路： 1、设置压缩后的最大宽度 or 高度； 2、设置压缩比例，根据图片的不同size大小，设置不同的压缩比。 function compress(res,fileSize) { //res代表上传的图片，fileSize大小图片的大小 var img = new Image(), maxW = 640; //设置最大宽度 img.onload = function () { var cvs = document.createElement( 'canvas'), ctx = cvs.getContext( '2d'); if(img.width > maxW) { img.height *= maxW / img.width; img.width = maxW; } cvs.width = img.width; cvs.height = img.height; ctx.clearRect(0, 0, cvs.width, cvs.height); ctx.drawImage(img, 0, 0, img.width, img.height); var compressRate = getCompressRate(1,fileSize); var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate); document.body.appendChild(cvs); console.log(dataUrl); } img.src = res; } function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率，size单位为MB var compressRate = 1; if(fileSize/allowMaxSize > 4){ compressRate = 0.5; } else if(fileSize/allowMaxSize >3){ compressRate = 0.6; } else if(fileSize/allowMaxSize >2){ compressRate = 0.7; } else if(fileSize > allowMaxSize){ compressRate = 0.8; } else{ compressRate = 0.9; } return compressRate; } |
图片上传给服务器： 图片已经压缩完成了，但是压缩后的图片不是File，而是一个base64编码，于是乎两个选择：1、以String的形式将base64编码上传给服务器，服务器转存base64为img图片；2、前端将base64转为File图片类型，上传给服务器。 方法一：压缩之后直接上传base64给后台，实现简单。 方法二：前端自己转存base64位File图片，这个对于前端 压力比较大。原因：html5 canvas属于客户端API，没有权限去保存图片到硬盘，只有canvas.toDataURL()这一接口可导出画布的base64编码，以提供给服务器进行处理保存。所以如果要将base64编码转成图片需要借助于nodeJs。因为nodeJS有相关文件处理的API。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//使用nodeJS将base64转化成图片 var express = require('express'); var fs = require("fs"); var app = module.exports = express(); function dataToImage(dataUrl){ var base64Data = dataUrl.replace(/^data:image\/\w+;base64,/,''); var dataBuffer = new Buffer(base64Data,'base64'); fs.writeFile('out.jpg',dataBuffer,function(err){ if(err){ console.log(err); }else{ console.log('Success...'); } }); } dataToImage('data:image/jpeg;base64,/9...'); //图片完整base64过长，所以省略... if(!module.parent){ app.listen(8000); console.log('Express started on port 8000'); } |
Summary：如果使用nodeJS，需要单独部署nodeJS代码到服务器，整个逻辑会比较麻烦。综合比较两种方法，推荐使用第一种方法，直接传base64给服务器，后台处理相应的转化！ 相关知识科普： 图像一般由两部分组成：一部分是数据本身，他记录了每个像素的颜色值，另一部分是文件头，这里记录着形如图像的宽度，高度等信息。 不同图片类型及适用场景： 不同图片类型： GIF：无损压缩，体积小，支持透明效果，缺点：色彩效果最低，用gif保存鲜艳的图片的话会让网站看上去非常可怕。 PNG：无损压缩，可渐变透明，缺点：不如JPG颜色丰富，同样的图片体积也比JPG略大。 JPG/JPEG：色彩还原性好，可以在照片不明显失真的情况下，大幅度压缩图片格式，所以体积不会很大。缺点：不支持透明 适用场景： 当图片色彩鲜艳，基本没有透明效果的时候，选择jpg/jpeg。 当图片色彩鲜艳，透明效果较多的情况下，选择png； 当图片色彩比较单一情况下，可以选择gif； toDataURL，查找原生压缩图片的方法。type支持image/webp格式
|
1 |
canvas.toDataURL(type, encoderOptions); |
Base64编码：将三个8Bit的字节转换为四个6Bit的字节。 参考资料： http://www.imys.net/20150916/webapp-input-use-camera.html http://www.oxxostudio.tw/articles/201409/pointer-events.html https://segmentfault.com/a/1190000005364299 from:http://my.oschina.net/zyxchuxin/blog/700381
View Detailsbackground-image: -webkit-image-set(url(http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png) 1x,url(http://i2.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_2x.png) 2x);
View Detailsjavascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件. onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件 onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件 页面相关事件 onabort IE4、N3 图片在下载时被用户中断 onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件 onerror IE4、N3 出现错误时触发此事件 onload IE3、N2 页面内容完成时触发此事件 onmove IE、N4 浏览器的窗口被移动时触发此事件 onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件 onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件 onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 onunload IE3、N2 当前页面将被改变时触发此事件 表单相关事件 onblur IE3、N2 当前元素失去焦点时触发此事件 onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件 onfocus IE3 、N2 当某个元素获得焦点时触发此事件 onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件 onsubmit IE3 、N2 一个表单被递交时触发此事件 滚动字幕事件 onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件 onfinish IE4、N […]
View Details属性 Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档类型节点(只读) documentElement 返回文档的根元素(可读写) firstChild 返回当前节点的第一个子节点(只读) Implementation 返回XMLDOMImplementation对象 lastChild 返回当前节点最后一个子节点(只读) nextSibling 返回当前节点的下一个兄弟节点(只读) nodeName 返回节点的名字(只读) nodeType 返回节点的类型(只读) nodeTypedValue 存储节点值(可读写) nodeValue 返回节点的文本(可读写) ownerDocument 返回包含此节点的根文档(只读) parentNode 返回父节点(只读) Parsed 返回此节点及其子节点是否已经被解析(只读) Prefix 返回名称空间前缀(只读) preserveWhiteSpace 指定是否保留空白(可读写) previousSibling 返回此节点的前一个兄弟节点(只读) Text 返回此节点及其后代的文本内容(可读写) url 返回最近载入的XML文档的URL(只读) Xml 返回节点及其后代的XML表示(只读) 方法 appendChild 为当前节点添加一个新的子节点,放在最后的子节点后 cloneNode 返回当前节点的拷贝 createAttribute 创建新的属性 createCDATASection 创建包括给定数据的CDATA段 createComment 创建一个注释节点 createDocumentFragment 创建DocumentFragment对象 createElement 创建一个元素节点 createEntityReference 创建EntityReference对象 createNode 创建给定类型,名字和命名空间的节点 createPorcessingInstruction 创建操作指令节点 createTextNode 创建包括给定数据的文本节点 getElementsByTagName 返回指定名字的元素集合 hasChildNodes 返回当前节点是否有子节点 insertBefore 在指定节点前插入子节点 Load 导入指定位置的XML文档 loadXML 导入指定字符串的XML文档 removeChild 从子结点列表中删除指定的子节点 replaceChild 从子节点列表中替换指定的子节点 Save 把XML文件存到指定节点 selectNodes 对节点进行指定的匹配,并返回匹配节点列表 […]
View Details1.单击事件___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