做一個略調(diào)皮的個人主頁--結(jié)構(gòu)篇

這個設(shè)計的靈感來自于某設(shè)計公司給某銀行做的辦理系統(tǒng)的一張宣傳圖，當(dāng)初看到的時候就特別的喜歡，就拿來做為自己的個人主頁啦，大家看到的第一眼就是那張宣傳圖，之后的動態(tài)效果以及別的頁面就都是自己的東西啦。

目錄

做一個略調(diào)皮的個人主頁--菜單篇
做一個略調(diào)皮的個人主頁--結(jié)構(gòu)篇

首先感謝大家這么給面子，看到評論我也特別的開心。

不過要實現(xiàn)聲明一下，之前忘記說了，這個設(shè)計的靈感來自于某設(shè)計公司給某銀行做的辦理系統(tǒng)的一張宣傳圖，當(dāng)初看到的時候就特別的喜歡，就拿來做為自己的個人主頁啦，大家看到的第一眼就是那張宣傳圖，之后的動態(tài)效果以及別的頁面就都是自己的東西啦。

我的個人主頁

上一篇：做一個略調(diào)皮的個人主頁--菜單篇

源碼是掛在git上的，大家可以隨便下。

源碼

如果有g(shù)it的，記得給星哦~~~~~~

這里說一下整體的結(jié)構(gòu)情況。首先總共有七個菜單以及五個區(qū)域，如下代

    /*七個菜單*/
    <ul class="indexMenu">
    <li data-type="normal"><span class="glyphicon glyphicon-home"></span><em class=" rel">我的主頁</em></li>
    <li data-type="left"><span class="glyphicon glyphicon-user "></span><em class=" rel">我的信息</em></li>
    <li data-type="top"><span class="glyphicon glyphicon-picture "></span><em class=" rel">我的相冊</em></li>
    <li data-type="right"><span class="glyphicon glyphicon-pencil "></span><em class=" rel">我的隨筆</em></li>
    <li data-type="bottom"><span class="glyphicon glyphicon-film "></span><em class=" rel">我的臨摹網(wǎng)站</em></li>
    <li data-type="left"><span class="glyphicon glyphicon-folder-open "></span><em class=" rel">我的工作經(jīng)歷</em></li>
    <li data-type="right"><span class="glyphicon glyphicon-send "></span><em class=" rel">我的游戲</em></li>
    </ul>
    /*五個區(qū)域*/
    <section class="area_main abs ovh"></section>
    <section class="area_right abs"></section>
    <section class="area_left abs"></section>
    <section class="area_top abs"></section>
    <section class="area_bottom abs"></section>

所以有的區(qū)域就會要展現(xiàn)兩個以上的內(nèi)容（如有兩個left形態(tài)以及兩個right形態(tài)）。所以呢，這里需要進行一下控制，由于其他菜單的內(nèi)容也很多，所以在第一次點擊其他菜單的時候用了一下ajax來load進要展現(xiàn)的頁面。

整體我閉了兩個包，一個是主頁的事件控制，一個是分頁的事件控制，然后再load的回調(diào)方法里去運行對應(yīng)的分頁控制js代碼。

每次點擊的時候都做一次判斷，判斷頁面是否已經(jīng)插入，如果沒有，就進行l(wèi)oad，如果有，就正常打開。

具體代碼如下：

    /* 主頁菜單點擊動作 */
    .click(function () {
    var $this = $(this), type = $this.data('type'), target = $this.data('target')
    , $area = $('.area_'+ type),flag = $area.data('flag') ? $area.data('flag') : '';
    if(target && $area.find('.box_'+ target).length == 0) {
    $area.append('<div class="scroll-pane box box_'+ target +'"></div>');
    $area.find('.box_'+ target).load(target+ ".html",function () {
    $area.find('.box_'+ target).jScrollPane();
    $.initModule({target : target});
    });
    }
    if(target){
    $area.data('flag',target).find('> * ').removeClass('active');
    $area.find('.box_'+ target).addClass('active');
    }
    if($body.hasClass('type_'+ type) && flag == target) return;
    menuClickType[type]();
    });

這里用到了一個滾動條的插件——jScrollPane

這里邏輯可能有些亂，一共是兩個flag，一個是target，一個是type，type是區(qū)域的標(biāo)識，target是內(nèi)容的標(biāo)識。

如果找不到 box_target 這個元素，那么就加一個，然后用ajax 來 load 進 target.html 這個頁面，然后在回調(diào)方法 init 對應(yīng)的方法即可。

分頁的構(gòu)造如下：

    /* 區(qū)域js加載 */
    $(function () {
    var moduleMap = {
    'myInformation' : myInformation
    ,'myPhotos' : myPhotos
    ,'myArticle' : myArticle
    ,'myRecode' : myRecode
    ,'myWork' : myWork
    ,'myGame' : myGame
    }
     
    $.extend({
    initModule : function (settings) {
    var target = settings.target;
    moduleMap[target]();
    }
    });

      /* 我的信息 js 加載 */
    function myInformation() {}

    ······

    }

這樣，整個頁面的大體構(gòu)造就完成了，以后的編寫代碼只需要在對應(yīng)的html以及function里書寫即可。

注意的是首頁是直接寫在里面的。就不需要再加新的頁了。

閱讀原文：做一個略調(diào)皮的個人主頁--結(jié)構(gòu)篇

posted @ 2014-10-14 16:58 igeekbar 閱讀(456) 評論(0) 收藏舉報

刷新頁面返回頂部

做一個略調(diào)皮的個人主頁--結(jié)構(gòu)篇

公告

中文互聯(lián)： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱