Create a slightly naughty personal homepage-structure

Source: Internet
Author: User

Create a slightly naughty personal homepage-structure


Directory

Create a slightly naughty personal homepage-menu

Create a slightly naughty personal homepage-structure

First of all, I would like to thank everyone for giving me a face and seeing comments.

However, I forgot to say that the design was inspired by a promotional image of the processing system provided by a design company to a bank. I liked it very much when I first saw it, we use it as our personal homepage. The first sight we see is the publicity picture. The dynamic effect and other pages are our own things.

My personal homepage

Previous Article: Create a slightly naughty personal homepage-menu

The source code is mounted on git.

Source code

If you have git, please remember to give it to Xing ~~~~~~

Here we will talk about the overall structure. First, there are a total of seven menus and five areas.

/* Seven menus */
 
 
  • My homepage
  • My information
  • My album
  • My Essays
  • My copy website
  • My work experience
  • My games
/* Five Regions */

Therefore, some regions need to display more than two contents (such as two left and two right ). Therefore, we need to perform some control here. Because there are a lot of other menus, we used ajax to load the pages to be displayed when we clicked other menus for the first time.

As a whole, I closed two packages. One is the event control of the home page, the other is the paging event control, and then run the corresponding paging control js code in the load callback method.

Each time you click, make a judgment to determine whether the page has been inserted. If not, load the page. If yes, it will open normally.

The Code is as follows:

/* Click action on the home page menu */. 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 (''); $ 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] () ;});

A plug-in of the scroll bar -- jScrollPane is used here.

Here the logic may be a bit messy. There are two flags in total, one is the target, the other is the type, the type is the region identifier, and the target is the content identifier.

If the box_target element cannot be found, add one, load it into the target.html page using ajax, and then use the method corresponding to the callback method init.

The page structure is as follows:

/* Loading js in the region */$ (function () {var moduleMap = {'myinformation': myInformation, 'myphotos': myPhotos, 'myarticle': myArticle, 'myrecord ': myRecode, 'mywork': myWork, 'mygame': myGame} $. extend ({initModule: function (settings) {var target = settings.tar get; moduleMap [target] () ;}});
/* Load my information js */function myInformation (){}······}

In this way, the general structure of the entire page is complete, and subsequent code compilation only needs to be written in the corresponding html and function.

Note that the homepage is directly written in. You do not need to add new pages.

Read the original article: Create a slightly naughty personal homepage-structure

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.