CJuiSliderInput.php 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <?php
  2. /**
  3. * CJuiSliderInput class file.
  4. *
  5. * @author Sebastian Thierer <sebathi@gmail.com>
  6. * @link http://www.yiiframework.com/
  7. * @copyright 2008-2013 Yii Software LLC
  8. * @license http://www.yiiframework.com/license/
  9. */
  10. Yii::import('zii.widgets.jui.CJuiInputWidget');
  11. /**
  12. * CJuiSliderInput displays a slider. It can be used in forms and post its value.
  13. *
  14. * CJuiSlider encapsulates the {@link http://jqueryui.com/slider/ JUI
  15. * slider} plugin.
  16. *
  17. * To use this widget, you may insert the following code in a view:
  18. * <pre>
  19. * $this->widget('zii.widgets.jui.CJuiSliderInput',array(
  20. * 'name'=>'rate',
  21. * 'value'=>37,
  22. * // additional javascript options for the slider plugin
  23. * 'options'=>array(
  24. * 'min'=>10,
  25. * 'max'=>50,
  26. * ),
  27. * 'htmlOptions'=>array(
  28. * 'style'=>'height:20px;',
  29. * ),
  30. * ));
  31. * </pre>
  32. *
  33. * The widget can also be used in range mode which uses 2 sliders to set a range.
  34. * In this mode, {@link attribute} and {@link maxAttribute} will define the attribute
  35. * names for the minimum and maximum range values, respectively. For example:
  36. *
  37. * <pre>
  38. * $this->widget('zii.widgets.jui.CJuiSliderInput',array(
  39. * 'model'=>$model,
  40. * 'attribute'=>'timeMin',
  41. * 'maxAttribute'=>'timeMax',
  42. * // additional javascript options for the slider plugin
  43. * 'options'=>array(
  44. * 'range'=>true,
  45. * 'min'=>0,
  46. * 'max'=>24,
  47. * ),
  48. * ));
  49. * </pre>
  50. *
  51. * If you need to use the slider event, please change the event value for 'stop' or 'change'.
  52. *
  53. * By configuring the {@link options} property, you may specify the options
  54. * that need to be passed to the JUI slider plugin. Please refer to
  55. * the {@link http://api.jqueryui.com/slider/ JUI Slider API} documentation
  56. * for possible options (name-value pairs) and
  57. * {@link http://jqueryui.com/slider/ JUI Slider page} for general
  58. * description and demo.
  59. *
  60. * @author Sebastian Thierer <sebathi@gmail.com>
  61. * @package zii.widgets.jui
  62. * @since 1.1
  63. */
  64. class CJuiSliderInput extends CJuiInputWidget
  65. {
  66. /**
  67. * @var string the name of the container element that contains the slider. Defaults to 'div'.
  68. */
  69. public $tagName='div';
  70. /**
  71. * @var integer determines the value of the slider, if there's only one handle. If there is more than one handle,
  72. * determines the value of the first handle.
  73. */
  74. public $value;
  75. /**
  76. * @var string the name of the event where the input will be attached to the slider. It
  77. * can be 'slide', 'stop' or 'change'. If you want to use 'slide' event change $event property to 'change'.
  78. */
  79. public $event='slide';
  80. /**
  81. * @var string name of attribute for max value if slider is used in range mode.
  82. */
  83. public $maxAttribute;
  84. /**
  85. * @var string the input name to be used for max value attribute when using slider in range mode.
  86. * This must be set in case {@link model} isn't used.
  87. * @since 1.1.14
  88. */
  89. public $maxName;
  90. /**
  91. * @var integer determines the max value of the slider, if there's two handles (range mode). Ignored if there's
  92. * only one handle.
  93. * @since 1.1.14
  94. */
  95. public $maxValue;
  96. /**
  97. * @var string the suffix to be appended to the ID of the max value input element
  98. * when slider used in range mode.
  99. * @since 1.1.14
  100. */
  101. public $maxIdSuffix='_end';
  102. /**
  103. * Run this widget.
  104. * This method registers necessary javascript and renders the needed HTML code.
  105. */
  106. public function run()
  107. {
  108. list($name,$id)=$this->resolveNameID();
  109. if(isset($this->htmlOptions['id']))
  110. $id=$this->htmlOptions['id'];
  111. else
  112. $this->htmlOptions['id']=$id;
  113. $isRange=isset($this->options['range']) && $this->options['range'] &&
  114. $this->options['range']!=='max' && $this->options['range']!=='min';
  115. if($this->hasModel())
  116. {
  117. $attribute=$this->attribute;
  118. if($isRange)
  119. {
  120. $options=$this->htmlOptions;
  121. echo CHtml::activeHiddenField($this->model,$this->attribute,$options);
  122. $options['id'].=$this->maxIdSuffix;
  123. echo CHtml::activeHiddenField($this->model,$this->maxAttribute,$options);
  124. $maxAttribute=$this->maxAttribute;
  125. $this->options['values']=array($this->model->$attribute,$this->model->$maxAttribute);
  126. }
  127. else
  128. {
  129. echo CHtml::activeHiddenField($this->model,$this->attribute,$this->htmlOptions);
  130. $this->options['value']=$this->model->$attribute;
  131. }
  132. }
  133. else
  134. {
  135. if($isRange)
  136. {
  137. list($maxName,$maxId)=$this->resolveNameID('maxName','maxAttribute');
  138. $options=$this->htmlOptions;
  139. echo CHtml::hiddenField($name,$this->value,$options);
  140. $options['id'].=$this->maxIdSuffix;
  141. echo CHtml::hiddenField($maxName,$this->maxValue,$options);
  142. $this->options['values']=array($this->value,$this->maxValue);
  143. }
  144. else
  145. {
  146. echo CHtml::hiddenField($name,$this->value,$this->htmlOptions);
  147. if($this->value!==null)
  148. $this->options['value']=$this->value;
  149. }
  150. }
  151. $idHidden=$this->htmlOptions['id'];
  152. $this->htmlOptions['id']=$idHidden.'_slider';
  153. echo CHtml::tag($this->tagName,$this->htmlOptions,'');
  154. $this->options[$this->event]=$isRange
  155. ? new CJavaScriptExpression("function(e,ui){ v=ui.values; jQuery('#{$idHidden}').val(v[0]); jQuery('#{$idHidden}{$this->maxIdSuffix}').val(v[1]); }")
  156. : new CJavaScriptExpression("function(event, ui) { jQuery('#{$idHidden}').val(ui.value); }");
  157. $options=CJavaScript::encode($this->options);
  158. Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id,"jQuery('#{$id}_slider').slider($options);");
  159. }
  160. }