做一個略調皮的個人主頁--結構篇
目錄
做一個略調皮的個人主頁--結構篇
首先感謝大家這么給面子，看到評論我也特別的開心。
不過要實現聲明一下，之前忘記說了，這個設計的靈感來自于某設計公司給某銀行做的辦理系統的一張宣傳圖，當初看到的時候就特別的喜歡，就拿來做為自己的個人主頁啦，大家看到的第一眼就是那張宣傳圖，之后的動態效果以及別的頁面就都是自己的東西啦。
源碼是掛在git上的，大家可以隨便下。
如果有git的，記得給星哦~~~~~~
這里說一下整體的結構情況。首先總共有七個菜單以及五個區域，如下代
/*七個菜單*/ <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">我的臨摹網站</em></li> <li data-type="left"><span class="glyphicon glyphicon-folder-open "></span><em class=" rel">我的工作經歷</em></li> <li data-type="right"><span class="glyphicon glyphicon-send "></span><em class=" rel">我的游戲</em></li> </ul> /*五個區域*/ <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>
所以有的區域就會要展現兩個以上的內容（如有兩個left形態以及兩個right形態）。所以呢，這里需要進行一下控制，由于其他菜單的內容也很多，所以在第一次點擊其他菜單的時候用了一下ajax來load進要展現的頁面。
整體我閉了兩個包，一個是主頁的事件控制，一個是分頁的事件控制，然后再load的回調方法里去運行對應的分頁控制js代碼。
每次點擊的時候都做一次判斷，判斷頁面是否已經插入，如果沒有，就進行load，如果有，就正常打開。
具體代碼如下：
/* 主頁菜單點擊動作 */ .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是區域的標識，target是內容的標識。
如果找不到 box_target 這個元素，那么就加一個，然后用ajax 來 load 進 target.html 這個頁面，然后在回調方法 init 對應的方法即可。
分頁的構造如下：
/* 區域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() {} ······ }
這樣，整個頁面的大體構造就完成了，以后的編寫代碼只需要在對應的html以及function里書寫即可。
注意的是首頁是直接寫在里面的。就不需要再加新的頁了。
閱讀原文：做一個略調皮的個人主頁--結構篇
本文由用戶 tyygming 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！