เราสามารถ Register ไฟล์ JavaScript และ CSS ในหน้า Layout และหน้าเว็บของเราได้โดยใช้ Script ดังนี้
การ Register Core Script
เป็นการโหลด Script พื้นฐานโดยตัว Script จะถูกบรรจุอยู่ที่
yii/framework/web/js/source
หากต้องการดูว่าสามารถ Register Script ตัวไหนได้บ้างให้ไปดูได้ที่ไฟล์
framework/web/js/packages.php
วิธีการใช้งานให้ทำการเขียน Code บริเวณที่ต้องการ Register เช่นในส่วน Header ดังนี้
Yii::app()->clientScript->registerCoreScript('jquery');
เป็นการ Register ไฟล์ jQuery โดยจะแสดงผลดังนี้
<script type="text/javascript" src="/assets/3869f222/jquery.js"></script>
การ Register JavaScript ไฟล์
JavaScript ก็เป็น Script อีกอย่างที่ได้ใช้กันค่อนข้างบ่อยมากในการทำ Application โดยมีตัวอย่างของการ Register Script ดังนี้
Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_END);
จะได้ผลลัพท์ดังนี้
<script type="text/javascript" src="/themes/hanuman/assets/js/default.js"></script>
จะเห็นว่ามีคำสั่ง CClientScript::POS_END โดยที่ POS มาจากคำว่า Position นั่นเองครับ นั่นก็แสดงว่าเราสามารถวางตำแหน่งของ Script ของเราได้หลายตำแหน่ง ไปดูกันเลยว่าวางได้ตำแหน่งไหนบ้างครับ
วางที่ Tag Head ของ Application
Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_HEAD);
วางหลังจาก Tag Body ของ Application
Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_BEGIN);
วางด้านล่างของเว็บก่อนปิด Tag Body
Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseURL.’/assets/js/default.js’,CClientScript::POS_END);
การ Register ไฟล์ CSS
ไฟล์ CSS หรือ Cascade Style Sheet เป็นไฟล์ที่กำหนดรูปแบบของเว็บไซต์ เช่น สีสัน การจัดตำแหน่ง ต่างๆ ใน Application เป็นต้นโดยมีการใช้งานดังนี้
Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'/assets/css/style.css');
จะได้ผลลัพท์ดังนี้
<link rel="stylesheet" type="text/css" href="/themes/hanuman/assets/css/style.css" />
นอกจากนั้นเรายังสามารถเพิ่มรายละเอียดเข้าไปได้ เช่นเป็นการกำหนดว่า CSS นี้เป็นส่วนของ Screen หรือว่าส่วน Print ได้อีกด้วย
Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'/assets/css/print.css', 'print');
จะได้ผลลัพท์ดังนี้
<link rel="stylesheet" type="text/css" href="/themes/ hanuman /assets/css/style.css" media="print" />
ความคิดเห็น