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

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

<?php
Yii::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 来响应选择事件。

本例下载

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

Yii Framework 开发教程(32) Zii组件-GridView示例
CGridView 以表格的形式显示数据,CGridView 也支持分页和排序,CGridView最基本的用法和ListView类型,也是通过设置 data provider,通常是CActiv ...
Yii Framework 开发教程(31) Zii组件-DetailView 示例
CDetailView为某个Model显示详细内容.这个要显示的Model可以为CModel或是关联数组. CDetailView通过配置 attributes来决定Model的那些属性需要显示 ...
Yii Framework 开发教程(41) Zii组件-Tabs示例
CJuiTabs 显示分页UI组件,和Yii Framework 开发教程(17) UI 组件 TabView示例功能类似,它封装了 JUI tabs插件. 前基本用法如下: [php] vie ...
Yii Framework 开发教程(30) Zii组件-ListView 示例
CListView可以用来显示列表,CListView支持使用自定义的View模板显示列表的的记录,因此可以非常灵活的显示数据的表,这点有点像Android的ListView:-). CListVie ...
Yii Framework 开发教程(29) Zii组件-Menu 示例
介绍完Yii数据库接口外,从本篇开始介绍Zii组件,包括列表视图ListView,表格视图GridView,此外还包括一些基于JQuery的UI组件,如AutoComplete,DataPicker, ...
Yii Framework 开发教程(35) Zii组件-Button示例
CJuiButton 显示按钮,CJuiButton 既可以做为Submit(提交)按钮,也可以做为普通按钮. 按钮基本用法如下: <?php $this->widget('zii.wid ...
Yii Framework 开发教程(37) Zii组件-Dialog示例
CJuiDialog用来显示对话框,模式或非模式对话框.它封装了JUI Dialog插件. 其基本用法如下 <h2><?php echo 'Dialog';?></h2& ...
Yii Framework 开发教程(36) Zii组件-DatePicker示例
CJuiDatePicker 用于日期输入,它封装了 JUI datepicker插件,其基本用法如下: [php] view plaincopyprint? <?php echo $fo ...
Yii Framework 开发教程(22) UI 组件 Zii组件简介
前面介绍了Yii框架支持的部分UI组件,除了前面介绍的UI组件外,Yii框架还提供了Zii组件库,包括列表视图ListView,表格视图GridView,此外还包括一些基于JQuery的UI组件 ...

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

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

最新文章

热门文章