模擬迴圈單擊事件實現layout中間panel全屏

浪花一朵朵發表於2014-05-06
事件

jquery提供了toggle方法 toggle() 方法切換元素的可見狀態。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

語法

$(selector).toggle(speed,callback,switch)
下面的方法模擬了easyui layout中center panel全屏，當點選全屏按鈕時，隱藏上，下左右四個panel,中間的panel自動伸開，佔滿滿屏，再次點選時，東南西征北四個panel依次顯示，中間的panel收縮
這裡定義了一個全域性變數i,當i 為奇數時第一次單擊，當i為偶數時相當於再次單擊。i等於100時清0.
如果用toggle方法，達不到效果，因為toggle方法預設就隱藏元素，隱藏元素，layout皮膚不會自動伸縮，就沒有了全屏顯示的效果。同時要為每一個元素新增toggle方法。用下面的方法，精簡了程式碼。也方便理解。這裡提供了一種簡單的解決方案，
拋磚引玉吧。
var i=1;
function makeMax() {
    i=i+1;
    if(i%2)
    {

        $('body').layout('expand', 'west');
        $('body').layout('expand', 'north');
        $('body').layout('expand', 'south');
        $('body').layout('expand', 'east');
        i=i==100?0:i;
    }
    else
    {

        $('body').layout('collapse', 'west');
        $('body').layout('collapse', 'north');
        $('body').layout('collapse', 'south');
        $('body').layout('collapse', 'east');
    }
}

 

相關文章