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

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

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

 

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

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

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 2 มิถุนายน 2563
โดย natthanit.r2538 อ 02 มิ.ย. 2020 10:11 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
4
31
อ 02 มิ.ย. 2020 7:42 pm โดย natthanit.r2538
มารู้จักจังหวัดสงขลา เมืองสองทะเลกันค่ะ
โดย natthanit.r2538 อ 02 มิ.ย. 2020 4:27 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
7
อ 02 มิ.ย. 2020 4:27 pm โดย natthanit.r2538
ระบบบัญชีคืออะไร มีความสำคัญอย่างไร และจะทำอย่างไรหากต้องการวางระบบบัญชี
โดย natthanit.r2538 อ 02 มิ.ย. 2020 2:13 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
4
อ 02 มิ.ย. 2020 2:13 pm โดย natthanit.r2538
เปิดบริษัทต้องจดทะเบียนภาษีมูลค่าเพิ่มหรือไม่ ภาษีมูลค่าเพิ่มคืออะไร ??
โดย natthanit.r2538 อ 02 มิ.ย. 2020 12:16 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
7
อ 02 มิ.ย. 2020 12:16 pm โดย natthanit.r2538
ภ.ง.ด. 1,3,53 คืออะไร
โดย natthanit.r2538 อ 02 มิ.ย. 2020 11:08 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
7
อ 02 มิ.ย. 2020 11:08 am โดย natthanit.r2538
สรุปการประชุมลูกค้าครั้งแรก
โดย natthanit.r2538 จ 01 มิ.ย. 2020 6:46 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
2
จ 01 มิ.ย. 2020 6:46 pm โดย natthanit.r2538
สวนครัวริมระเบียง
โดย natthanit.r2538 จ 01 มิ.ย. 2020 4:42 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
10
จ 01 มิ.ย. 2020 4:42 pm โดย natthanit.r2538
วิธีการเดินทางจาก สงขลา มา กรุงเทพฯ
โดย natthanit.r2538 จ 01 มิ.ย. 2020 1:47 pm บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
17
จ 01 มิ.ย. 2020 1:47 pm โดย natthanit.r2538
งานประจำวันที่ 1 มิถุนายน 2563
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:53 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
2
32
อ 02 มิ.ย. 2020 10:00 am โดย natthanit.r2538
note
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:52 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
6
จ 01 มิ.ย. 2020 10:52 am โดย natthanit.r2538
Work's on Hand ณัฐนิตย์ ร่มบ้านโหล๊ะ M103
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:49 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
0
4
จ 01 มิ.ย. 2020 10:49 am โดย natthanit.r2538
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย natthanit.r2538 จ 01 มิ.ย. 2020 10:48 am บอร์ด M103 - ณัฐนิตย์ ร่มบ้านโหล๊ะ
2
23
จ 01 มิ.ย. 2020 11:08 am โดย natthanit.r2538
B - เข้าเมนูหน้ารวมรายการใน admin ไม่ได้
โดย thatsawan ศ 29 พฤษภาคม 2020 5:58 pm บอร์ด Odoojob.com - Tester
0
1
ศ 29 พฤษภาคม 2020 5:58 pm โดย thatsawan
B - ยังขาดหน้าผลการค้นหา จาก search.php
โดย mindphp ศ 29 พฤษภาคม 2020 6:11 am บอร์ด FDD (Main)
0
1
ศ 29 พฤษภาคม 2020 6:11 am โดย mindphp
B - กล่องค้นหาจากหน้า index ใช้งานไม่ได้ กดแล้วไม่ไปหน้าค้นหา
โดย mindphp ศ 29 พฤษภาคม 2020 5:39 am บอร์ด FDD (Main)
1
1
ศ 29 พฤษภาคม 2020 5:53 am โดย mindphp
B - ไม่ใช่แค่โชว์ icon facebook มันต้องทำลิงค์เพื่อให้คลิกไป
โดย mindphp ศ 29 พฤษภาคม 2020 4:39 am บอร์ด FDD (Main)
1
2
ศ 29 พฤษภาคม 2020 4:51 am โดย mindphp
อัพเดท phpbb 3.3 เเล้ว extenstion ใช้งานไม่ได้
โดย thatsawan พฤ 28 พฤษภาคม 2020 10:08 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
125
พฤ 28 พฤษภาคม 2020 10:10 pm โดย thatsawan
วิธีการสร้าง css ที่ใช้งานเฉพาะในบราวเซอร์ safari เท่านั้น
โดย Ittichai_chupol พฤ 28 พฤษภาคม 2020 6:06 pm บอร์ด CSS Knowledge
0
121
พฤ 28 พฤษภาคม 2020 6:06 pm โดย Ittichai_chupol
R - Set Demo เป็น subdomain ของ ตัวนี้
โดย mindphp พฤ 28 พฤษภาคม 2020 6:17 am บอร์ด มารียา ซีฟู้ดส์ - Developer
0
9
พฤ 28 พฤษภาคม 2020 6:17 am โดย mindphp
อยากทราบวิธีการกำหนด ค่า css ให้กับ button โดยกำหนดเฉพาะแต่ละบราวเซอร์
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 8:39 pm บอร์ด HTML CSS
1
52
พ 27 พฤษภาคม 2020 9:15 pm โดย mindphp