โดยปกติแล้ว 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.ตรวจสอบการแสดงผลในหน้าเว็บ

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

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

 

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

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

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
โดย Anonymous อ 23 ม.ค. 2024 10:46 am บอร์ด Programming - PHP
1
1331
พ 24 ม.ค. 2024 7:47 am โดย mindphp View Topic ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
โดย worramaitk พฤ 18 ม.ค. 2024 5:17 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
601
พฤ 18 ม.ค. 2024 5:17 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
ภาษา Lua ตอนที่ 8 : ตัวดำเนินการ
โดย worramaitk พฤ 18 ม.ค. 2024 4:55 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
452
พฤ 18 ม.ค. 2024 4:55 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 8 : ตัวดำเนินการ
ภาษา Lua ตอนที่ 7 : ชนิดข้อมูล Table (2)
โดย worramaitk พฤ 18 ม.ค. 2024 4:02 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
659
พฤ 18 ม.ค. 2024 4:02 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 7 : ชนิดข้อมูล Table (2)
ภาษา Lua ตอนที่ 6 : ชนิดข้อมูล Table (1)
โดย worramaitk พฤ 18 ม.ค. 2024 3:34 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
271
พฤ 18 ม.ค. 2024 3:34 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 6 : ชนิดข้อมูล Table (1)
การใช้งานโปรแกรมเครื่องคิดเลขโอเพนซอร์ส Qalculate! สำหรับคำนวณสิ่งต่างๆ ในชีวิตประจำวัน
โดย worramaitk พฤ 18 ม.ค. 2024 3:10 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
181
พฤ 18 ม.ค. 2024 3:10 pm โดย worramaitk View Topic การใช้งานโปรแกรมเครื่องคิดเลขโอเพนซอร์ส Qalculate! สำหรับคำนวณสิ่งต่างๆ ในชีวิตประจำวัน
รีวิวเครื่องปริ้นสำนักงานที่ใช้กันหน่อยค่ะว่าดีไหม พอดีอยากได้เครื่องปริ้นใหม่ค่ะ
โดย Narisara พฤ 18 ม.ค. 2024 1:29 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
563
ศ 26 ม.ค. 2024 12:33 pm โดย noncup302 View Topic รีวิวเครื่องปริ้นสำนักงานที่ใช้กันหน่อยค่ะว่าดีไหม พอดีอยากได้เครื่องปริ้นใหม่ค่ะ
ภาษา Lua ตอนที่ 5 : ชนิดข้อมูล Number
โดย worramaitk พฤ 18 ม.ค. 2024 1:14 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
197
พฤ 18 ม.ค. 2024 1:14 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 5 : ชนิดข้อมูล Number