Блог про верстку и CSS. Примеры html кода и интересные приемы.
Сортировать будем?
Сортировать элементы на странице очень просто.
$('#source').quicksand( $('#destination li') );
<ul id="source"> <li data-id="iphone">iPhone OS</li> <li data-id="android">Android</li> <li data-id="winmo">Windows Mobile</li> </ul> <ul id="destination" class="hidden"> <li data-id="macosx">Mac OS X</li> <li data-id="macos9">Mac OS 9</li> <li data-id="iphone">iPhone OS</li> </ul>
Источник: http://razorjack.net/
| Print article | This entry was posted by pulev on 14.04.2010 at 13:17, and is filed under hints, js. Follow any responses to this post through RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
Пока нет комментариев.
Нет трэкбэков.
Красивый эффект наведения с помощью CSS и jQuery
1 месяц назад - Нет комментариев
Очень красивый эффект при наведении на картинку... Все очень легко и просто! Верстка: <ul> <li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li> <li><img src="images/107023_5283.jpg" title="Cloudy Skies" /></li> <li><img src="images/1282015_12556521.jpg" title="Nice Horsy" /></li> <li><img src="images/1262387_19591724.jpg" title="Grassy Meadows" /></li> <li><img src="images/220121_3233.jpg" title="Jigsaw Pieces" /></li> <li><img src="images/1282209_96954111.jpg" title="Retro Groove" /></li> </ul> Стили css: div.wrapper{width:218px; height:218px; overflow:hidden; position:relative; } div.caption {position:relative; text-align:center; padding:55px 15px} Javascript:
Dragdealer JS
2 месяца назад - Нет комментариев
Тянем все! Хороший компонент для перетягивания... работает как на компе так и на iPhone. Подключаем javascript: <script type="text/javascript" src="/js/dragdealer-main.js"></script> <script> window.onload = function() { new Dragdealer('simple-slider'); } </script> Ну и сам слайдер: <div id="my-slider" class="dragdealer"> <div class="red-bar handle">drag me</div> </div> Готово. У скрипта очень много настроек и фишек. Источник: http://code.ovidiu.ch/dragdealer/
Тянем картинки или скейлинг это просто!
2 месяца назад - 1 комментарий
Хотите чтоб картинка или бекграунд занимала все пространство? Легко! Подключаем яваскрипт: <script type="text/javascript" src="/js/jquery.maximage.js"></script> <script> $(function(){ jQuery('img.scale').maxImage({ isBackground: true, overflow: 'auto' }); }); </script> Ну и собственно сама картинка на странице: <img src="/images/scale.png" class="scale" alt="" /> Все ) Источник: http://www.aaronvanderzwan.com/maximage/
Горизонтальное выпадающее меню
4 месяца назад - Нет комментариев
Добавить на сайт выпадающее горизонтальное меню очень просто... Простое и быстрое выпадающее меню... Меню: <ul id="topnav"> <li><a href="#">Link</a></li> <li> <a href="#">Link</a> <!--Subnav Starts Here--> <span> <a href="#">Subnav Link</a> | <a href="#">Subnav Link</a> | <a href="#">Subnav Link</a> </span> <!--Subnav Ends Here--> </li> <li><a href="#">Link</a></li> </ul> Оформление: ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none;
Слайдер
4 месяца назад - Нет комментариев
Листать картинки на сайте очень просто... Подключаем javascript и css: <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> Сам слайдер: <div id="slider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div> Вызываем функцию слайдера: <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider();
Выпадающее окно логина как на Twitter
4 месяца назад - Нет комментариев
Форма логина есть почти на каждом сайте... Сделать ее еще красивее и удобнее очень просто. Сама форма: <div id="container"> <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"><span>Sign in</span></a> </div> <fieldset id="signin_menu"> <form method="post" id="signin" action="https://twitter.com/sessions"> <label for="username">Username or email</label> <input id="username" name="username" value="" title="username" tabindex="4" type="text"/> <p> <label for="password">Password</label> <input id="password" name="password" value="" title="password" tabindex="5" type="password"/>
Дань партнерам
4 месяца назад - Нет комментариев
Показать всем свои партнеров просто... Показать их красиво еще проще. Источник: http://tutorialzine.com/
