Навигация с сортировкой пунктов на jQuery UI

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Навигация с сортировкой пунктов на jQuery UI

CabinetAdmin 26 мар 2013, 19:26 Сообщение

Изображение


Навигация с возможностью свободного перетаскивания пунктов меню, с помощью плагина jQuery UI.

Первым делом нам нужно подключить необходимые скрипты, перед закрывающим тегом </head> ставим:

Код: Выделить всё

<script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <script> $(function() { $( "#sortable" ).sortable({ placeholder: "ui-sortable-placeholder" }); }); </script>


Теперь в нужном вам месте ставим html структуру нашего меню:

Код: Выделить всё

<ul id="sortable"> <li class="ui-state-default"><a href="#">Пункт 1</a></li> <li class="ui-state-default"><a href="#">Пункт 2</a></li> <li class="ui-state-default"><a href="#">Пункт 3</a></li> <li class="ui-state-default"><a href="#">Пункт 4</a></li> <li class="ui-state-default"><a href="#">Пункт 5</a></li> <li class="ui-state-default"><a href="#">Пункт 6</a></li> <li class="ui-state-default"><a href="#">Пункт 7</a></li> </ul>


Уже теперь, без оформления, эффект перетаскивания будет работать, достаточно зажать левую клавишу мыши на любом из пунктов меню и начать перемещение. Но гораздо интереснее когда меню выглядит красиво.
В тему вашего стиля добавляем:

Код: Выделить всё

.ui-sortable { width: 350px; margin: 50px auto; background-color: #ccc; -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1); box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1); list-style-type: none; padding: 0; } .ui-sortable li.ui-state-default { margin: 0; height: 45px; line-height: 48px; font-size: 1.1em; font-family: Helvetica, Verdana, Arial, sans-serif; color: #fff; outline: 0; padding: 0; text-indent: 15px; background: rgb(78,82,91); background: -moz-linear-gradient(top, rgb(78,82,91) 0%, rgb(57,61,68) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68))); background: -webkit-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%); background: -o-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%); background: -ms-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%); background: linear-gradient(to bottom, rgb(78,82,91) 0%,rgb(57,61,68) 100%); border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(0,0,0,.5); text-shadow: -1px -1px 0px rgba(0,0,0,.5); position: relative; cursor: pointer; } .ui-sortable li.ui-state-default:first-child { border-top: 0; } .ui-sortable li.ui-state-default:last-child { border-bottom: 0; } .ui-sortable-placeholder { border: 3px dashed #aaa; height: 45px; width: 344px; background: #ccc; } .ui-sortable li.ui-state-default:after { content: ""; display: inline-block; background: url("/images/drag-n-drop-line.png") no-repeat 0 0; width: 20px; height: 17px; position: absolute; right: 18px; top: 15px; cursor: move; opacity: .2; } .ui-sortable li.ui-state-default a { color: #fff; text-decoration: none; } .ui-sortable li.ui-state-default a:hover { color: #ccc; }


В навигации используется одно небольшое изображение: ( Изображение )

Загрузите её на сайт и не забудьте в CSS указать к ней путь в соответствующем поле.

Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Дим

Re: Навигация с сортировкой пунктов на jQuery UI

Дим 28 дек 2013, 14:27 Сообщение

Как я понял, после того как перезагрузили страницу - пункты меню встанут в прежнем порядке...

Аватара пользователя
CabinetAdmin

Re: Навигация с сортировкой пунктов на jQuery UI

CabinetAdmin 28 дек 2013, 15:41 Сообщение

К сожалению да. Видел в интернетах способы прикручивания куков, но всё это было не очень удачно.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя