WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Совмещенная библиотека jQuery-UI и Bootstrap
Навигация
Популярное
    Статистика

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

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

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

    Совмещенная библиотека jQuery-UI и Bootstrap

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 19-04-2013, 18:59
    Совмещенная библиотека jQuery-UI и Bootstrap


    Такого количества плагинов и элементов интерфейса на одной странице вы еще не видели. Ползунки, табы, кнопки, иконки и многое многое другое в великолепной сборке - Элементы интерфейса от jQuery-UI и Twitter Bootstrap. Здесь есть почти все необходиоме для создания любых элементов интерфейса на вашем сайте.

    Теперь по подробнее о плагинах в этом архиве. Итак..., для начала хочу сказать, что все эти js и css фишки представлены на одной странице и jQuery-UI и Twitter Bootstrap является скорее библиотекой. Поэтому первоначально нам нужно подключить эту библиотеку:
        <!-- Styles -->     
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
    <link href="bootstrap/bootstrap.css" rel="stylesheet">    
    <link href="css/demo.css" rel="stylesheet">    
    <style type="text/css">      
    /* Override some defaults */      
    html, body {        background-color: #eee;      }      
    body {        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */      }      
    .container > footer p {        text-align: center; /* center align it with the container */      }      
    .container {        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */      }
          /* The white background content wrapper */      
    .container > .content {        background-color: #fff;        padding: 20px;        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */        -webkit-border-radius: 0 0 6px 6px;           -moz-border-radius: 0 0 6px 6px;                border-radius: 0 0 6px 6px;        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);                box-shadow: 0 1px 2px rgba(0,0,0,.15);      }
          /* Page header tweaks */      
    .page-header {        background-color: #f5f5f5;        padding: 20px 20px 10px;        margin: -20px -20px 20px;      }
          /* Styles you shouldn't keep as they are for displaying this base example only */     
     .content .span10,      
    .content .span4 {        min-height: 500px;      }      /* Give a quick and non-cross-browser friendly divider */      
    .content .span4 {        margin-left: 0;        padding-left: 19px;        border-left: 1px solid #eee;      }
     .topbar .btn {        border: 0;      }
        </style>        
    <!--scripts-->
            <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>        
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>        
            <!--daterangepicker-->        
    <script type="text/javascript" src="third-party/jQuery-UI-Date-Range-Picker/js/date.js"></script>        
    <script type="text/javascript" src="third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js"></script>
            <!--wijmo-->        
    <script src="third-party/wijmo/jquery.mousewheel.min.js" type="text/javascript"></script>        
    <script src="third-party/wijmo/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>        
    <script src="third-party/wijmo/jquery.wijmo-open.1.5.0.min.js" type="text/javascript"></script>
    
            <!-- FileInput -->        
    <script src="third-party/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>        
    <script src="third-party/jQuery-UI-FileInput/js/fileinput.jquery.js" type="text/javascript"></script>
    
            <!--init for this page-->        
    <script type="text/javascript" src="js/demo.js"></script>

    А теперь вы можете подключать хоть все плагины этой сборки разом, а можете использовать их по мере необходимости. Перечислю, какие интересные элементы интерфейса есть на этой странице:
    Аккордеон, различные кнопки, табы, radio и checkbox, input закачки файла на сервер, диалоговые и модальные окна, скролл от и до, прогрессбар, таблика по верх текста, предупреждающие блоки, 173 здоровских интерфейсных иконок, меню, выбор даты и еще несколько интересных элементов.
    Стилистика похожа на Bootstrap, а работа плагинов на jQuery-UI. Надеюсь данная сборка Вам пригодиться в работе! Успехов!



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

    Теги: jQuery, Bootstrap

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


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