"Three-stone jquery video Tutorial" 03. Create a vertical timesheet (Timeline)

Source: Internet
Author: User

Video Address: http://v.qq.com/page/g/i/o/g0150rvi6io.html

Hello everyone, Welcome to "three-stone jquery video Tutorial", I am your old friend-Sansheng stone.

Today, we are going to use the basic HTML, CSS, jquery to achieve the vertical schedule, first look at the final product:

For simplicity, each node in the timesheet is replaced with a picture, which may be the title-picture-Body shape in the actual application.

STEP1: Site Directory

The site directory is very simple and contains three parts: the lesson3.html file, the Lib directory, and the images directory.

Where lesson3.html contains the most basic components of a page, the correct settings DOCTYPE help the page render correctly in a modern browser.

<! DOCTYPE html>

The Lib directory contains only the latest JQuery libraries, and the images directory contains the 9 images used.

STEP2: Page structure

Add basic HTML tags to the page.

    1. to implement the two-color background of the time label, nested a two-layer div, using the CSS style class year and Year-inner to mark the list of events in the
    2. timesheet with ul.events li organization
    3. finally to the outside The timesheet node of the layer defines the style class timeline
<! DOCTYPE html>

  

The page displays the effect at this point:

STEP3: Style of the time label

Let's create the style of the time label, in order to achieve a two-color round background, we have made the following efforts:

    1. Fixed width and height, with Border-radius equal to 1/2 of width and height for circular backgrounds
    2. Two background colors directly from the Fineui (Pro Edition) version update page
    3. To have the Time label (2015) centered in Year-inner, define the Line-height and Text-align properties respectively
    4. In order for Year-inner to be centered in year, we used absolute positioning (top:50%; margin-top:-25px;) CSS Tips

<style>body {background-color: #efefef;} #main {margin:20px Auto;}. Timeline. Year {background-color: #AFDCF8; width:60px;height:60px;border-radius:30px;position:relative;margin:0 Auto 50px;}. Timeline. year-inner {background-color: #46A4DA; Width:50px;height:50px;text-align:center;line-height:50px;color: # Fff;border-radius:25px;position:absolute;top:50%;margin-top: -25px;left:50%;margin-left: -25px;}. Events img {width:100%;} </style>

  

The page displays the effect at this point:

STEP4: Let the Picture Show around

In order for the picture to be evenly displayed, that is, a left, a right, and then a left, a right, so you need to clearly distinguish between odd and even-numbered Li tags, we use JQuery to accomplish this task:

<script src= "lib/jquery.js" ></script><script>$ (function () {$ ('. Timeline. Events Li:nth-child (2n) '). addclass (' Alt ');}); </script>

JQuery's sub-selector: nth-child (2n) is used to select even items in the list and to add style class Alt.

Below, we define by CSS, the left and right sides of the picture occupy 40% of the width, that is, the middle reserved 20% width, with a diagram to explain briefly:

Use the float style to display the picture left and right, with a specific CSS definition:

. Timeline Events Li {width:40%;margin-bottom:100px;border:solid 1px #AFDCF8;p adding:10px;border-radius:5px;float:l Eft;clear:left;}. Timeline. events Li.alt {float:right;clear:right;margin-top:50px;margin-bottom:50px;}

  

The page effect at this point:

STEP5: Vertical background line behind the time label

We could have used an absolutely positioned div node to do this, but it would be easier to use the after pseudo-selector to look at the CSS definition first:

. timeline {overflow:hidden;position:relative;}. Timeline:after {content: "";p osition:absolute;width:6px;height:100%;background-color: #AFDCF8; top:0;left:50%; Margin-left: -3px;}

: The after pseudo-selector is used to insert new content after the contents of an element:

    • Content defines what's new to insert, and here we don't need to insert any text content, so leave it blank
    • Absolute positioning of new content, just as with normal div nodes
    • To make the vertical background line appear horizontally, we also use the top:50% + Margin-top tips mentioned above.

The page effect at this point:

 

STEP6: Vertical background line to the picture's connection line

Using a similar pseudo-selector, it is easy to define a connection line relative to each Li node:

. Timeline Events Li {width:40%;margin-bottom:100px;border:solid 1px #AFDCF8;p adding:10px;border-radius:5px;float:l Eft;clear:left;position:relative;}. Timeline. Events Li:after {content: "";p Osition:absolute;top:30px;left:100%;width:25%;height:6px;background-color: #AFDCF8;}

Special attention to the points:

    • left:100% is used to indicate that the connector is displayed immediately to the right of the icon
    • The width:25% is used to define the width of the connector, which occupies the distance from the right side of the picture to the vertical background line

A huge question number ? Why is 25%, not the other value?

In fact, this is carefully arranged:

Recall that the picture occupies a width of 40%, then the connection line should occupy the entire width of 10% = (100%-40% * 2)/2, which is obvious!

But Li:after's absolute positioning (position:absolute) is relative to the first non-static location of the parent node, where the parent node is the. Timeline. Events Li itself, so the width of the connection line relative to the LI:

40% * x = 10% = (100%-40% * 2)/2, can be calculated x = 25%

====

Assuming that the width of the CSS in the image is set to 45%, then the li:after width should be ((100%-45% * 2)/2)/45% = 11.1%

The page effect at this point:

STEP7: Custom Size box model (box-sizing)

Although we vowed to say that the 25% is carefully arranged, but the actual effect of the difference is very far, the width of the connection line is significantly wider.

If this is the actual width of our calculation, we will find that the actual width of the picture is 40%, which does not include the padding (padding) and the border (border)!

At this point we need to reset the box-sizing of all the elements on the page, from the default value Content-box to Border-box, which is also the recommended practice.

Many of the annotated CSS frameworks (including the now-popular BootStrap) Use this rule as the default style:

* {    box-sizing:border-box;}

Here is a simple comparison of the two differences:

    • Content-box: The width and height set for the element do not contain padding and borders
    • Border-box: The width and height set for the element contain padding and borders

The page effect at this point:

  

  

STEP8: Full CSS code

Adding a connector to the right picture is also simple, here's a look at the full CSS code:

* {Box-sizing:border-box;} Body {background-color: #efefef;} #main {margin:20px Auto;}. Timeline {overflow:hidden;position:relative;}. Timeline:after {content: "";p osition:absolute;width:6px;height:100%;background-color: #AFDCF8; top:0;left:50%; Margin-left: -3px;z-index:0;}. Timeline. Year {background-color: #AFDCF8; width:60px;height:60px;border-radius:30px;position:relative;margin:0 Auto 50px;clear:both;z-index:1;}. Timeline. year-inner {background-color: #46A4DA; Width:50px;height:50px;text-align:center;line-height:50px;color: # Fff;border-radius:25px;position:absolute;top:50%;margin-top: -25px;left:50%;margin-left: -25px;}. Timeline. events {List-style-type:none;padding:0;margin:0;clear:both;}. Timeline. Events Li {width:40%;margin-bottom:100px;border:solid 1px #AFDCF8;p adding:10px;border-radius:5px;float:le Ft;clear:left;position:relative;}.  Timeline. Events Li:after {content: "";p osition:absolute;top:30px;left:100%;width:25%; /* 10% = 1 * 40% * 25% */hEight:6px;background-color: #AFDCF8;}. Timeline. events Li.alt {float:right;clear:right;margin-top:50px;margin-bottom:50px;}. Timeline. Events Li.alt:before {content: "";p osition:absolute;top:30px;left: -25%;width:25%;height:6px; Background-color: #AFDCF8;}. Events img {width:100%;}

  

The final page effect:

Source code and video download

Source and video please go to the video to find! Three stone produced, will be a boutique!


"Three-stone jquery video Tutorial" 03. Create a vertical timesheet (Timeline)

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.