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

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

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

 

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

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

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทำให้ช่องใส่ตัวเลขพิมพ์เป็นตัวหนังสือได้ด้วย
โดย or_neung พ 10 มิ.ย. 2009 8:55 am บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
19
5251
จ 15 มิ.ย. 2009 11:33 am โดย mindphp View Topic อยากทำให้ช่องใส่ตัวเลขพิมพ์เป็นตัวหนังสือได้ด้วย
เกี่ยวกับ Dream MX-CS3-4 ในหน้า design
โดย babekung อ 09 มิ.ย. 2009 5:10 pm บอร์ด Programming - PHP
0
718
อ 09 มิ.ย. 2009 5:10 pm โดย babekung View Topic เกี่ยวกับ Dream MX-CS3-4 ในหน้า design
windows 7 ใครลองเอามาเล่นแล้วบ้าง
โดย ob1 อ 09 มิ.ย. 2009 3:16 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
1754
อ 09 มิ.ย. 2009 5:50 pm โดย mindphp View Topic windows 7 ใครลองเอามาเล่นแล้วบ้าง
bing bing.com Search engine ตัวใหม่ของ ไมโครซอฟท์ ออกแล้ว
โดย mindphp จ 08 มิ.ย. 2009 3:15 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
2349
อ 09 มิ.ย. 2009 8:33 pm โดย pvatum View Topic bing bing.com Search engine ตัวใหม่ของ ไมโครซอฟท์ ออกแล้ว
tree menu ที่สร้างด้วย AllyNova tree menu
โดย nok_bird จ 08 มิ.ย. 2009 1:22 pm บอร์ด HTML CSS
1
2979
จ 08 มิ.ย. 2009 2:00 pm โดย mindphp View Topic tree menu ที่สร้างด้วย AllyNova tree menu
จะเขียนรายงานให้ออก excel ทำอย่างไรค่ะ แนะนำหน่อย
โดย ammyamm จ 08 มิ.ย. 2009 7:56 am บอร์ด Programming - PHP
5
3766
พฤ 29 มี.ค. 2012 2:36 pm โดย บุคคลทั่วไป View Topic จะเขียนรายงานให้ออก excel ทำอย่างไรค่ะ แนะนำหน่อย
จะสร้าง Link ยังไงให้ไปตามที่เราตั้งไว้เหรอครับ
โดย TanzEnii อ 07 มิ.ย. 2009 10:20 pm บอร์ด Programming - PHP
3
1066
จ 08 มิ.ย. 2009 10:35 am โดย TanzEnii View Topic จะสร้าง Link ยังไงให้ไปตามที่เราตั้งไว้เหรอครับ
ผมสามารถทำ from เดียวแต่ไปอัพเดท 2 table ได้รึเปล่าครับ
โดย K_B อ 07 มิ.ย. 2009 9:12 pm บอร์ด Programming - PHP
1
791
อ 07 มิ.ย. 2009 9:38 pm โดย mindphp View Topic ผมสามารถทำ from เดียวแต่ไปอัพเดท 2 table ได้รึเปล่าครับ