闲来无事，搞了个页面的分屏效果，先来看下效果：

出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般.

程序相关说明：

HTML结构：

<div class="header">

            header

</div>

    <div class="container" id="displayArea">

            <!-- 分屏内容渲染区域 -->

    </div>

<div class="footer">

 <!--省略其他代码-->

</div>

js调用：

//分屏数据

            var iframes = [

                    {

                        id:'frames_1',

                        frameName:'百度一下',

                        src:'http://www.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度地图',

                        src:'http://map.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度下',

                        src:'http://www.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度视频',

                        src:'http://v.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度新闻2',

                        src:'http://news.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'test6',

                        src:'6.html'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度新闻',

                        src:'http://news.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'88888',

                        src:'6.html'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度更多',

                        src:'http://www.baidu.com/more/'

                    }

                ];

            //自适应屏幕

            window.onload = function(){

                Panel.resize();

            }

            window.onresize = function(){

                Panel.resize();

            }

            //初始化分屏

            var splitScreen = new splitScreen($('#displayArea'),iframes);

            //监听removeSettingCls自定义事件

            splitScreen._on('removeSettingCls',function(){

                splitScreen.toggleTopbar(function(){

                        $('.ulTab li[data-fp="setting"]').removeClass('currentLi');

                    });

            });

            //分屏切换

            function changeModel(obj){

                var fpmodel = $(obj).attr('data-fp');

                if(fpmodel !="setting"){

                    splitScreen.screenMode(fpmodel,function(){

                        $(obj).addClass('currentLi').siblings().removeClass('currentLi');

                    });

                }else{

                    splitScreen.toggleTopbar(function(){

                        $(obj).toggleClass('currentLi');

                    });

                }

            }

splitScreen.js相关代码说明：

1.定义一个类

var splitScreen = function(elem, options) {

    this.elem = elem; //分屏模块渲染区域元素

    this.options = options;//分屏链接数据

    this.initialize.apply(this); //初始化初始化分屏

}

2.prototype主要方法

splitScreen.prototype= {

        initialize: function() {},//初始化方法

        screenMode:  function(){},//分屏方法

        renderPanel:function(){},//渲染分屏DOM

        bindPanel:function(){} //事件监听
 

};

3.screenMode()方法说明：

主要是根据不同的分屏切换不同的Class，通过CSS类去控制分屏布局.这样写的好处应该是可以自定义布局的宽高大小，但是比较繁琐。如下：

switch (Number(mode)) {

            case 1:

                this.data = [

                    ['fp-1-1']

                ];

                this.defaultShow = [0];

                break;

            case 2:

                this.data = [

                    ['fp-2-1'],

                    ['fp-2-2']

                ];

                this.defaultShow = [1, 2];

                break;

            case 3:

                this.data = [

                    ['fp-3-1'],

                    ['fp-3-2', 'fp-3-3']

                ];

                this.defaultShow = [1, 2, 3];

                break;

            case 4:

                this.data = [

                    ['fp-4-1', 'fp-4-2'],

                    ['fp-4-3', 'fp-4-4']

                ];

                this.defaultShow = [4, 1, 2, 3];

                break;

            case 5:

                this.data = [

                    ['fp-5-1'],

                    ['fp-5-2'],

                    ['fp-5-3', 'fp-5-4', 'fp-5-5']

                ];

                this.defaultShow = [4, 5, 1, 2, 3];

                break;

            case 6:

                this.data = [

                    ['fp-6-1'],

                    ['fp-6-2', 'fp-6-3'],

                    ['fp-6-4', 'fp-6-5', 'fp-6-6']

                ];

                this.defaultShow = [4, 5, 6, 7, 8, 8];

                break;

            default:

                alert("不支持" + mode + "分屏");

        }

CSS布局控制：

.fp-box{position:absolute;border:1px solid #000;background:#fff;}

            .fp-1-1{top:;left:;right:;bottom:;}

            .fp-2-1{top:;left:;right: 300px;bottom:;}

            .fp-2-2{top:;right: 0px;bottom:; width: 300px;}

            .fp-3-1{top:;left:;right: 300px;bottom:;}

            .fp-3-2{top:;right:;width:300px;height:50%;}

            .fp-3-3{top:50%;right:;bottom:;width:300px;}

            .fp-4-1{top:;left:;right: 50%;height:50%;}

            .fp-4-2{top:50%;left:;right: 50%;bottom:;}

            .fp-4-3{top:;right:;width:50%;height:50%;}

            .fp-4-4{top:50%;right:;bottom:;width:50%;}

            .fp-5-1{top:;left:;right: 300px;bottom: 252px;}

            .fp-5-2{top:0px;width:300px;right:;bottom: 252px;}

            .fp-5-3{height: 250px;left:;width:30%;bottom:;}

            .fp-5-4{height: 250px;left:30%;width:30%;bottom:;}

            .fp-5-5{height: 250px;left:60%;bottom:;right:;}

            .fp-6-1{top:;left:;right: 300px;bottom: 252px;}

            .fp-6-2{top:;width:300px;right:;height:250px;}

            .fp-6-3{top:250px;width:300px;right:;bottom: 252px;}

            .fp-6-4{height: 250px;left:;width:30%;bottom:;}

            .fp-6-5{height: 250px;left:30%;width:30%;bottom:;}

            .fp-6-6{height: 250px;left:60%;bottom:;right:;}

完整代码：

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>fp version2</title>

    <style type="text/css">

            *{margin:0;padding:0;}

            .header{background:#ddd;height:120px;}

            .footerCon{width:320px;margin: 0 auto;}

            .footerCon .dropDiv{background: #fff; margin: 10px 0 0 0; float: left;}

            .footerCon .fpmodel{display: none;float: right;width:160px;}

            .footerCon .saveBtn{margin: 10px 0 0 10px; padding: 2px 10px;border:1px solid #CCC;cursor: pointer;}

            .clearFix:after{content:’’;display:block;height:0;overflow:hidden;clear:both;}

            .footer { height: 40px; background: #ABABAB; position: fixed; bottom: 0px; width: 100%; }

            .footer .ulTab {list-style-type: none;width:200px;overflow: hidden;float: left;}

            .footer .ulTab li{float: left;height:16px;padding: 12px 15px;cursor: pointer;}

            .footer .ulTab li.currentLi{background: #fff;}

            .tabImg{width:18px;height: 14px;border:1px solid #707070;background:#fff;}

            .tabImg td{width: 9px;height: 5px;border:1px solid #707070;}

            .divImg{border-width:2px;height: 12px;}

            .td3Img td{height: 3px;}

            .currentLi .tabImg,.currentLi .tabImg td{border-color:#1e7be4;}

            .topbarDiv{position: absolute;left: 0;top:0;right:0;border:1px solid #dedede;z-index: 1;height:25px;padding:3px;background: #61C0FA;display: none;}

            .changeBtn{cursor:pointer; padding: 2px 10px;float: left;}

            .dropDiv,.footer .dropDiv{position: relative;width: 100px;z-index: 100;}

            .dropDiv .curSrc,.footer .dropDiv .curSrc{display: inline-block;height: 20px;line-height: 20px;padding: 0 2px;}

            .dropDiv ul,.footer .dropDiv ul{position: absolute;left: -1px;top:20px;background: #fff;width:100px;border:1px solid #1E7BE4;display: none;}

            .dropDiv ul li,.footer .dropDiv ul li{line-height: 20px;padding: 0 2px;}

            .dropDiv ul li.currentSrc,.footer .dropDiv ul li.currentSrc{background: #1E7BE4;color: #fff;cursor: pointer;}

            .dropDiv ul li:hover,.footer .dropDiv ul li:hover{background:#AEC9F3;color: #fff;cursor: pointer;}

            .optionsWrap{float: right;}

            .optionsWrap a{font-family: 'MicroSoft YaHei';color:#fff;text-decoration:none;float: left;}

            .optionsWrap a:hover{color: #fdd;cursor:pointer;}

            .btnBig{width: 50px;height:30px;text-align: center;}

            .btnSmall{width: 50px;height:30px;text-align: center;}

            .btnCls{width: 50px;height:30px;text-align: center;}

            /*分屏模块布局*/

            .container{position: relative;}

            .fp-box{position:absolute;border:1px solid #000;background:#fff;}

            .fp-1-1{top:0;left:0;right: 0;bottom: 0;}

            .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}

            .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}

            .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}

            .fp-3-2{top:0;right: 0;width:300px;height:50%;}

            .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}

            .fp-4-1{top:0;left:0;right: 50%;height:50%;}

            .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}

            .fp-4-3{top:0;right: 0;width:50%;height:50%;}

            .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}

            .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}

            .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}

            .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}

            .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}

            .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}

            .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}

            .fp-6-2{top:0;width:300px;right: 0;height:250px;}

            .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}

            .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}

            .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}

            .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}

    </style>

</head>

<body>

        <div class="header">

            header

        </div>

        <div class="container" id="displayArea">

            <!-- 分屏内容区 -->

        </div>

        <div class="footer">

        <div class="footerCon clearFix">

            <ul class="ulTab">

                <li class="currentLi" data-fp ="1" onclick="changeModel(this)">

                    <div class="tabImg divImg"></div>

                </li>

                <li data-fp ="3" onclick="changeModel(this)">

                    <table class="tabImg" cellpadding="0" cellspacing="0">

                        <tr>

                            <td rowspan="2"></td>

                            <td></td>

                        </tr>

                        <tr>

                            <td></td>

                        </tr>

                    </table>

                </li>

                <li data-fp ="6" onclick="changeModel(this)">

                    <table class="tabImg td3Img" cellpadding="0" cellspacing="0">

                        <tr>

                            <td rowspan="2" colspan="2"></td>

                            <td></td>

                        </tr>

                        <tr>

                            <td></td>

                        </tr>

                        <tr>

                            <td></td>

                            <td></td>

                            <td></td>

                        </tr>

                    </table>

                </li>

                <li data-fp ="setting" onclick="changeModel(this)" title="设置">

                    <table class="tabImg td3Img" cellpadding="0" cellspacing="0">

                        <tr>

                            <td rowspan="2" colspan="2"></td>

                            <td></td>

                        </tr>

                        <tr>

                            <td></td>

                        </tr>

                        <tr>

                            <td></td>

                        </tr>

                    </table>

                </li>

            </ul>

        </div>

    </div>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="js/splitScreen.js"></script>

    <script type="text/javascript">

            //分屏数据

            var iframes = [

                    {

                        id:'frames_1',

                        frameName:'百度一下',

                        src:'http://www.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度地图',

                        src:'http://map.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度下',

                        src:'http://www.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度视频',

                        src:'http://v.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度新闻2',

                        src:'http://news.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'test6',

                        src:'6.html'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度新闻',

                        src:'http://news.baidu.com'

                    },

                    {

                        id:'frames_1',

                        frameName:'88888',

                        src:'6.html'

                    },

                    {

                        id:'frames_1',

                        frameName:'百度更多',

                        src:'http://www.baidu.com/more/'

                    }

                ];

            window.onload = function(){

                Panel.resize();

            }

            window.onresize = function(){

                Panel.resize();

            }

            //初始化分屏

            var splitScreen = new splitScreen($('#displayArea'),iframes);

            //监听removeSettingCls自定义事件

            splitScreen._on('removeSettingCls',function(){

                splitScreen.toggleTopbar(function(){

                        $('.ulTab li[data-fp="setting"]').removeClass('currentLi');

                    });

            });

            //分屏切换

            function changeModel(obj){

                var fpmodel = $(obj).attr('data-fp');

                if(fpmodel !="setting"){

                    splitScreen.screenMode(fpmodel,function(){

                        $(obj).addClass('currentLi').siblings().removeClass('currentLi');

                    });

                }else{

                    splitScreen.toggleTopbar(function(){

                        $(obj).toggleClass('currentLi');

                    });

                }

            }

    </script>

</body>

</html>

JS：

/**

 * splitScren.js

 * v1.2

 * 2015-5-14

 * by linxia

 **/

var splitScreen = function(elem, options) {

    this.elem = elem;

    this.options = options;

    this.initialize.apply(this);

}

splitScreen.prototype = {

    initialize: function() {

        this.handlers = {};

        this.screenMode(1);

    },

    screenMode: function(mode, callback) {

        this.elem.empty();

        this.data = null;

        this.defaultShow = null; //默认展示页面的索引

        switch (Number(mode)) {

            case 1:

                this.data = [

                    ['fp-1-1']

                ];

                this.defaultShow = [0];

                break;

            case 2:

                this.data = [

                    ['fp-2-1'],

                    ['fp-2-2']

                ];

                this.defaultShow = [1, 2];

                break;

            case 3:

                this.data = [

                    ['fp-3-1'],

                    ['fp-3-2', 'fp-3-3']

                ];

                this.defaultShow = [1, 2, 3];

                break;

            case 4:

                this.data = [

                    ['fp-4-1', 'fp-4-2'],

                    ['fp-4-3', 'fp-4-4']

                ];

                this.defaultShow = [4, 1, 2, 3];

                break;

            case 5:

                this.data = [

                    ['fp-5-1'],

                    ['fp-5-2'],

                    ['fp-5-3', 'fp-5-4', 'fp-5-5']

                ];

                this.defaultShow = [4, 5, 1, 2, 3];

                break;

            case 6:

                this.data = [

                    ['fp-6-1'],

                    ['fp-6-2', 'fp-6-3'],

                    ['fp-6-4', 'fp-6-5', 'fp-6-6']

                ];

                this.defaultShow = [4, 5, 6, 7, 8, 8];

                break;

            default:

                alert("不支持" + mode + "分屏");

        }

        if (this.data != null) {

            this.renderPanel();

            this.bindPanel();

        }

        callback && callback();

    },

    //渲染DOM结构

    renderPanel: function() {

        var that = this;

        var options = this.options;

        var htmlstr = '';

        for (var item = 0; item < options.length; item++) {

            htmlstr += '<option value="' + options[item].src + '" label = "' + options[item].frameName + '">' + options[item].frameName + '</option>';

        }

        for (var i = 0; i < this.data.length; i++) {

            var moduleDiv = $('<div></div>').addClass('fp-module-' + i + '');

            for (var j = 0; j < this.data[i].length; j++) {

                var fpDiv = $('<div>').addClass(this.data[i][j]).addClass('fp-box');

                var topbarDiv = $('<div class="topbarDiv" style="display: none;">' +

                    '<span class="optionsWrap">' +

                    '<a class="btnBig" title="放大" href="javascript:void(0);">放大</a><a class="btnSmall" title="缩小" href="javascript:void(0);" style="display:none;">缩小</a> <a href="javascript:void(0);" class="btnCls" title="关闭"style="display:none;">关闭</a>' +

                    '</span>' +

                    '<div class="dropDiv">' +

                    '<select class="fp-select"><option value="-1">请选择</option>' + htmlstr +

                    '</select>' +

                    '</div>' +

                    '</div>');

                var iframe = $('<iframe width="100%" height="100%" frameBorder="0" scrolling = "auto"></iframe>');

                if (i == 0) {

                    fpDiv.attr('zp', 'zp');

                }

                fpDiv.append(topbarDiv);

                fpDiv.append(iframe);

                moduleDiv.append(fpDiv);

                this.elem.append(moduleDiv);

            }

        }

        // render iframe

        this.elem.find('iframe').each(function(i) {

            if (options[i]['src']) {

                var frameSrc = options[that.defaultShow[i]]['src'];

                var frameName = options[that.defaultShow[i]]['frameName'];

                var curtopbar = $(this).siblings('.topbarDiv');

                that.loadIframe($(this), frameSrc, frameName);

                curtopbar.find('option').each(function() {

                    if ($(this).attr('label') == frameName) {

                        $(this).attr('selected', 'selected');

                    }

                });

            }

        });

    },

    bindPanel: function() {

        var that = this;

        // add select Event

        this.elem.on('change', '.fp-select', function() {

            var value = $(this).find('option:selected').val();

            var label = $(this).find('option:selected').attr('label');

            var iframe = $(this).closest('.fp-box').find('iframe');

            if (value != "-1") {

                that.loadIframe(iframe, value, label);

            }

        });

        // btnbig Event

        this.elem.on('click', '.btnBig', function() {

            var obj = Panel.getSize();

            var btnSmall = $(this).siblings('.btnSmall');

            var btnCls = $(this).siblings('.btnCls');

            var fpbox = $(this).closest('.fp-box');

            fpbox.css({

                'zIndex': 999

            }).stop().animate({

                'top': 0,

                'left': 0,

                'width': obj.w - 2,

                'height': obj.h,

                'right': 0,

                'bottom': 0

            }, 300).attr('scaleMode', 'large');

            that.elem.find('.fp-box:not([scaleMode="large"])').hide();

            $(this).hide();

            $('html,body').css({

                'overflow': 'hidden'

            });

            btnSmall.show();

            //btnCls.show();

        });

        // btnsmall Event

        this.elem.on('click', '.btnSmall', function() {

            var btnBig = $(this).siblings('.btnBig');

            var fpbox = $(this).closest('.fp-box');

            var btnCls = $(this).siblings('.btnCls');

            fpbox.removeAttr('style').removeAttr('scaleMode');

            $(this).hide();

            that.elem.find('.fp-box').show();

            $('html,body').css({

                'overflow': 'visible'

            });

            btnCls.hide();

            btnBig.show();

        });

        // btncls Event

        this.elem.on('click', '.btnCls', function() {

            var fpbox = $(this).closest('.fp-box');

            fpbox.remove();

            that.elem.find('.fp-box').show();

            that.fire('removeSettingCls');

        });

    },

    toggleTopbar: function(callback) {

        if (this.elem.find('.topbarDiv:visible').length > 0) {

            this.elem.find('.topbarDiv').hide();

        } else {

            this.elem.find('.topbarDiv').show();

        }

        callback && callback();

    },

    loadIframe: function(iframe, src, framename) {

        $(iframe).attr('src', src);

        $(iframe).attr('framename', framename);

    },

    _on: function(type, handler) {

        if (typeof this.handlers[type] == "undefined") {

            this.handlers[type] = [];

        }

        this.handlers[type].push(handler);

        return this;

    },

    fire: function(type, data) {

        if (this.handlers[type] instanceof Array) {

            var handlers = this.handlers[type];

            for (var i = 0, len = handlers.length; i < len; i++) {

                handlers[i](data);

            }

        }

    }

};

var Panel = {

    config: {

        header: $('.header'),

        container: $('.container'),

        footer: $('.footer'),

        win: $(window)

    },

    resize: function() {

        var topH = Panel.config.header.height();

        var botH = Panel.config.footer.height();

        var mainH = Panel.config.win.height() - topH - botH;

        mainH = mainH < 0 ? 100 : mainH;

        Panel.config.container.height(mainH);

        if ($('.fp-box[scaleMode="large"]').length > 0) {

            $('.fp-box[scaleMode="large"]').css({

                'width': Panel.config.win.width() - 2,

                'height': mainH

            });

        }

    },

    getSize: function() {

        var obj = {

            w: Panel.config.container.width(),

            h: Panel.config.container.height()

        };

        return obj;

    }

};

完整demo下载地址：

demo download

水平有限，欢迎各位高手指点，不胜感激....

基于jquery的页面分屏切换模板的更多相关文章

  1. 基于jQuery商城网站全屏图片切换代码

    基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slid ...

  2. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  3. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  6. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  7. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  8. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

  9. iterm 分屏切换快捷键与配色设置

    (1)快捷键设置 ⌘ + d: 垂直分屏, ⌘ + shift + d: 水平分屏. ⌘ + ]和⌘ + [在最近使用的分屏直接切换. ⌘ + opt + 方向键切换到指定位置的分屏. ⌘ + 数字: ...

随机推荐

  1. zTree：一个依靠 jQuery 实现的多功能 “树插件”

    官方网站: http://www.treejs.cn/v3/main.php#_zTreeInfo 使用方式: 步骤1.文件准备 将需要使用的 zTree v3.x 相关的 js.css.img 文件 ...

  2. Going Home HDU - 1533 费用流

    http://acm.hdu.edu.cn/showproblem.php?pid=1533 给一个网格图,每两个点之间的匹配花费为其曼哈顿距离,问给每个的"$m$"匹配到一个&q ...

  3. docker简单入门之使用docker容器部署简单的java web开源项目jpress博客程序

    一.在centos7.3上安装docker 前置条件 x86_64-bit 系统 kernel 3.10+ .检查内核版本,返回的值大于3.10即可 [root@node1 ~]# uname -r ...

  4. Docker入门 - 006 Docker 多种数据库的安装

    Docker 安装 MySQL 查找Docker Hub上的mysql镜像 root@VM_16_14_centos ~# docker search mysql INDEX NAME DESCRIP ...

  5. [JavaScript]iframe的contentWindow

    HTMLIFrameElement.contentWindow返回的是HTMLIFrameElement类型元素的window对象 通过此对象可以修改iframe实体内的window行为 <if ...

  6. Java数据结构与算法解析(十二)——散列表

    散列表概述 散列表就是一种以 键-值(key-indexed) 存储数据的结构,我们只要输入待查找的值即key,即可查找到其对应的值. 散列表的思路很简单,如果所有的键都是整数,那么就可以使用一个简单 ...

  7. python-面向对象（绑定方法与非绑定方法）

    一.绑定方法: 绑定给谁就应该由谁来调用,谁来调用就会将谁当做第一个参数传入 1.绑定给对象的方法:类中定义的函数默认就是绑定给对象的,自动将对象当作第一个参数传入,类也可以调用,但是不会自动传值 2 ...

  8. 修改MongoDB密码

    修改MongoDB密码 禁用管理员(root)密码 1.找到配置文件mongod.conf,并进入 vim /etc/mongod.conf 2.禁用管理员(root)密码 找到: security: ...

  9. Java的动手动脑（六）

    日期:2018.11.8 星期四 博客期:022 --------------------------------------------------------------------------- ...

  10. flask 初学1

    py 文件中 from flask import Flask,redirect,request,url_for,jsonifyfrom Flask_5.config import Config fro ...