包 | zii.widgets.jui |
---|---|
继承 | class CJuiSliderInput » CJuiInputWidget » CJuiWidget » CWidget » CBaseController » CComponent |
源自 | 1.1 |
版本 | $Id: CJuiSliderInput.php 2948 2011-02-09 13:27:05Z haertl.mike $ |
源码 |
CJuiSliderInput显示一个滑块。它能用在表单中并post它的值。
CJuiSlider封装了JUI slider插件。
使用这个部件,你可以在视图里面插入以下代码:
这个部件也可使用范围内的模式,它使用2滑块来设置范围。 在这种模式中,attribute和maxAttribute将定义最大和最小范围值。 例如:
CJuiSlider封装了JUI slider插件。
使用这个部件,你可以在视图里面插入以下代码:
$this->widget('zii.widgets.jui.CJuiSliderInput', array( 'name'=>'rate', 'value'=>37, // additional javascript options for the slider plugin 'options'=>array( 'min'=>10, 'max'=>50, ), 'htmlOptions'=>array( 'style'=>'height:20px;' ), ));
这个部件也可使用范围内的模式,它使用2滑块来设置范围。 在这种模式中,attribute和maxAttribute将定义最大和最小范围值。 例如:
$this->widget('zii.widgets.jui.CJuiSliderInput', array( 'model'=>$model, 'attribute'=>'timeMin', 'maxAttribute'=>'timeMax, // additional javascript options for the slider plugin 'options'=>array( 'range'=>true, 'min'=>0, 'max'=>24, ), ));
如果你需要使用slider事件,请改变事件值为‘stop’或‘change’。
通过配置options属性, 你可以指定需要传递给JUI slider插件的选项。 如果需要选择(name-value pairs), 请参阅JUI slider说明。
公共属性
属性 | 类型 | 描述 | 定义在 |
---|---|---|---|
actionPrefix | string | actions的ID的前缀。 当微件在CController::actions中声明了 动作提供者,可以为其动作的ID指定前缀以区别 于别的微件或控制器。当微件用于控制器 的视图中时,必须配置同样的前缀。 | CWidget |
attribute | string | 和这个小物件相关的属性。 这个名称可能包含中括号(例如‘name[1]’),用于搜集表格式的数据输入。 | CJuiInputWidget |
controller | CController | 返回此微件所属的控制器。 | CWidget |
cssFile | mixed | 主题的CSS文件名。默认是‘jquery-ui. | CJuiWidget |
event | string | 事件的名称,这里input被附加到slider。 它可能是‘slide’,‘stop’或‘change’。如果你想使用‘slide’事件,改变$event属性到‘change’。 | CJuiSliderInput |
htmlOptions | array | JUI组件中HTML标签的属性设置。 | CJuiWidget |
id | string | 返回此微件的ID。如果需要的话,将生产一个新的ID并将其返回。 | CWidget |
maxAttribute | string | 如果slider被用在range模式,属性名的最大值。 | CJuiSliderInput |
model | CModel | 与这个小物件相关的数据模型 | CJuiInputWidget |
name | string | 输入框名称。如果model没有设置,这个必须设置。 | CJuiInputWidget |
options | array | the 初始的JavaScript需要传递给JUI插件的选项。 | CJuiWidget |
owner | CBaseController | 返回此微件的所有者或创建者。 | CWidget |
scriptFile | mixed | 主要JUI的JavaScript的文件名。默认是‘jquery-ui. | CJuiWidget |
scriptUrl | string | 包含所有JUI JavaScript文件的根目录。 如果没有设置这个属性(默认),Yii will publish the JUI package included in the zii release and use that to infer the root script URL. | CJuiWidget |
skin | mixed | 微件使用的皮肤的名称。默认为“default”。 如果此属性设置为false,微件将不会有皮肤被使用。 | CWidget |
tagName | string | 包含slider的容器元素名称。默认是‘div’。 | CJuiSliderInput |
theme | string | JUI主题的名字。默认是‘base’。确保在themeUrl下有这样一个目录, 其名称是这个属性的值相同(区分大小写)。 | CJuiWidget |
themeUrl | string | 包含所有JUI的主题文件夹的根目录。 如果没有设置这个属性(默认), Yii will publish the JUI package included in the zii release and use that to infer the root theme URL. | CJuiWidget |
value | integer | 确定slider的值,如果仅有一个事件处理程序。如果超过一个事件处理程序,确定第一个事件处理程序的值。 | CJuiSliderInput |
viewPath | string | 返回包含此微件所需的视图文件的路径。 | CWidget |
公共方法
受保护方法
方法 | 描述 | 定义在 |
---|---|---|
hasModel() | 确定是否这个小物件与一个数据模型相关。 | CJuiInputWidget |
registerCoreScripts() | 注册核心的脚本文件。 | CJuiWidget |
registerScriptFile() | 注册一个JavaScript文件在scriptUrl下。 | CJuiWidget |
resolveNameID() | CJuiInputWidget | |
resolvePackagePath() | 确定JUI包安装路径。 | CJuiWidget |
属性详细
event
属性
public string $event;
事件的名称,这里input被附加到slider。 它可能是‘slide’,‘stop’或‘change’。如果你想使用‘slide’事件,改变$event属性到‘change’。
maxAttribute
属性
public string $maxAttribute;
如果slider被用在range模式,属性名的最大值。
tagName
属性
public string $tagName;
包含slider的容器元素名称。默认是‘div’。
value
属性
public integer $value;
确定slider的值,如果仅有一个事件处理程序。如果超过一个事件处理程序,确定第一个事件处理程序的值。
方法详细
run()
方法
public void run()
|
public function run()
{
list($name,$id)=$this->resolveNameID();
$isRange=isset($this->options['range']) && $this->options['range'];
if(isset($this->htmlOptions['id']))
$id=$this->htmlOptions['id'];
else
$this->htmlOptions['id']=$id;
if(isset($this->htmlOptions['name']))
$name=$this->htmlOptions['name'];
if($this->hasModel())
{
$attribute=$this->attribute;
if ($isRange)
{
$options=$this->htmlOptions;
echo CHtml::activeHiddenField($this->model,$this->attribute,$options);
$options['id']=$options['id'].'_end';
echo CHtml::activeHiddenField($this->model,$this->maxAttribute,$options);
$attrMax=$this->maxAttribute;
$this->options['values']=array($this->model->$attribute,$this->model->$attrMax);
}
else
{
echo CHtml::activeHiddenField($this->model,$this->attribute,$this->htmlOptions);
$this->options['value']=$this->model->$attribute;
}
}
else
{
echo CHtml::hiddenField($name,$this->value,$this->htmlOptions);
if($this->value!==null)
$this->options['value']=$this->value;
}
$idHidden = $this->htmlOptions['id'];
$nameHidden = $name;
$this->htmlOptions['id']=$idHidden.'_slider';
$this->htmlOptions['name']=$nameHidden.'_slider';
echo CHtml::openTag($this->tagName,$this->htmlOptions);
echo CHtml::closeTag($this->tagName);
$this->options[$this->event]= $isRange ?
"js:function(e,ui){ v=ui.values; jQuery('#{$idHidden}').val(v[0]); jQuery('#{$idHidden}_end').val(v[1]); }":
'js:function(event, ui) { jQuery(\'#'. $idHidden .'\').val(ui.value); }';
$options=empty($this->options) ? '' : CJavaScript::encode($this->options);
$js = "jQuery('#{$id}_slider').slider($options);\n";
Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id, $js);
}
运行这个部件。 这个方法注册必要的javascript并渲染相应的HTML代码。