version 4.1.0

บทที่ 16 รวบรวมคำสั่งเรียกใช้งาน Zii Jui (2)

  อังคารที่ 10 มีนาคม พ.ศ. 2558 เวลา 23:10:18 น.      2,536 ครั้ง


บทที่ 16 รวบรวมคำสั่งเรียกใช้งาน Zii Jui (2)

แนะนำ

Widget (วิดเจ็ด) เป็นส่วนขยายเพิ่มเติมแบบหนึ่ง ข้อดีของ Widget คือ สามารถเรียกใช้งานซ้ำ ๆ ได้ เหมาะสำหรับเว็บแอพพลิเคชั่นขนาดใหญ่ ๆ ที่มีองค์ประกอบมากมาย "วิดเจ็ด" เป็นอีกส่วนหนึ่งที่ผมชอบมากใน Yii เพราะมีการออกแบบจัดการได้ดีมาก โดยสามารถรวมทรัพยกรพวก Script และ รูปภาพ เอาไว้ใน Widget ได้เลย ใน Yii เขาจะเรียกว่า asset แล้วในเวอร์ชั่นใหม่ "Widget" สามารถเปลี่ยนหน้าตาไปตามธีมได้ด้วย


CJuiDatePicker : Default

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker',
    'options' => array(
        'showAnim' => 'slide', //'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
    ),
    'htmlOptions' => array(
        'style' => 'height:20px;',
    ),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง

CJuiDatePicker : Inline

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker-Inline',
    'flat' => true, //remove to hide the datepicker
    'options' => array(
        'showAnim' => 'slide',  //'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
    ),
    'htmlOptions' => array(),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

CJuiDatePicker : Show/Select Other Month Dates

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker-other-month',
    'flat' => true, //remove to hide the datepicker
    'options' => array(
        'showAnim' => 'slide',  //'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
        'showOtherMonths' => true,  // Show Other month in jquery
        'selectOtherMonths' => true,  // Select Other month in jquery
    ),
    'htmlOptions' => array(),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 3 | รูปภาพตัวอย่าง

CJuiDatePicker : Display Button Bar (showButtonPanel)

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker-showButtonPanel',
    'value' => date('d-m-Y'),   
    'options' => array(
        'showAnim' => 'slide',//'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
        'showButtonPanel' => true,
    ),
    'htmlOptions' => array(),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 4 | รูปภาพตัวอย่าง

CJuiDatePicker : Display Month & Year Menus

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker-month-year-menu',
    'flat' => true,  //remove to hide the datepicker
    'options' => array(
        'dateFormat' => 'yy-mm-dd',
        'showAnim' => 'slide',  //'slide','fold','slideDown','fadeIn','blind','bounce','clip','drop'
        'changeMonth' => true,
        'changeYear' => true,
        'yearRange' => '2010:2015',
        'minDate' => '2010-01-01',      // minimum date
        'maxDate' => '2015-12-31',      // maximum date
    ),
    'htmlOptions' => array(),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 5 | รูปภาพตัวอย่าง

CJuiDatePicker : Display Month & Year Menus

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker-multiple-month',
    'flat' => true, //remove to hide the datepicker
    'options' => array(       
        'numberOfMonths' => 2,
        'showButtonPanel' => true,
    ),
    'htmlOptions' => array(),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 6 | รูปภาพตัวอย่าง

CJuiDatePicker : Date Range

 $this->widget('zii.widgets.jui.CJuiDatePicker',array(
    'name' => 'datepicker-min-max',   
    'value' => date('d-m-Y'),
    'options' => array(       
        'showButtonPanel' => true,
        'minDate' => -5,
        'maxDate' => "+1M +5D",
    ),
    'htmlOptions' => array(),
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 7 | รูปภาพตัวอย่าง

CJuiDialog : Default

 $this->beginWidget('zii.widgets.jui.CJuiDialog',array(
    'id' => 'mydialog',
    'options' => array(
        'title' => 'Dialog box',
        'autoOpen' => false,
    ),
));

    echo 'dialog content here';
    
$this->endWidget('zii.widgets.jui.CJuiDialog');

/** End Widget **/
echo CHtml::link('Open Dialog', '#', array(
   'onclick' => '$("#mydialog").dialog("open"); return false;',
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 8 | รูปภาพตัวอย่าง

CJuiDialog : Animation

 $this->beginWidget('zii.widgets.jui.CJuiDialog',array(
    'id' => 'mydialog',
    'options' => array(
        'title' => 'Dialog box',
        'autoOpen' => false,
    ),
));

    echo 'dialog content here';
    
$this->endWidget('zii.widgets.jui.CJuiDialog');

/** End Widget **/
echo CHtml::link('Open Dialog', '#', array(
   'onclick' => '$("#mydialog").dialog("open"); return false;',
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 9 | รูปภาพตัวอย่าง

CJuiSliderInput : Default

 <label for="amt">Volume:</label>
<input type="text" id="amount_basic" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
    $this->widget('zii.widgets.jui.CJuiSliderInput', array(
        'name' => 'slider_basic',
        'value' => 50, // default selection
        'event' => 'change',
        'options' => array(
            'min' => 0, //minimum value for slider input
            'max' => 100, // maximum value for slider input
            // on slider change event
            'slide' => 'js:function(event,ui){$("#amount_basic").val(ui.value);}',
        ),
        // slider css options
        'htmlOptions' => array(
            'style' => 'width:200px;'
        ),
    ));
?>

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 10 | รูปภาพตัวอย่าง

CJuiSliderInput : Fixed Maximum

 <label for="amt">Volume:</label>
<input type="text" id="amount_fixed_maximum" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
    $this->widget('zii.widgets.jui.CJuiSliderInput', array(
        'name' => 'slider_fixed_maximum',
        'value' => 50,// default selection
        'event' => 'change',
        'options' => array(
            'min' => 0, //minimum value for slider input
            'max' => 100, // maximum value for slider input
            'animate' => true,
            'range' => 'max',
            // on slider change event
            'slide' => 'js:function(event,ui){$("#amount_fixed_maximum").val(ui.value);}',
        ),
        // slider css options
        'htmlOptions' => array(
            'style' => 'width:200px;background-color:red;'
        ),
    ));
?>

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 11 | รูปภาพตัวอย่าง

CJuiSliderInput : Vertical

 <label for="amt">Volume:</label>
<input type="text" id="amount_vertical" style="border:0; color:#f6931f; font-weight:bold;" value="50" />
<?php
    $this->widget('zii.widgets.jui.CJuiSliderInput', array(
        'name' => 'slider_vertical',
        'value' => 50,// default selection
        'event' => 'change',
        'options' => array(
            'min' => 0, //minimum value for slider input
            'max' => 100, // maximum value for slider input
            'animate' => true,
            'orientation' => 'vertical',
            // on slider change event
            'slide' => 'js:function(event,ui){$("#amount_vertical").val(ui.value);}',
        ),
        // slider css options
        'htmlOptions' => array(),
    ));
?>

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 12 | รูปภาพตัวอย่าง

CJuiSliderInput : Ranger

 <label for="amt">Volume:</label>
<input type="text" id="amount-range" style="border:0; color:#f6931f; font-weight:bold;" value="1050-2750" />
<?php
    $this->widget('zii.widgets.jui.CJuiSliderInput', array(
        'name' => 'slider_range',
        'event' => 'change',
        'options' => array(
            'values' => array(1050,2750),// default selection
            'min' => 0, //minimum value for slider input
            'max' => 5000, // maximum value for slider input
            'animate' => true,
            // on slider change event
            'slide' => 'js:function(event,ui){$("#amount-range").val(ui.values[0]+\'-\'+ui.values[1]);}',
        ),
        // slider css options
        'htmlOptions' => array(),
    ));
?>

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 13 | รูปภาพตัวอย่าง

CJuiTabs : Default

 $this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs' => array(
        'StaticTab ' => 'Content for tab 1',
        'StaticTab With ID' => array('content' => 'Content for tab 2 With Id' , 'id' => 'tab2'),
        // panel 3 contains the content rendered by a partial view
        'AjaxTab' => array('ajax' => $this->createUrl('ajax')),
    ),
    // additional javascript options for the tabs plugin
    'options' => array(
        'collapsible' => true,
    ),
    'id' => 'MyTab-Menu',
));

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 14 | รูปภาพตัวอย่าง




นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment