JqueryUI - Настройка среды

В этой главе мы обсудим загрузку и установку библиотеки JqueryUI. Мы также кратко изучим структуру каталогов и их содержимое. Библиотеку JqueryUI можно использовать на вашей веб-странице двумя способами:

Скачивание UI Library с официального сайта
Загрузка библиотеки пользовательского интерфейса из CDN

Загрузите UI Library с официального сайта

Когда вы открываете ссылку http://jqueryui.com/, вы увидите, что есть три варианта загрузки библиотеки JqueryUI -

Custom Download - Нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.
Stable - Нажмите эту кнопку, чтобы получить стабильную и последнюю версию библиотеки JqueryUI.
Legacy - Нажмите эту кнопку, чтобы получить предыдущий основной выпуск библиотеки JqueryUI.

Пользовательская загрузка с помощью Download Builder

Используя Download Builder, вы можете создать собственную сборку, которая будет включать только те части библиотеки, которые вам нужны. Вы можете загрузить эту новую настроенную версию JqueryUI в зависимости от выбранной темы. Вы увидите следующий экран (та же страница разделена на два изображения) -

Это полезно, когда вам требуются только определенные плагины или функции библиотеки JqueryUI. Структура каталогов этой версии показана на следующем рисунке -

Несжатые файлы находятся в каталоге пакета разработки . Несжатый файл лучше всего использовать во время разработки или отладки; сжатый файл экономит полосу пропускания и повышает производительность в производственной среде.

Стабильная загрузка

Нажмите кнопку «Стабильный», чтобы перейти непосредственно к файлу ZIP, содержащему исходные коды, примеры и документацию для последней версии библиотеки JqueryUI. Извлеките содержимое ZIP-файла в каталог jqueryui .

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

Устаревшая загрузка

Нажмите кнопку Legacy, которая ведет непосредственно к ZIP-файлу предыдущей основной версии библиотеки JqueryUI. Эта версия также содержит все файлы, включая все зависимости, большую коллекцию демонстраций и даже набор модульных тестов библиотеки. Эта версия поможет вам начать работу.

Загрузить UI-библиотеку с CDN

CDN или сеть доставки контента - это сеть серверов, предназначенная для обслуживания файлов пользователями. Если вы используете ссылку CDN на своей веб-странице, она переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию JqueryUI из того же CDN, ее не нужно будет повторно загружать.

JQuery Foundation , Google и Microsoft все обеспечивают КДС , что ядра хоста JQuery, а также JQuery UI.

Поскольку CDN не требует от вас размещения собственной версии jQuery и jQuery UI, он идеально подходит для демонстраций и экспериментов.

В этом руководстве мы используем версии библиотеки CDN.

пример

Теперь давайте напишем простой пример с использованием JqueryUI. Давайте создадим HTML-файл, скопируем следующий контент в тег <head> -

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Подробная информация о приведенном выше коде -

Первая строка добавляет тему jQuery UI (в нашем случае ui-lightness ) через CSS. Этот CSS сделает наш UI стильным.
Вторая строка добавляет библиотеку jQuery, поскольку пользовательский интерфейс jQuery построен поверх библиотеки jQuery.
Третья строка добавляет библиотеку пользовательского интерфейса jQuery. Это включает пользовательский интерфейс jQuery на вашей странице.

Теперь давайте добавим контент в тег <head> -

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

В <body> добавьте это -

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

Полный HTML-код выглядит следующим образом. Сохранить какmyfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

Откройте указанную выше страницу в своем браузере. Появится следующий экран.