美文网首页
你知道或者不知道的前端

你知道或者不知道的前端

作者: SunshineMS | 来源:发表于2018-06-26 19:32 被阅读0次

    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;
           }
    

    相关文章

      网友评论

          本文标题:你知道或者不知道的前端

          本文链接:https://www.haomeiwen.com/subject/nydpyftx.html