Yii Framework 开发教程(45) Zii组件-Selectable示例



CJuiSelectable可以显示一个列表，列表的每个项支持Select事件，它封装了 JUI Selectable插件，其基本用法如下：

[php] view plaincopyprint?

1. <?php  
2. Yii::app()->clientScript->registerCss('selectable',"  
3. #selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}  
4. #selectable li {margin: 2px; padding: 4px; border: 1px solid #e3e3e3; background: #f7f7f7}  
5. #selectable .ui-selecting { border: 1px solid #fad42e; }  
6. #selectable .ui-selected { border: 1px solid #fad42e; background: #fcefa1;}  
7. #select-result {margin: 0 0 10px 2px; }  
8. ", 'screen', CClientScript::POS_HEAD);  
9. ?>  
10.   
11. <h2><?php echo 'Selectable'; ?></h2>  
12.   
13. <div id="select-result">none</div>  
14.   
15. <?php  
16. $this->widget('zii.widgets.jui.CJuiSelectable',array(  
17.     'id'=>'selectable',  
18.     'items'=>array(  
19.                 'id1'=>'Item 1',  
20.                 'id2'=>'Item 2',  
21.                 'id3'=>'Item 3'  
22.                 ),  
23.             'options'=>array(  
24.                 'stop'=>'js: function(event,ui){  
25.             var result = $("#select-result").empty();  
26.             $(".ui-selected", this).each(function(){  
27.                 var index = $("#selectable li").index(this);  
28.                 result.append(" #" + (index + 1));  
29.             });  
30.         }'  
31.                 )  
32.             ));  
33. ?>  

<?phpYii::app()->clientScript->registerCss('selectable',"#selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}#selectable li {margin: 2px; padding: 4px; border: 1px solid #e3e3e3; background: #f7f7f7}#selectable .ui-selecting { border: 1px solid #fad42e; }#selectable .ui-selected { border: 1px solid #fad42e; background: #fcefa1;}#select-result {margin: 0 0 10px 2px; }", 'screen', CClientScript::POS_HEAD);?><h2><?php echo 'Selectable'; ?></h2><div id="select-result">none</div><?php$this->widget('zii.widgets.jui.CJuiSelectable',array('id'=>'selectable','items'=>array('id1'=>'Item 1','id2'=>'Item 2','id3'=>'Item 3'),'options'=>array('stop'=>'js: function(event,ui){var result = $("#select-result").empty();$(".ui-selected", this).each(function(){var index = $("#selectable li").index(this);result.append(" #" + (index + 1));});}')));?>

使用Javascipts 来响应选择事件。

本例下载