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;
}
网友评论