做一个略调皮的个人主页--结构篇

目录

做一个略调皮的个人主页--菜单篇

做一个略调皮的个人主页--结构篇

首先感谢大家这么给面子,看到评论我也特别的开心。

不过要实现声明一下,之前忘记说了,这个设计的灵感来自于某设计公司给某银行做的办理系统的一张宣传图,当初看到的时候就特别的喜欢,就拿来做为自己的个人主页啦,大家看到的第一眼就是那张宣传图,之后的动态效果以及别的页面就都是自己的东西啦。

我的个人主页

上一篇:做一个略调皮的个人主页--菜单篇

源码是挂在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里书写即可。

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

阅读原文:做一个略调皮的个人主页--结构篇

时间: 2024-11-06 09:41:09

做一个略调皮的个人主页--结构篇的相关文章

做一个略调皮的个人主页--菜单篇

目录 做一个略调皮的个人主页--菜单篇 做一个略调皮的个人主页--结构篇 由于要重新找工作,所以做了一个自己的个人主页,觉得还好,所以分享出来,也算是自己的一些记录. 具体演示可以查看我的个人主页. 大体都是一些css3的应用,干货实在很少,做来玩乐罢了. 第一次写这方面的文章,行散神也散,望海涵. 首先,先列出less文件的公共部分以及常量. 公共类: ... 原文来自:做一个略调皮的个人主页--菜单篇

做一个略调皮的个人主页--游戏篇

最近严重加班,非常严重··· 万恶的discuz啊,还有万恶的环境问题,死了算了. 这个应该是这个系列最后一篇啦,之后我会做另一个想法.主要是用来查看文章的一个主页,期间发些自己觉得好玩的东西出来. 这一篇主要介绍一下我做的一个flappy bird.由于是自己js手写的,效率肯定不高,就当拿来玩的罢.浏览器不好回很卡哦. 效果演示在这里: flappy bird 首先闭一个包,在里面写个向外接口: ..... 然后分步骤去实现这个东西. 第一步,是解决自由落体,这个我们借用一下google在某

D3.js 的基本用法外加一个略调皮的demo

前几天看到社区里有人发帖子比较了三个比较主流的图表插件,大家都对heightCharts情有独钟,不过无奈无良主管个人爱好D3多一些,所以我的图表第一次就这么给了D3··· 这是我用D3+react做的一个图表,不过由于扩展性不是很好,就不贴源码了. http://yansm.github.io/react-d3-test/ D3的学习曲线确实有些不好,关键是api给的乱七八糟,还不如看demo来的明白,也让人产生了退却感. 其实D3不算是一个图表插件,他更像是操作svg的“jquery”,所以

我想做一个合格的工程师

我想吐槽下,在新公司经过三个月的试用期,前两天终于完成了转正答辩,其实答辩就是两个我们项目组的两个项目经理(一个项目经理马上要离任了,另外一个新来的两个月,继任前者作为项目经理.),还有一个人事的同事.连一个部门经理或者稍大点的领导都没有参与我的答辩.感觉答辩的意义都没有了,但是巨坑的是,新项目经理说“有木有打算培训班学习想法”,“对数据库的应用要学习学习”,我想这不是赤裸裸讽刺我基础太差么?其实我确实来这家公司之前,没有用过MVC,这个能力也学稍弱与这个项目经理.但是我可以讲,我的其他能力绝对

前端的小玩意(9.5)——做一个仿360工具箱的web页面(完结篇,可以跑起来的工具箱)

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 前端的小玩意(9.3)--做一个仿360工具箱的web页面(我的工具里的模板和样式) http://blog.c

做一个明媚的女子,不倾国也不倾城

我愿做一个明媚的女子.不倾国,不倾城,只倾其所有过自己要的生活. 听着办公室哒哒哒的键盘声,和同事之间的交流声,我依旧我行我素的带着耳机做自己喜欢的事情.仿佛自然的屏蔽了这世俗的烦忧.忙碌的生活我依然习惯了懒散,仿佛自己不属于这个快节奏的生活一样. 不因为名利而去阿谀奉承:不因任何人的要求去勉强什么.对啊我就是这么任性,(我就是我,不一样的烟火!). 对了我昨天辞职了,之前我想到的很多结果今天都不是,辞职的很平静.其实我之前一直担心自己辞职后要面试啊,找工作啊等等... 那时候不敢去辞职,更多的

jsPlumb插件做一个模仿viso的可拖拉流程图

前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义拖拉的流程图,并且可以序列化保存在服务器端. 我在这次的实现上面做得比较粗糙,还有分享我在做jsPlumb流程图遇到的一些问题. 准备工作 制作流程图用到的相关的脚本: 1 <script src="<%= ResolveUrl("~/resources/jquery/jquery-1.11.1.min.js")%>" type="t

React-Native做一个文本输入框组件

我又回来啦! 由于最近一直在做公司的项目,而且比较急.如今项目已经迭代到第三期,可以缓一缓了... 今天在公司里听前端的说,这个项目本来是用React-Native做的(去年10月份),但是做到一半发现坑太多,就中途放弃了,于是让我们android和iOS重新开发... 作为非常喜欢这个技术的我来说,表示相当的不服. 于是我打算利用闲暇时间做一个一模一样的出来,反正接口我都有(嘻嘻) 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了. 好了,废话不多

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数