1.include(公共页面引入）
/**
* Created by HandsomeH on 2016/1/13.
*/
(function(window, document, undefined) {
var Include3948= function() {}
Include3948.prototype = {
//倒序循环
forEach: function(array, callback) {
var size = array.length;
for(var i = size - 1; i >= 0; i--){
callback.apply(array[i], [i]);
}
},
getFilePath: function() {
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));
var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);
return localhostPaht+projectName;
},
//获取文件内容
getFileContent: function(url) {
var ie = navigator.userAgent.indexOf('MSIE') > 0;
var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
o.open('get', url, false);
o.send(null);
return o.responseText;
},
parseNode: function(content) {
var objE = document.createElement("div");
objE.innerHTML = content;
return objE.childNodes;
},
executeScript: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g;
var r = "";
while(r = mac.exec(content)) {
eval(r[1]);
}
},
getHtml: function(content) {
var mac = /<script>([\s\S]*?)<\/script>/g;
content.replace(mac, "");
return content;
},
getPrevCount: function(src) {
var mac = /\.\.\//g;
var count = 0;
while(mac.exec(src)) {
count++;
}
return count;
},
getRequestUrl: function(filePath, src) {
if(/http:\/\//g.test(src)){ return src; }
var prevCount = this.getPrevCount(src);
while(prevCount--) {
filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);
}
return filePath + "/"+src.replace(/\.\.\//g, "");
},
replaceIncludeElements: function() {
var $this = this;
var filePath = $this.getFilePath();
var includeTals = document.getElementsByTagName("include");
this.forEach(includeTals, function() {
//拿到路径
var src = this.getAttribute("src");
//拿到文件内容
var content = $this.getFileContent($this.getRequestUrl(filePath, src));
//将文本转换成节点
var parent = this.parentNode;
var includeNodes = $this.parseNode($this.getHtml(content));
var size = includeNodes.length;
for(var i = 0; i < size; i++) {
parent.insertBefore(includeNodes[0], this);
}
//执行文本中的额javascript
$this.executeScript(content);
parent.removeChild(this);
//替换元素 this.parentNode.replaceChild(includeNodes[1], this);
})
}
}
window.onload = function() {
new Include3948().replaceIncludeElements();
}
})(window, document)
2.jquery.PrintArea.js（打印）
使用的方法：$（element).printArea(option).
- 参数设置：
- 1.mode：模式，当点击打印按钮时触发模式，默认为iframe，当设置为popup则会新开一个窗口页面打印。
- 2.popTitle：设置新开窗口的标题，默认为空。
- 3.popClose：完成打印后是否关闭窗口，默认为false。
- 4.debug: false,//如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
- 5.importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$(“link[media=print]“)，若没有会去找$(“link”)中的css文件）
- 6.printContainer: true,//表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
- 7.operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
3.chrome屏幕尺子插件-Page Ruler Chrome插件
Page Ruler屏幕尺子插件功能
PageRuler屏幕尺子插件是一款非常轻量级的屏幕尺子插件，还可以为Chrome浏览器量身定做测量需求，使得用户的测量结果变得更加准确。简单直接点说PageRuler屏幕尺子插件就是绘制一个标尺，得到像素的尺寸和定位，并测量在任何网页上的元素。页尺让你的画出一把尺子到任何页面，并显示它的宽度、高度和位置。
其功能特色有：
*画一把尺子到任何页面，并查看宽度，高度和顶部，底部，左，右位置
*拖动标尺的边缘来调整它的大小
*使用箭头键移动和调整标尺的大小
*显示从标尺边缘延伸的指南
*手动更新标尺的大小和位置，从工具栏上进行精确的更改
*启用“元素模式”来在页面上的元素，当你移动你的鼠标在他们
*通过任何被测元素的父母，孩子和兄弟姐妹
4.Smart QrCode Generator
5.css
1.边框内圆角
- 有时候我们需要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状
image.png
div {
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655;
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
}
解决方案：box-shadow和outline结合
实现原理： outline（描边）不会跟着元素的圆角走（因而显示直角）；box-shadow却是会跟着元素走的；两者相结合，box-shadow会填补描边和容器圆角之间的空隙；
2. 满幅的背景，定宽的内容
例如：
image.png
.header{
padding: 1em calc(50% - 600px);
background: orange;
color: #fff;
overflow: hidden;
}
3.currentColor (当前的标签所继承的文字颜色)
-
（1）边框字体同色
image.png
.border{
color:bisque;
border: 1px solid currentColor;
/* 或者 */
border:1px solid;
}
- （2）一些鼠标事件
border, background, 还是box-shadow，图标的颜色都统一变化，就可以使用currentColor作为图形颜色
4.等比例缩放的盒子
根据不同屏幕大小等比缩放页面中的元素
- 实现原理：padding-bottom 有一个让人很容易忽略的特性是当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度
.dw1{
float: left;
width: 30%;
padding-bottom: 60%;
margin: 0 3% 0 0;
background: blue;
}
