This is a simple Wrapper Widget for the jQuery UI MultiSelect Widget by Eric Hynds.
Details about the widget can be found here.
A Demo of the JQuery widget can be found here.
[size="5"]Requirements[/size]
Tested with Yii 1.1.8.
[size="5"]Usage[/size]
Place the files into your Yii application like this:
protected/extensions/widgets/EchMultiSelect.php
protected/extensions/widgets/assets/jquery.multiselect.js
protected/extensions/widgets/assets/jquery.multiselect.css
protected/extensions/widgets/assets/jquery.multiselect.filter.js
protected/extensions/widgets/assets/jquery.multiselect.filter.css
Make sure to import these files in your config file ‘protected/config/main.php’:
...
'import'=>array(
...
'application.extensions.widgets.*',
)
As an example, you could use the widget in your view file like this:
$data= CHtml::listData(Color::model()->findAll(), 'ID', 'Name');
$this->widget('ext.widgets.EchMultiselect', array(
// the data model associated with this widget:
'model' => $model,
// the attribute associated with drop down list of this widget:
'dropDownAttribute' => 'color',
// data for generating the options of the drop down list:
'data' => $data,
// the name of the drop down list (this must be set if 'model' and 'dropDownAttribute' are not set):
'name' => 'model_color',
// additional HTML attributes for the drop down list:
'dropDownHtmlOptions'=> array(
'style'=>'width:378px;',
'multiple'=>true,
),
// options for the jQuery UI MultiSelect Widget
// (see the project page for available options):
'options' => array(
'selectedList'=>5,
'header'=>true,
// set this to true, if you want to use the Filter Plugin
'filter'=>true,
),
));
This Yii widget creates a ‘drop down list’ with the given data and applies the JQuery widget to it, which turns the ordinary HTML select control into an elegant MultiSelect list of checkboxes with themeroller support.
To avoid confusion: I refer to the initial select element (that is subsequently hidden) as the ‘drop down list’; and to the eventual input element created by the JQuery Widget as the ‘MultiSelect list’.
The drop down list will be hidden directly after it is created: I placed a Javascript code to hide the element directly after it, to prevent it from being displayed while the page is loading, only to be hidden after the page has been loaded (as suggested here). I truly dislike that appearing/disappearing on page load, so I didn’d wait for the MultiSelect widget to hide the drop down list.
The provided ‘dropDownHtmlOptions’ will be adopted by the MultiSelect list. If you for example provide a style for the drop down list, it will also applied to the resulting MiltiSelect list.
The available ‘options’ for the jQuery UI MultiSelect Widget can be found on the project page. I added an additional option:<br>
filter: If you want to use the Filter Plugin (see the last example on the demo page), set this attribute to true.
[size="5"]Resources[/size]
-
Project page of JQuery widget: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
-
Demo of JQuery widget : http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#filter
-
JQuery widget on github: https://github.com/ehynds/jquery-ui-multiselect-widget
-
The extension page where you can download the files: http://www.yiiframework.com/extension/echmultiselect/