ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

              โดยปกติแล้ว Template ของ Joomla จะใช้ CSS Framwork ของ Bootstrap ซึ่งการแบ่งส่วนการแสดงผลในหน้าเว็บจะเรียกว่า Grid เราสามารถแบ่งเนื้อหาในหน้าเว็บเป็นคอลัมน์ เช่น เมนูฝั่งซ้าย เมนูฝั่งขวา และเนื้อหาตรงกลาง โดยขนาดของ Grid จะแบ่งเป็น 12 คอลัมน์ เราสามารถกำหนดความกว้างของคอลัมน์เป็นตัวเลข 1-12 ในตัวอย่างนี้จะแนะนำการแบ่งเนื้อหาเป็นสามส่วน โดยใช้คลาส col-md-3 สำหรับการแสดงผลฝั่งซ้ายและขวา ใช้คลาส col-md-6 สำหรับการแสดงผลเนื้อหาตรงกลาง ซึ่งถ้ากำหนดเนื้อหาครบทั้งสามคอลัมน์ การแสดงผลจะไม่มีปัญหา แต่หากปิดการแสดงผลในฝั่งซ้ายหรือขวาออกไป บริเวณนั้นจะเป็นช่องว่าง บทความนี้จึงแนะนำการปรับการแสดงผลของเนื้อหาให้มีขนาดพอดีกับหน้าเว็บไซต์

 

1.ในโปรแกรม Netbeans เปิดไฟล์ index.php จากนั้นกำหนดเงื่อนไขโดยนำคำสั่ง countModules ไปคลุมส่วนแสดงผลของข้อมูลฝั่งซ้าย

<?php if ($this->countModules('main-left')) : ?>
        <div class="col-md-3">
             <jdoc:include type="modules" name="main-left" style="xhtml" />
        </div>
<?php endif; ?>

 

2.กำหนดเงื่อนไขสำหรับการแสดงผลของเนื้อหาหลัก ซึ่งความกว้างของเนื้อหาหลักจะเปลี่ยนไปตามการแสดงผลของข้อมูลฝั่งซ้ายและขวา

$mainclass = 'col-md-12';
if ($this->countModules('main-left') && $this->countModules('main-right')) {
    $mainclass = 'col-md-6';
} else if ($this->countModules('main-left') || $this->countModules('main-right')) {
    $mainclass = 'col-md-9';
}

 

3.ตรวจสอบการแสดงผลในหน้าเว็บ

หน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล

แสดงหน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล
แสดงหน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล

 

หลังจากปิดการแสดงผลของโมดูลฝั่งซ้ายหรือขวาไป จะสังเกตว่าพื้นที่การแสดงผลของเนื้อหาหลักจะปรับขนาดให้พอดีกับหน้าเว็บไซต์

แสดงหน้าเว็บหลังจากการปิดการแสดงผลของโมดูลฝั่งขวา
แสดงหน้าเว็บหลังจากการปิดการแสดงผลของโมดูลฝั่งขวา

 

 

เนื้อหาเพิ่มเติม 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มารู้จักประเภทของเรียงความภาษาอังกฤษ
โดย Kannaphat อ 24 ม.ค. 2021 1:24 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
อ 24 ม.ค. 2021 1:24 pm โดย Kannaphat
การตัดรายการขายสินทรัพย์ที่มีค่าเสื่อม (Assets)
โดย Jiratchaya ส 23 ม.ค. 2021 11:02 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
ส 23 ม.ค. 2021 11:02 pm โดย Jiratchaya
วิธีการเขียน Essay อย่างไรให้ตอบโจทย์ผู้อ่าน
โดย Kannaphat ส 23 ม.ค. 2021 6:01 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
ส 23 ม.ค. 2021 6:01 pm โดย Kannaphat
python2.7 ติดปัญหา Non-ASCII character
โดย chakirin.bfds ส 23 ม.ค. 2021 12:59 pm บอร์ด Programming - C/C++ & java & Python
4
32
ส 23 ม.ค. 2021 2:40 pm โดย chakirin.bfds
ติดปัญหา find หา input ไม่เจอในไฟล์ javascript
โดย eange08 ศ 22 ม.ค. 2021 4:39 pm บอร์ด JavaScript & Jquery Ajax
1
49
ส 23 ม.ค. 2021 3:04 pm โดย eange08
โปรแกรม Kdenlive ตัดเสียงรบกวนอย่างไรคะ
โดย Kannaphat ศ 22 ม.ค. 2021 3:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
22
ศ 22 ม.ค. 2021 4:55 pm โดย Kannaphat
ขอวิธีดึงข้อมูลใน list มาแสดงเป็นข้อความทีละบรรทัด
โดย chakirin.bfds พฤ 21 ม.ค. 2021 6:38 pm บอร์ด Programming - C/C++ & java & Python
3
35
ส 23 ม.ค. 2021 1:31 pm โดย mindphp
อะไรบ้างที่คุณต้องรู้เกี่ยวกับการ ‘ซ่อมนาฬิกา’ !
โดย totheworld พฤ 21 ม.ค. 2021 3:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พฤ 21 ม.ค. 2021 3:05 pm โดย totheworld