Yii Framework 开发教程(38) Zii组件-ProgressBar示例



CJuiProgressBar显示一进度条。它封装了 JUI Progressbar插件。CJuiProgressBar显示一进度条。它封装了 JUI Progressbar插件。

[php] view plaincopyprint?

1. <?php $this->widget('zii.widgets.jui.CJuiProgressBar', array(  
2.     'id'=>'progress',  
3.     'value'=>0,  
4.     'htmlOptions'=>array(  
5.                 'style'=>'width:200px; height:20px; float:left;'  
6.                 ),  
7.             ));  
8. ?>  

<?php $this->widget('zii.widgets.jui.CJuiProgressBar', array('id'=>'progress','value'=>0,'htmlOptions'=>array('style'=>'width:200px; height:20px; float:left;'),));?>

为了演示进度条，我们使用JavaScripts改变进度条当前值，并使用一个文本显示当前进度条的值。

[php] view plaincopyprint?

1. <?php  
2. //  Dummy function just to provide an example  
3. Yii::app()->clientScript->registerScript('scriptId', "  
4.     var count = 0;  
5.     var step  = 10;  
6.     var speed = 500;  
7.     function progress() {  
8.         $('#amount').text(count+'%');  
9.         $('#progress').progressbar('option', 'value', count);  
10.         if(count < 100) {  
11.             count = count+step;  
12.             setTimeout(progress, speed);  
13.         }  
14.     }  
15.     progress();  
16. ", CClientScript::POS_LOAD);  
17. ?>  
18. ...  
19.   
20. <div id="amount" style="margin-left:210px; padding:3px;"></div>  

<?php//  Dummy function just to provide an exampleYii::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>

本例下载

更多