Форматирование временной шкалы jquery?

Question

Я использую график плагин от here

Это мой текущий код:

<ul id="dates"> 
<li><a href="#1940s">1940s</a></li> 
<li><a href="#1950s" class="selected">1950s</a></li> 
<li><a href="#1960s">1960s</a></li> 
<li><a href="#1970s">1970s</a></li> 
<li><a href="#1980s">1980s</a></li> 
<li><a href="#1990s">1990s</a></li> 
<li><a href="#2000s">2000s</a></li> 
</ul> 
<ul id="issues"> 
<li id="1940s"><img src="/gfx/timeline/1950.jpg" /> 
<h1>1940's</h1> 
<p>Ronald.</p> 
</li> 
<li id="1950s"><img src="/gfx/timeline/1960.jpg" /> 
<h1>1950's</h1> 
<p>Eddy.</p> 
</li> 
<li id="1960s"><img src="/gfx/timeline/1970.jpg" /> 
<h1>1960's</h1> 
<p>1960s</p> 
</li> 
<li id="1970s"><img src="/gfx/timeline/1980.jpg" /> 
<h1>1970's</h1> 
<p>1970s</p> 
</li> 
<li id="1980s"><img src="/gfx/timeline/1990.jpg" /> 
<h1>1980's</h1> 
<p>1980s</p> 
</li> 
<li id="1990s"><img src="/gfx/timeline/1990.jpg" /> 
<h1>1990's</h1> 
<p>1990s</p> 
</li> 
<li id="2000s"><img src="/gfx/timeline/2000.jpg" /> 
<h1>2000s</h1> 
<p>2000s</p> 
</li> 
</ul> 

Но я не понимаю, как я могу сделать это выглядеть ...

Любая помощь? Спасибо

Текущий CSS:

#timeline { 
    width: 660px; 
    height: 350px; 
    overflow: hidden; 
    margin: 100px auto; 
    position: relative; 
    background: url('Img/vline.png') left 65px repeat-x; 
} 
#dates { 
    width: 660px; 
    height: 60px; 
    overflow: hidden; 
} 
#dates li { 
    list-style: none; 
    float: left; 
    width: 100px; 
    height: 50px; 
    font-size: 24px; 
    text-align: center; 
    background: url('Img/hline.png') center bottom no-repeat; 
} 
#dates a { 
    line-height: 38px; 
    text-decoration:none; 
    color:#999; 
    font-size:15px; 
    font-weight:bold; 
} 
#dates .selected { 
    font-size: 38px; 
    color:#000; 
} 

#issues { 
    width: 660px; 
    height: 350px; 
    overflow: hidden; 
} 
#issues li { 
    width: 660px; 
    height: 350px; 
    list-style: none; 
    float: left; 
} 
#issues li img { 
    float: right; 
    margin: 100px 30px 10px 50px; 
} 
#issues li h1 { 
    color: #999; 
    font-size: 20px; 
    margin: 20px 0; 
} 
#issues li p { 
    font-size: 14px; 
    margin-right: 70px; 
    font-weight: normal; 
    line-height: 22px; 
} 

Answer 1

Рабочий пример: http://jsfiddle.net/JJrfN/

Вы можете использовать ::before и ::after псевдо-элементы, чтобы добавить строки. Это не будет дружелюбно с более старыми броузерами (IE7 не поддерживает эти псевдоэлементы, а IE8 в лучшем случае отрывочен). Вам также нужно будет добавить position: relative в элемент #dates li.

Так, например, вы можете добавить следующую CSS в вашем примере:

#dates li a::before { 
    content: ""; 
    position: absolute; 
    width: 1px; 
    height:50px; 
    background-color: grey; 
    left: 50%; 
    bottom: -50px;  
} 

#dates li a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    right: -20px; 
    bottom: -50px;  
} 

Вы также обнаружите, что вы должны стилизовать первый и последний li элементы немного по-другому, поскольку они отсутствуют либо предшествующее/обработка li элемент. Таким образом, они должны целенаправленные и стиль отдельно:

#dates li:first-child a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 50px; 
    right: -20px; 
    bottom: -50px;  
} 

#dates li:last-child a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    width: 50px; 
    bottom: -50px;  
} 

Для перемещения .selected li элемента над другими, то вы можете дать ему отрицательную top значения, как мы установили его относительно. Чтобы добавить круговую границу, вы можете использовать border-radius: 10px. Это работает только в современных браузерах, однако некоторые более старые броузеры включают свои собственные селектора, такие как -webkit-border-radius:3px; для Chrome и -moz-border-radius:3px; для Firefox. К сожалению, это не поддерживается в IE8 и ниже.

#dates li.selected { 
    font-size: 38px; 
    top: -30px; 
    border: 1px solid grey; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    border-radius: 10px; 
} 

Опять вы обнаружите, что вы должны изменить ::before и ::after псевдо-элементы стилистики к .selected элементам, как мы изменили top позицию, поэтому они должны быть целенаправленным и соответствующим образом изменить:

#dates li.selected a::before { 
    content: ""; 
    position: absolute; 
    width: 1px; 
    height:88px; 
    background-color: grey; 
    left: 50%; 
    bottom: -88px; 
} 

#dates li.selected a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    right: -20px; 
    bottom: -88px; 
} 

И, опять же, стиль, когда первый или последний li элементы были выбраны:

#dates li:first-child.selected a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 50px; 
    right: -20px; 
    bottom: -88px; 
} 

#dates li:last-child.selected a::after { 
    content: ""; 
    position: absolute; 
    height:1px; 
    background-color: grey; 
    left: 0; 
    right: -20px; 
    bottom: -88px; 
} 

Хотя это довольно длинный способ сделать это, это можно было бы очистить с небольшим количеством времени и понимания (вот почему я добавил много информации для этого ответа).

Надеюсь, это даст вам некоторое представление о том, как вы можете достичь желаемого дизайна.

Рабочий пример: http://jsfiddle.net/JJrfN/

Answer 2

jQuery Timelinr имеет файл со стилями - style_v.css. Насколько я понимаю, вы можете изменить эти стили, как хотите получить новый дизайн.