3DM-студия
» » » Совмещенная библиотека jQuery-UI и Bootstrap

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

Совмещенная библиотека 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. Надеюсь данная сборка Вам пригодиться в работе! Успехов!


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...