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

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

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

 

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

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

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ภาษา Lua ตอนที่ 4 : ชนิดข้อมูล String
โดย worramaitk พฤ 18 ม.ค. 2024 12:32 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
169
พฤ 18 ม.ค. 2024 12:32 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 4 : ชนิดข้อมูล String
ภาษา Lua ตอนที่ 3 : ชนิดข้อมูล nil กับ boolean
โดย worramaitk พฤ 18 ม.ค. 2024 11:34 am บอร์ด Microsoft Office Knowledge & line & Etc
0
168
พฤ 18 ม.ค. 2024 11:34 am โดย worramaitk View Topic ภาษา Lua ตอนที่ 3 : ชนิดข้อมูล nil กับ boolean
ภาษา Lua ตอนที่ 2 : พื้นฐานตัวแปร
โดย worramaitk พฤ 18 ม.ค. 2024 10:56 am บอร์ด Microsoft Office Knowledge & line & Etc
0
159
พฤ 18 ม.ค. 2024 10:56 am โดย worramaitk View Topic ภาษา Lua ตอนที่ 2 : พื้นฐานตัวแปร
ภาษา Lua ตอนที่ 1: รู้จักพื้นฐานของภาษา จะได้เขียนโปรแกรมได้ง่ายขึ้น
โดย worramaitk พฤ 18 ม.ค. 2024 10:54 am บอร์ด Microsoft Office Knowledge & line & Etc
0
150
พฤ 18 ม.ค. 2024 10:54 am โดย worramaitk View Topic ภาษา Lua ตอนที่ 1: รู้จักพื้นฐานของภาษา จะได้เขียนโปรแกรมได้ง่ายขึ้น
นำเที่ยวจังหวัดนราธิวาส
โดย worramaitk อ 16 ม.ค. 2024 7:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
346
พ 17 ม.ค. 2024 7:13 pm โดย simall View Topic นำเที่ยวจังหวัดนราธิวาส
แนะนำการเดินทางและท่องเที่ยวในจังหวัดเชียงใหม่
โดย DearCM จ 15 ม.ค. 2024 4:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
296
อ 16 ม.ค. 2024 9:11 am โดย emptyspace View Topic แนะนำการเดินทางและท่องเที่ยวในจังหวัดเชียงใหม่
ไขข้อข้องใจ มะเร็งตับมีกี่ระยะกันนะ?
โดย admeadme ศ 12 ม.ค. 2024 1:46 pm บอร์ด Share Knowledge
0
456
ศ 12 ม.ค. 2024 1:46 pm โดย admeadme View Topic ไขข้อข้องใจ มะเร็งตับมีกี่ระยะกันนะ?
ใช้งานร่วมกันหลายๆคนในทีมเดียวกันด้วย ChatGPT Team เปิดมาให้ราคา
โดย mindphp พฤ 11 ม.ค. 2024 3:55 am บอร์ด MindPHP News & Feedback
0
281
พฤ 11 ม.ค. 2024 3:55 am โดย mindphp View Topic ใช้งานร่วมกันหลายๆคนในทีมเดียวกันด้วย ChatGPT Team เปิดมาให้ราคา