Yii Framework 开发教程(38) Zii组件-ProgressBar示例
2013-01-02 08:41
525 查看
CJuiProgressBar显示一进度条。它封装了 JUI Progressbar插件。CJuiProgressBar显示一进度条。它封装了 JUI Progressbar插件。
![](http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212129007.png)
本例下载
<?php $this->widget('zii.widgets.jui.CJuiProgressBar', array( 'id'=>'progress', 'value'=>0, 'htmlOptions'=>array( 'style'=>'width:200px; height:20px; float:left;' ), )); ?>为了演示进度条,我们使用JavaScripts改变进度条当前值,并使用一个文本显示当前进度条的值。
<?php // Dummy function just to provide an example Yii::app()->clientScript->registerScript('scriptId', " var count = 0; var step = 10; var speed = 500; function progress() { $('#amount').text(count+'%'); $('#progress').progressbar('option', 'value', count); if(count < 100) { count = count+step; setTimeout(progress, speed); } } progress(); ", CClientScript::POS_LOAD); ?> ... <div id="amount" style="margin-left:210px; padding:3px;"></div>
![](http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212129007.png)
本例下载
相关文章推荐
- Yii Framework 开发教程(43) Zii组件-Droppable示例
- Yii Framework 开发教程(41) Zii组件-Tabs示例
- Yii Framework 开发教程Zii组件-Tabs示例
- Yii Framework 开发教程(29) Zii组件-Menu 示例
- Yii Framework 开发教程(32) Zii组件-GridView示例
- Yii Framework 开发教程(29) Zii组件-Menu 示例
- Yii Framework 开发教程(33) Zii组件-Accordion示例
- Yii Framework 开发教程(29) Zii组件-Menu 示例
- Yii Framework 开发教程(30) Zii组件-ListView 示例
- Yii Framework 开发教程(34) Zii组件-AutoComplete示例
- Yii Framework 开发教程(31) Zii组件-DetailView 示例
- Yii Framework 开发教程(35) Zii组件-Button示例
- Yii Framework 开发教程(32) Zii组件-GridView示例
- Yii Framework 开发教程(34) Zii组件-AutoComplete示例
- Yii Framework 开发教程(42) Zii组件-Draggable示例
- Yii Framework 开发教程(33) Zii组件-Accordion示例
- Yii Framework 开发教程(37) Zii组件-Dialog示例
- Yii Framework 开发教程(33) Zii组件-Accordion示例
- Yii Framework 开发教程(36) Zii组件-DatePicker示例
- Yii Framework 开发教程(38) Zii组件-ProgressBar示例