Наскоро, докато писах Как да си направим Slider или Carousel с jQuery си припомних как се правеше подобен Content Switcher, преди да почна да се занимавам с JavaScript. В днешно време сайт без JavaScript е почти немислим заради всичката динамика от която се нуждае потребителя. Въпреки всичко обаче все още се срещат сайтове които са чисто информативни и които в самия си front-end нямат и ред JavaScript.
И защо един такъв сайт да няма приличен Content Switcher?
И така, нека започнем!
Както обикновено първо да напишем малко HTML. За този пример съм използвал XHTML 1.0 Strict, но вие може да използвате Transitional.
| View DemoDownload |
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Content Switcher - Works Without JavaScript</title> <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/> </head> <body> <div id="container"> <div class="content_bg"> <div class="content"> <ul class="switcher"> <li id="one"><img src="img/img1.png" alt="Apple Inc." /></li> <li id="two"><img src="img/img2.png" alt="jQuery - write less do more" /></li> <li id="three"><img src="img/img3.png" alt="w3" /></li> </ul> </div> </div> <ul class="navigation"> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> <li><a href="#three">3</a></li> </ul> </div> </body> </html>
Както се вижда по-горе имаме елемент с id="container", който е центриран хоризонтално и вертикално и в който стои content switcher-a. След това имаме елемент с class="content_bg", който използваме само и единствено, за да сложим рамка (използвам image за background). След тези елементи имаме още един елемент с class="content", който принципно изглежда ненужен, но той е необходим, за да се скрие съдържанието вътре в неподредения списък (ul с class="switcher"). Също така, на всеки елемент вътре в съдържанието "li" се дава ID. Използвам HTML Hyperlink Bookmark за превключването от едното съдържание към другото.
Какво представлява HTML Hyperlink Bookmark?
HTML Hyperlink Bookmark ви дава възможност за навигация между различните части на съдържанието. Можете да използвате HTML маркери "name" или "ID", с които да маркирате отделните части на съдържанието.
CSS
body{background:#ffffff;font-family:Tahoma,Arial,Verdana,sans-serif;font-size:11px;line-height:1.2em;margin:0;padding:0}
.clr{clear:both;overflow:hidden;font-size:0;line-height:0;}
ul{list-style:none;margin:0;padding:0}
a,img{outline:none;margin:0;padding:0;border:none;}
#container {
position:absolute;
top:50%;
left:50%;
width:600px;
height:180px;
margin: -90px 0 0 -300px;
}
.content_bg {
width: 578px;
height: 158px;
padding:11px;
background: url(../img/frame_bg.png) no-repeat 0 0 transparent;
}
.content {
height: 158px;
overflow: hidden;
}
.switcher {
height:178px; /* слагаме по-голяма височина, заради хоризонталния скрол */
overflow: scroll;overflow-y: hidden; /* фикс за Опера 9.63+ */
}
.switcher li {
float:left;
width:578px;
height: 178px;
overflow: hidden;
}
.navigation {
position:absolute;
top: 20px;
right:20px;
}
.navigation li {
background:#fff;
float: left;
text-align: center;
border: 1px solid #ccc;
margin: 0 0 0 5px;
}
.navigation li a, #navigation li a:link, #navigation li a:visited {
display: block;
width:19px;
height:18px;
padding:1px 0 0 0;
line-height: 17px;
border: 1px solid #fff;
color: #666;
font-size:11px;
font-weight:700;
text-decoration: none;
background: url(../img/btn_bg.png) repeat-x 0 0 transparent;
}
.navigation li a:hover {
background: url(../img/btn_bg.png) repeat-x 0 100% transparent;
}
На елемента с class="content" слагаме overflow:hidden; за да не се виждат останалите елементи със съдържание. Разбира се, неговата височина е равна на височината на единия от елементите. Както се вижда по-горе имаме и елемент с class="switcher", на който задаваме височина с 20px по-голяма от височината на елемента със самото съдържание. Това се прави за да избегнем неприятния хоризонтален скролбар, който се появява при някои браузъри (Opera, Internet Explorer и др.).
Как работи ли?
Връзките в навигацията са свързани с HTML Hyperlink Bookmark.
<ul class="navigation"> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> <li><a href="#three">3</a></li> </ul>
Нека вземем първият линк <a href="#one">1</a>. При кликването върху него, браузерът ще ни препрати до съответния атрибут с id="one". Това е, което позволява на съдържанието да се сменя. Не е сложно нали?
След това трябва просто да добавите малко CSS, за да изглежда по-хубав нашият Content Switcher. Разбира се, с малко JavaScript може да постигнете доста добри резултати, но това зависи единствено от вашата фантазия. Тази техника за смяна на съдържанието работи под Internet Explorer 5.5+, Safari 3+, Opera 9.63+, Firefox 2+, Chrome. Надявам се и тази статия да ви е била полезна и да сте научили още нещо.
Loading ...
Много ценен пример, особено след Google May Day ъпдейта на алгоритъма, който силно удари сайтове, които използват display: none.
Впечатлена съм - семпло, красиво и практично! Точно това търсех! Не съм достатъчно навътре в темата обаче, че да го приложа за моя случай, който май е още по- прост. Искам от текстов линк в страницата да се появи този скрит леър само с една картинка и да се скрива при кликване върху нея или нарочен бутон. Ще съм много благодарна, ако някой ми помогне да го направя.
Здравей,
дано да съм те разбрал правилно. Ето ти примерно решение само с CSS. Няма да изпадам в излишни обяснения защото мисля, че кода е достатъчно прост и разбираем. Ако това не ти свърши работа или пък не държиш резултата да е постижим само с CSS ще ти помогна и с малко JavaScript но ще те помоля това да стане във Форума :). Стига приказки ето ти примерен код :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <meta charset="UTF-8"/> <title></title> <style type="text/css"> body { font-family:Tahoma,Arial,Verdana,sans-serif; font-size:11px;line-height:1.3em;} .box {width:200px;padding:10px;background:#f8f8f8;border:1px solid #d5d5d5;text-align:justify;color:#333;} p { margin:0 0 10px;} .info {position:relative;} .info .more {display:none;} .info:hover .more {display:block;position:absolute;z-index:1;left:0;top:0;width:160px;border:1px solid #d5d5d5;background:#f8f8f8;padding:10px;color:#666;} </style> </head> <body> <div class="box"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br /> <a href="#" class="info">Lorem Ipsum<span class="more">Here's more of a description of what we have going on here.</span></a> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </body> </html>Много благодаря, не съм обяснила много добре какво ми трябва, но и това ми върши работа. Даже е по-елегантно без кликане :)
Радвам се, че успях да помогна :)