 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Getting Started
All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of the jQuery library and include this into the document header. I’ve also created my own stylesheet for organizing the lists and the page layout.
<!doctype html><html lang="en-US"><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Switch Display Options - DesignMag Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designm.ag/favicon.ico"> <link rel="icon" href="http://designm.ag/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script></head>The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself doesn’t really “begin” until we get to the #content div. This specifically holds the main page content including our list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a clearfix to keep the position of floated elements.
<div id="w"> <span class="options">Switch Options: <a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png" alt="list"></a> <a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png" alt="thumbnails"></a> </span> <!-- icons: http://findicons.com/pack/1689/splashy/ --> <div id="content"> <ul id="listdisplay" class="clearfix"> <li class="clearfix"> <span class="listimg"><a href="http://dribbble.com/shots/1314496-80-s-Wrestlers-Hulk-Hogan" target="_blank"><img src="images/01-hulk-hogan.jpg"></a></span> <span class="innercontent"> <h2>Hulk Hogan</h2> <p>In non gravida nulla, quis vehicula velit. Praesent ac felis vel tortor auctor tincidunt. In non luctus neque. In congue molestie pretium. Sed vitae cursus risus. Pellentesque feugiat tortor massa, ut aliquet justo fermentum vitae.</p> </span> </li><!-- row #1 -->I’ve only copied over the beginning section of the page along with a single list item structure. There are 8 total items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two anchor links for sorting the content.
The first ID is #details-list which also has an active class attached to the anchor. This means we already have the details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which users can switch over and change the view. These images are found in the Splashy pack along with many other fantastic icons.
Поиск по сайту: