version 4.1.0

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

  อังคารที่ 10 มีนาคม พ.ศ. 2558 เวลา 16:55:51 น.      1,811 ครั้ง


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

แนะนำ

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


CJuiAccordion : Default

 $this->widget('zii.widgets.jui.CJuiAccordion',array(
    'panels' => array(
        'panel 1' => 'content for panel 1',
        'panel 2' => 'content for panel 2',
    ),
    'options' => array(
        'animated' => 'bounceslide',
        'style' => array('minHeight' => '100'),
    ),
));

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

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

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

CJuiAutoComplete : Default

 $this->widget('zii.widgets.jui.CJuiAutoComplete',array(
    'name' => 'normal',
    'source' => array('ac1','ac2','ac3'),
    'options' => array(
        'minLength' => '2',
    ),
    'htmlOptions' => array(
        'style' => 'height:20px;',
    ),
));

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

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

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

CJuiButton : Default

 $this->widget('zii.widgets.jui.CJuiButton',array(
    'name' => 'submit',
    'caption' => 'Submit',
    'htmlOptions' => array(
        'style' => 'background:#0064cd;color:#ffffff;',
    ),
));

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

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

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

CJuiButton : Link

 $this->widget('zii.widgets.jui.CJuiButton',array(
    'name' => 'link',
    'caption' => 'Link To drivesoftcenter.net',
    'buttonType' => 'link',
    'url' => 'https://drivesoftcenter.net',
));

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

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

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

CJuiButton : radio

 $this->widget('zii.widgets.jui.CJuiButton',array(
    'name' => 'ratio-button-1',
    'buttonType' => 'radio',
    'caption' => 'Single Radio 1'
));

$this->widget('zii.widgets.jui.CJuiButton',array(
    'name' => 'ratio-button-2',
    'buttonType' => 'radio',
    'caption' => 'Single Radio 2'
));

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

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

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

CJuiButton : Radio Button Set

 <?php $radio = $this->beginWidget('zii.widgets.jui.CJuiButton', array(
    'name' => 'radio-btn',
    'buttonType' =>' buttonset',
)); ?>
<input type="radio" id="radio1" name="radio" value="1" />
<input type="radio" id="radio2" name="radio" value="2" checked="checked"/>
<input type="radio" id="radio3" name="radio" value="3" />
<?php $this->endWidget();?>

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

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

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

CJuiButton : Checkbox

 $this->widget('zii.widgets.jui.CJuiButton',array(
    'name' => 'checkbox-button-1',
    'buttonType' => 'checkbox',
    'caption' => 'Single Checkbox 1'
));

$this->widget('zii.widgets.jui.CJuiButton',array(
    'name' => 'checkbox-button-2',
    'buttonType' => 'checkbox',
    'caption' => 'Single Checkbox 2'
));

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

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

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

CJuiButton : Checkbox Button Set

 <?php $radio = $this->beginWidget('zii.widgets.jui.CJuiButton', array(
    'name' => 'checkbox-btn',
    'buttonType' => 'buttonset',
    'htmlTag' => 'span',
)); ?>
<input type="checkbox" id="check1" value="1" /><label for="check1">Checkbox 1</label>
<input type="checkbox" id="check2" value="2" /><label for="check2">Checkbox 2</label>
<input type="checkbox" id="check3" value="3" />
<?php $this->endWidget();?>

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

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

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




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

author

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

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






Comment