jQuery.fn.layout

Процесс разработки и конечный результат

by roskoshinsky

HTML

<div class="viewport" >
    <div class="row" >
        <div class="cell" >1</div>
        <div class="cell" >2</div>
    </div>
    <div class="row" >
        <div class="cell" >3</div>
        <div class="cell" >4</div>
    </div>
    <div class="row" id="therow" style="layout-width-cui-a2c:100%" >
        <div class="cell" >5</div>
        <div class="cell" >6</div>
    </div>
</div>

CSS

html {width:100%; height:100%;}
html * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0px; margin:0px; border:0px; font-size:0px; font-weight:0; font-family:Helvetica, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {width:100%; height:100%;}

.viewport, .viewport .row, .viewport .cell {display:block; position:relative;}
.viewport {width:100%; height:100%;}
.viewport .row {clear:left; background:yellow; font-size:14px;}
.viewport .cell {float:left; text-align:center; border:1px dotted black; font-size:14px;}

.viewport .resizer-viewport {position:absolute; display:block; cursor:pointer;}
.viewport .resizer-viewport.resizer-3-viewport {width:100%; height:5px; left:0px; bottom:0px; background:red;}

JavaScript

console.clear();

String.prototype.prcexp = function(dPercentage){
    var dPercentage = dPercentage || 1;
    return parseFloat(eval(this.replace(/([0-9\.]+)\%/g, function(sString, sEntry1){ return parseFloat(sEntry1 * dPercentage) })));
}; //

(function($){
    
jQuery.fn.layoutResizers = function(bRecursive){
    var $parent = $(this);
    $(("> *"), $parent).each(function(){
        var $this = $(this);
        if(iLayoutResizer && $parent.data("bLayout") == undefined){
            console.log("resizer");
            $this.$oResizer = $("<div class=\"resizer-viewport\"><div></div></div>").appendTo($this);
            $this.$oResizer.addClass("resizer-" + iLayoutResizer + "-viewport");
            if(iLayoutResizer == 3){
                $this.data("sLayoutHeightDefault", sLayoutHeight);
                sLayoutHeight = "(" + sLayoutHeight + ")" + " + " + $this.$oResizer.outerHeight();
                $this.data("sLayoutHeight", sLayoutHeight);
            } // if
        } // if
        if($this.children().length){
            $this.layoutResizers(true);
        } // if
    }); // e
} // jQuery.fn.layoutResizers

jQuery.fn.layout = function(bRecursive){
    var $parent = $(this),
    bRecursive = bRecursive || false,
    iHeightParent = $parent.height(),
    iWidthParent = $parent.width(),
    dHeightParentPercentage = parseFloat(iHeightParent / 100),
    dWidthParentPercentage = parseFloat(iWidthParent / 100);
    if(!bRecursive){
        $parent.layoutResizers();
    } // if
    $(("> *"), $parent).each(function(){
        var $this = $(this),
        sLayoutWidth = $this.data("sLayoutWidth"),
        sLayoutHeight = $this.data("sLayoutHeight");
        if($this.children().length){
            $this.layout(true);
        } // if
    }); // e
    if(!bRecursive){
        if($parent.data("bLayout") == undefined){
            $parent.data("bLayout", true);
            $parent.on("resizestop", function(){
                $parent.layout();
            }); // on
 ...