WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Простой способ создания боковых меню с плагином Sidr
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

    Простой способ создания боковых меню с плагином Sidr

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 16-04-2013, 18:12
    Простой способ создания боковых меню с плагином Sidr


    В этом уроке мы рассмотрим работу плагина Sidr, который предназначен для реализации боковых меню с тремя способами формирования собственного содержимого.

    Начало
    Прежде всего, для использования плагина, необходимо подключить js и css файлы библиотеки. Авторы плагина предоставляют как светлое (jquery.sidr.light.css), так и тёмное (jquery.sidr.dark.css) оформление.
    
    <!DOCTYPE html>
    <html>
     <head>
       <!-- ваш код-->
    
       <!-- подгружаем таблицу стилей -->
       <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
     </head>
     <body>
       <!-- ваш код -->
    
       <!-- подгружаем jQuery -->
       <script src="javascripts/jquery.js"></script>
       <!-- подгружаем Sidr JS -->
       <script src="javascripts/sidr/jquery.sidr.min.js"></script>
     </body>
    </html>
    


    Примеры использования

    Простой пример
    Для того чтобы применить плагин, нам сначала необходимо создать html блок, представляющий из себя меню, а затем в js коде подключить его к sidr():
    
    <a id="simple-menu" href="#sidr">Toogle menu</a>
    
    <div id="sidr">
     <!-- ваш контент -->
     <ul>
       <li><a href="#">List 1</a></li>
       <li class="active"><a href="#">List 2</a></li>
       <li><a href="#">List 3</a></li>
     </ul>
    </div>
    
    <script>
    $(document).ready(function() {
     $('#simple-menu').sidr();
    });
    </script>
    

    Создание нескольких меню
    Если вам необходимо создать несколько меню на одной странице, одно из которых будет открываться справа, другое - слева, то при подключении sidr воспользуйтесь параметрами name и side:
    
    <a id="left-menu" href="#left-menu">Left Menu</a>
    <a id="right-menu" href="#right-menu">Right Menu</a>
    <script>
    $(document).ready(function() {
       $('#left-menu').sidr({
         name: 'sidr-left',
         side: 'left' // по умолчанию
       });
       $('#right-menu').sidr({
         name: 'sidr-right',
         side: 'right'
       });
    });
    </script>
    

    Содержание меню

    Sidr поддерживает несколько способов формирования контента, отображаемого в меню: может взять с самой страницы, с отдельного файла или получить через функцию обратного вызова:
    
    <a id="existing-content-menu" href="#existing-content-menu">Existing content</a>
    <a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a>
    <a id="callback-menu" href="#callback-menu">Callback loaded</a>
    
    <header id="demoheader">
       <h1>Demos & Usage</h1>
    </header>
    
    <div id="demo-content">
       <p>Here are described differents ways of usage for this plugin, you can read and adapt them to your website's requeriments. Below are described all options with details.</p>
    </div>
    
    <script>
    $(document).ready(function() {
       $('#existing-content-menu').sidr({
         name: 'sidr-existing-content',
         source: '#demoheader, #demo-content'
       });
       $('#remote-content-menu').sidr({
         name: 'sidr-remote-content',
         source: 'http://example.com/remote-menu.html'
       });
       $('#callback-menu').sidr({
         name: 'sidr-callback',
         source: function(name) {
           return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
         }
       });
    });
    </script>
    



    Скачать бесплатно

    Теги: Sidr, jQuery

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.