yii jquery折叠、弹对话框、拖拽、滑动条、ol和ul列表、局部内容切换

转载

wx5acf76b593c6d 2022-05-05 22:34:13

文章标签 yii php javascript jquery 文章分类 Spark 大数据

引入jquery

<?php Yii::app()->clientScript->registerCoreScript('jquery');?>

<?php//yii折叠效果（CJuiAccordion）$this->widget('zii.widgets.jui.CJuiAccordion', array( 'panels'=>array( '分类1'=>'分类1的内容', '分类2'=>'分类2的内容', // 分类可以渲染一个页面，例如分类3 //'分类3'=>$this->renderPartial('_partial',null,true), ), 'options'=>array( 'animated'=>'bounceslide', ), ));?>

<?php//按钮加js弹框提示 $this->widget('zii.widgets.jui.CJuiButton', array( 'name'=>'button', 'caption'=>'提交', 'value'=>'asd', 'onclick'=>'js:function(){alert("提交成功！"); this.blur(); return false;}', ) );?>

<?php//谈对话框$this->beginWidget('zii.widgets.jui.CJuiDialog', array( 'id'=>'mydialog', // additional javascript options for the dialog plugin 'options'=>array( 'title'=>'对话框', 'autoOpen'=>false, ),)); //输出弹出框的内容 //echo $this->renderPartial('_form',null,true);

$this->endWidget('zii.widget.jui.CJuiDialog');

//打开对话框的链接echo CHtml::link('登录', '#', array( 'onclick'=>'$("#mydialog").dialog("open"); return false;',));?>

<?php//拖拽 $this->beginWidget('zii.widgets.jui.CJuiDraggable', array( // additional javascript options for the draggable plugin 'options'=>array( 'scope'=>'myScope', ), )); echo '拖拽的内容！'; $this->endWidget();?>

<?php//ol列表 $this->widget('zii.widgets.jui.CJuiSelectable', array( 'items'=>array( 'id1'=>'Item 1', 'id2'=>'Item 2', 'id3'=>'Item 3', ), // additional javascript options for the selectable plugin 'options'=>array( 'delay'=>'300', ), ));//ul列表 $this->widget('zii.widgets.jui.CJuiSortable', array( 'items'=>array( 'id1'=>'Item 1', 'id2'=>'Item 2', 'id3'=>'Item 3', ), // additional javascript options for the accordion plugin 'options'=>array( 'delay'=>'300', ), ));?>

<?php//滑动条 $this->widget('zii.widgets.jui.CJuiSlider', array( 'value'=>37, // additional javascript options for the slider plugin 'options'=>array( 'min'=>10, 'max'=>50, ), 'htmlOptions'=>array( 'style'=>'height:20px;' ), ));?>

<?php//局部内容切换 $this->widget('zii.widgets.jui.CJuiTabs', array( 'tabs'=>array( '分类1'=>'分类1', '分类2'=>array('content'=>'分类2', 'id'=>'tab2'), //'分类3'=>$this->render('_form',null,true),//渲染一个页面 // panel 3 contains the content rendered by a partial view //'AjaxTab'=>array('ajax'=>$ajaxUrl), ), // additional javascript options for the tabs plugin 'options'=>array( 'collapsible'=>true, ), ));