Xoops布景開發->用js做一個判斷某區塊最大寬度並均分其他區塊寬度的方法!!-教學撰寫:徐嘉裕Neil hsu

最近幫客戶開發xoops佈景遇到一個功能需求，就是假設上方有4個區塊，當其中一個區塊的寬度大於預設值時，該區塊寬度將大於其他三個區塊，其他三個區塊均分剩下的寬度，反之如果四個區塊預設大小都沒超過預設寬度，則四個區塊都套用均分寬度，這樣講大家可能會搞不清楚我要說什麼碗糕，直接截圖給大家看比較快!!。


當四個區塊中有一個區塊寬度大於預設值時(紅框)，該區塊寬度會大於其他三個區塊!!

如果四個區塊預設寬度都沒大於預設值時，則套用均分寬度!

本來想說用css的min-width或是max-width因該就能做出這效果了，但事情往往不是像所想的那樣簡單，經過反覆測試最後還是要用js來做計算判斷才行，所以寫了一個js程式包括佈景結構跟css部分，有需要的朋友參考看看。


js程式部分

可以先建立一個.js檔然後在佈景上head引入，之後是程式部分(藍字可改)


$(document).ready(function(){

var $i=0;

var $blockdivlength=$("#leftbox .blockdiv").length;

var $leftbox=$("#leftbox").height();


$(".leftwidth").each(function(index) {

var index=index+1;

$leftwidth =$(".left"+index+"").width();


//高度設定

$(".left"+index+"").css("min-height", $leftbox+"px");


//寬度判斷--480為寬度的預設值，小於480寬度區塊套用min-width:256px設定

if($leftwidth<'480'){

$i=$i+1;

$(".left"+index+"").css("min-width", "256px");

}else{

//大於480寬度區塊套用width:502px設定

$(".left"+index+"").css("width", "502px");

}

});

//迴圈區之外

if($blockdivlength == $i){

//如果4個區塊預設寬度都沒有超過480則套用min-width:316px設定

$("#leftbox .blockdiv").css("min-width", "316px");

}

});


佈景樣板部分

紅字為需要增加的class及id設定，讓js能抓取數值及做控制所用

略-------------------

<{if $id eq left && $xoBlocks.canvas_left}>

<article id="<{$id}>div" >

<div id='leftbox'>


<{foreach item=block from=$xoBlocks.canvas_left name=canvasleft}>

<{if $smarty.foreach.canvasleft.iteration <5}>

<div class="td">

<aside id="xo-block<{$block.module}>" class="<{cycle values="left1,left2,left3,left4"}> blockdiv leftwidth">

<{if $block.title|truncate:7:"":true eq $smarty.const.THEME_NOBOX}>

<{$block.content}>

<{else}>

<h4 class="block-title"><span><{if $block.module neq 'system' && $block.module neq '' && $block.module neq 'neothemesadmin'}><a title="<{$block.title}>" href="<{xoAppUrl /}>modules/<{$block.module}>"><{$block.title}></a><{else}><{$block.title}><{/if}> </span></h4>

<div class="blockcontent"><{$block.content}></div>

<{/if}>

<{includeq file="$theme_name/blocksadmin.tpl"}>

</aside>

</div>

<{/if}>

<{/foreach}>


</div>

</article>

<{/if}>

略-------------------


佈景css部分

藍字為區塊寬度的預設數值，最大寬度不能超過502px

#leftbox .blockdiv{

max-width: 502px;
padding: 0px 8px 0px 8px;

}

//其他的部分包括.block-title及.blockcontent 都不能設寬度，全部由˙js端來給值。

有問題歡迎留言討論!!

教學撰寫：徐嘉裕 Neil hsu