Changes
Title
unchanged
Serve jQuery and jQuery-UI from Google's CDN
Category
unchanged
Tutorials
Yii version
unchanged
Tags
unchanged
jquery, jqueryui, google, CDN
Content
changed
[...]
This tutorial shows you how to use Goggle's CDN to serve jQuery and jQuery UI in Yii.
Edit your Config File
------------------
There are twohree additions to make in your config file:
1.
Define the JUI Theme you want to use.
2. Add a _package_ definition for jQuery under the "clientScript" component in the "components" section
23.
Add a _package_ definition for jQuery UI the "params" section
```phpSet "theme", "scriptURL" and "themeURL" for each JUI Widget you use the "widgetFactory" section; the URLs point to Google's CDN, the theme uses the define from step 1.
```php
define('JUI-THEME','dark-hive');
return array(
// other config[...]
// other clientScript config
),
// other component config
),
// other config
'params'widgetFactory'=>array(
'jquery.ui 'widgets'=>array(
'the 'CJui<WidgetName
>'=>
'dark-hive', // change to the theme you want to use
'scriptUrl'=>'//ajax.googleapis.com/ajax/libs/jqueryui/1/',
array( // where <WidgetName> is the name of the JUI Widget (Tabs, DatePicker, etc.). Each CJuiWidget used must be declared
'scriptUrl'=>'//ajax.googleapis.com/ajax/libs/jqueryui/1/',
'i18nScriptFile' => 'i18n/jquery-ui-i18n.min.js',
'theme'=>JUI-THEME,
'themeUrl'=>'//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/',
),
//
other params
)Repeat for other CJuiWidgets
),
),
// other component config
),
// other config
);
```
Note that the URLs are missing the protocol. This allows users browsers to cache both http and https requests from a single download.
For jQuery that is all that is needed.
For jQuery UI we need to tell JUI widgets to use the CDN; we do this when the configuring the widget in the view:
```php
$jui = Yii::app()->params['jquery.ui'];
$this->widget('zii.widgets.jui.CJui<WidgetName>',array(
'scriptUrl'=>$jui['scriptUrl'],
'theme'=>$jui['theme'],
'themeUrl'=>$jui['themeUrl'],
// other widget config
));
```
where <WidgetName> is the name of the JUI Widget (Tabs, DatePicker, etc.)
That's it - your application will now use Google's CDN to serve jQuery and jQuery UI; to the benefit of you and your visitors. It also means that a single change in the config file will change the theme of all your JUI widgets.
(Thanks to redguy for pointing out the widget factory configuration)