Created
December 17, 2012 15:11
-
-
Save tjtjtj/4318997 to your computer and use it in GitHub Desktop.
jquery-ui-multiselect-widget を YiiFramework Widget にします
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* EMultiSelectWidget | |
* | |
* <a href="http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/">jquery-ui-multiselect-widget</a>を YiiFramework Widget にします。 | |
* | |
* ファイルは次のように配置します。 | |
* <pre> | |
* protected/extensions/emultiselectwidget/EMultiSelectWidget.php | |
* /assets/jquery.multiselect.js | |
* /assets/jquery.multiselect.css | |
* </pre> | |
* | |
*/ | |
// zii の下に jquery-ui.min.js を register してくれる CJuiWidget があるので利用します。 | |
Yii::import('zii.widgets.jui.CJuiWidget'); | |
class EMultiSelectWidget extends CJuiWidget | |
{ | |
public $name = null; | |
// 選択候補を array(key=>value,) で受けとる変数です | |
public $data = array(); | |
// 選択中の要素を array(key,) で受けとる変数です | |
public $select = array(); | |
// CJuiWidget には他に $options, $htmlOptions というインスタンス変数があります。 | |
// これらは、Widget生成時 CWidgetFactory が設定してくれます。 | |
public function init() | |
{ | |
// CJuiWidget が jquery-ui.min.js を register してくれます | |
parent::init(); | |
// jquery.multiselect.js を register します | |
$this->registerScripts(); | |
} | |
public function run() | |
{ | |
// htmlOptions に id があれば使います | |
if (isset($this->htmlOptions['id'])) | |
$this->setId($this->htmlOptions['id']); | |
else | |
$this->htmlOptions['id'] = $this->getId(); | |
// MultiSelect なので multiple しないとね | |
if (!isset($this->htmlOptions['multiple'])) | |
$this->htmlOptions['multiple'] = 'multiple'; | |
// nameの最後に[]をつけて、選択した複数要素を渡せるようにします | |
if(substr($this->name,-2)!=='[]') | |
$this->name.='[]'; | |
// CHtml で select タグを書く | |
echo CHtml::dropDownList($this->name,$this->select,$this->data,$this->htmlOptions); | |
// options array を JSONエンコードし、スクリプト登録します。 | |
// 大抵の jQueryUI Widget は こんな感じで option を渡します。 | |
$options = empty($this->options) ? '' : CJavaScript::encode($this->options); | |
Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$this->getId(),"$('#{$this->getId()}').multiselect($options);"); | |
} | |
protected function registerScripts() | |
{ | |
// jquery.multiselect.js は emultiselectwidget/assets 下にあります | |
$assets_dir = dirname(__FILE__).DIRECTORY_SEPARATOR."assets"; | |
$url = Yii::app()->getAssetManager()->publish($assets_dir.DIRECTORY_SEPARATOR.'jquery.multiselect.js'); | |
// CJuiWidget が jquery-ui.min.js POS_END にregisterするので | |
// ここでも POS_END に register します | |
Yii::app()->getClientScript()->registerScriptFile($url, CClientScript::POS_END); | |
// cssもregisterします | |
$url = Yii::app()->getAssetManager()->publish($assets_dir.DIRECTORY_SEPARATOR.'jquery.multiselect.css'); | |
Yii::app()->getClientScript()->registerCssFile($url); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment