Jquery ui all css link

Загрузка jQuery UI CSS из CDN Google

Я планирую использовать Google для загрузки библиотеки jQuery для UI и Core. Мой вопрос в том, разрешают ли мне загрузить CSS для него или я должен сам его разместить? Также, если я использую Google для загрузки, как мне загрузить другие плагины? Могу ли я сжимать все плагины вместе или это отдельный файл?

6 ответов

• Без сжатия: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js
• Сжатый: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
• Темы несжатые: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, и vader.
• Темы сжаты: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness и vader.

Обратите внимание, что эти CSS-сценарии в настоящее время не сжаты / свернуты, что означает, что вы могли бы предлагать версии уменьшенного размера (примерно на 26% в соответствии с плагином PageSpeed для Firefox от Google) из вашего собственного домена, что может быть быстрее для ваших пользователей, если ваше соединение приличное и у них еще нет файла, кэшированного локально.

каждый раз, когда я хочу найти этот CDN, я набираю «jquery ui css google cdn», и этот пост — самый прямой путь к списку их всех .. Я просто хочу поблагодарить вас +1

Источник

All jQuery UI Downloads

link 1.9.0 Milestone 4 — Accordion Redesign

link 1.9.0 Milestone 3 — Spinner

link 1.9.0 Milestone 2 — Menu

link 1.9.0 Milestone 1 — Tooltip

link 1.8.24

link 1.8.23

link 1.8.22

link 1.8.21

link 1.8.20

link 1.8.19

link 1.8.18

link 1.8.17

link 1.8.16

link 1.8.15

link 1.8.14

link 1.8.13

link 1.8.12

link 1.8.11

link 1.8.10

link 1.8.9

link 1.8.8

link 1.8.7

link 1.8.6

link 1.8.5

link 1.8.4

link 1.8.2

link 1.8.1

link 1.8

link 1.8rc3

link 1.8rc2

link 1.8rc1

link 1.8b1

link 1.8a2

link 1.8a1

link 1.7.2

link 1.7.1

link 1.7

link 1.6

link 1.6rc6

link 1.6rc5

link 1.6rc4

link 1.6rc3

link 1.6rc2.6

link 1.6rc2.5

link 1.6rc2

link 1.6rc1

link 1.6b

link 1.5.3

link 1.5.2

link 1.5.1

link 1.5

link 1.5rc1

link 1.5b4

link 1.5b3

link 1.5b2

link 1.5b

link 1.5a

link 1.0

Interactions

Widgets

Effects

Utilities

Books

Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

Источник

jQuery UI by Eric Sarrion

Get full access to jQuery UI and 60K+ other titles, with a free 10-day trial of O’Reilly.

There are also live events, courses curated by job role, and more.

Chapter 1. Introduction to jQuery UI

jQuery UI is a set of plug-ins for jQuery that add new functionalities to the jQuery core library. In this chapter, we will install the jQuery UI library and briefly examine its content. The following chapters will detail each of the jQuery UI features.

jQuery UI Installation

You can download the library at http://jqueryui.com. Click the Stable link. This leads directly to a ZIP file containing the sources, examples, and documentation for jQuery UI. Once the file is downloaded, transfer the contents to a jqueryui directory.

This jqueryui directory now contains the following:

• A css subdirectory containing the CSS files associated with jQuery UI. You will see that jQuery UI handles CSS themes to give a custom look to the interface elements it manages. For example, the display of sliders may be different from one theme to another, as well as other items like calendars and tabs.
• A js subdirectory containing the JavaScript files for jQuery UI. This directory contains a compressed file of all jQuery UI features and the jQuery library file.
• A development-bundle subdirectory containing various subdirectories—demos (jQuery UI sample files), docs (files containing the jQuery UI documentation), themes (files for each of the CSS themes associated with jQuery UI), and ui (jQuery UI JavaScript files).
• An index.html file that allows you to view some of the features of jQuery UI in a browser.

Overview of jQuery UI

For an overview of jQuery UI, open the index.html file in a browser (Figure 1-1).

Figure 1-1. jQuery UI home page

In this file, you can see the different features that jQuery UI adds (Figure 1-2), including the following:

• Accordion menus
• Autocompletion mechanism for input fields
• Buttons and checkboxes of the nicest aspects
• A tabs mechanism to facilitate the display in the page
• Dialog boxes that are superimposed on top of the page
• Custom icons
• Sliders
• Calendars
• Progress bars

Figure 1-2. jQuery UI home page: list of components

These are all possibilities that we will discuss later in the book. We will also consider other mechanisms such as drag-and-drop, new visual effects, CSS theme files, and more.

What Is a CSS Theme?

What are the CSS themes we talked about earlier? To find out, just download a new customized version of jQuery UI, depending on the chosen theme. For that, go to http://jqueryui.com/download, which displays the page shown in Figure 1-3.

Choose the UI lightness theme from the list on the right, then retrieve the ZIP file for jQuery UI associated with this theme by clicking the Download button. This ZIP file contains the same directory, but the CSS files included in css directory are adapted to the new theme. To see the look of this theme, view the new index.html file included in the queryui directory (this file will have overwritten the previous one). An example of a theme is shown in Figure 1-4.

Each theme provides a unique combination of background colors, fonts, and other screen elements. If we look at the css directory, we see two subdirectories containing each of the themes that we have downloaded:

• smoothness is the default theme downloaded with jQuery UI
• ui-lightness is the theme we just downloaded from the http://jqueryui.com/download page.

Figure 1-3. Download of the jQuery UI with theme customization

Which Files Should We Include in Our HTML Pages?

In the previous sections, we have seen that jQuery UI is made up of different CSS and JavaScript files. In addition, some files are compressed, while others are not. Hence the question: which files should we include in our HTML pages to make use of jQuery UI?

Uncompressed Files

Uncompressed files are located in the development-bundle directory, under the jQuery UI installation directory (jqueryui).

Figure 1-4. The ui-lightness theme

JavaScript files

The ui directory (located under development-bundle) contains the JavaScript files. The jquery.ui.core.js file includes the basic features (mandatory), while other files will be included only if required. The file ending in custom.js (e.g., jquery-ui-1.8.16.custom.js) brings together all the JavaScript files and eliminates the need to include each separately. The minified directory (located under ui) contains the same files in compressed format.

CSS files

The themes directory (located under development-bundle) contains the CSS files. It consists of various directories, each containing themes (e.g., the base, smoothness, and ui-lightness directories). Each theme includes an images directory and other CSS files.

The jquery.ui.core.css file contains basic functionality (required), while other files will be included only if they are required. The jquery.ui.theme.css file contains the definition of the theme itself (required).

The jquery.ui.base.css file includes all of the files in the development-bundle directory except jquery.ui.theme.css. The jquery.ui.all.css file includes all files (that is to say, jquery.ui.base.css and jquery.ui.theme.css).

Finally, the file ending with custom.css (e.g., jquery-ui-1.8.16.custom.css) includes all CSS files and eliminates the need to include each separately (it is identical to jquery.ui.all.css, except that it includes other files via CSS directives, while custom.css physically includes every line of all files).

Sample HTML page including uncompressed files

Here we want to display a simple page with two tabs. The main JavaScript file will be jquery.ui.tabs.js and the main CSS file will be jquery.ui.tabs.css. The main page will include the following base files:

The jquery.js file is here at the same level as the jqueryui directory. This file is the standard jQuery JavaScript file.

The core.js file is mandatory, while the tabs.js file requires the inclusion of widget.js (as indicated in the tabs.js file).

The core.css file is mandatory, as is the theme.css file. The tabs.css file contains specific tabs definitions.

Now that we have the basic building blocks for the page, let’s create and label two tabs and place some text in each. The following code goes directly below the previous code that calls the base files.

The result of this script (an HTML page with two tabs) is shown in Figure 1-5.

Figure 1-5. Our first program using jQuery UI

Источник