ต่อไป »

[LighteningZz]

เราจะกำหนด Layout ของ jdoc component ที่มันใช้แสดง Article เป็น 4 ช่องยังไงครับ พอดีจะแบ่งเป็น 4 ช่อง  span4x4

Bootstrap

[ariesanywhere]

ในส่วนของ layout น่าจะเป็นเรื่องของ bootstrap grid น่ะครับ โค้ด joomla ค่อยเอามาใส่ทีหลัง

หลักการคือ
1. มี container ก่อน เพื่อครอบ layout ทั้งหมด และระบุว่าเป็น component ของเรา

2. กำหนด row เพื่อแบ่งแนวบรรทัดของเรา (ส่วนนี้แล้วแต่ความชอบครับ มีก็ได้ไม่มีก็ได้)

3. แบ่ง column ส่วนนี้ หลักการคือ bootstrap จะแบ่งคอลัมน์ทั้งหมดเป็น 12 ช่อง วิธีการใส่ค่า คือให้นึกว่าอะไร x จำนวนช่องที่เราอยากได้แล้ว = 12 เช่นในกรณีของคุณต้องการแบ่ง 4 ช่อง ดังนั้น 3x4 = 12 เลข 4 คือช่องที่จะได้ เลข 3 คือค่าที่จะเอาไปใส่ col-mg-3, col-md-3, col-sm-3, col-xs-3 หลักๆที่ใช้กันบ่อยก็คือ col-md กับ col-xs ครับ เดี๋ยวนี้เริ่มมาใช้ col-sm กันเยอะขึ้นครับ

4. col-lg, col-md, col-sm, col-xs คืออะไร ตรงนี้รายละเอียดเยอะครับ ลองเข้าไปหน้านี้ดูและกันครับ
http://getbootstrap.com/examples/grid/
5. ตัวอย่าง
col-lg-3 = เวลาแสดงในจอขนาดใหญ่ เช่นเครื่องเดสก์ท็อปหน้าจอใหญ่ๆ ผมจะเห็นเป็น 4 column (3 x 4 =12)
col-md-3 = เวลาแสดงในจอขนาดทั่วไป เช่นเครื่องเดสก์ท็อปหน้าจอทั่วๆไป ผมจะเห็นเป็น 4 column (3 x 4 =12)
col-sm-3 = เวลาแสดงในจอขนาดประมาณ tablet ผมจะเห็นเป็น 4 column (3 x 4 =12)
col-xs-6 = เวลาแสดงในจอขนาดเล็ก เช่นสมาร์ทโฟน ผมจะเห็นเป็น 2 column  (6 x 6=12)

*หรือถ้าจะเอาสะดวก ลองเข้าไปใช้เว็บนี้ดูครับ สะดวกดี เอาไว้ออกแบบ layout bootstrap ครับ
http://www.layoutit.com/

*หรือถ้าเอาด่วน ลองเอา template free มาใช้ได้เลยครับ มี admin template สำหรับทำคอมโพเนนท์ไว้เรียบร้อย
http://startbootstrap.com/

*ไหนๆก็ใช้ bootstrap แล้ว แนะนำให้ใส่ font-awesome ลงไปด้วยครับจะได้สวยๆยิ่งขึ้น
http://fontawesome.io/

สู้ๆครับ ขอให้โชคดี

[LighteningZz]

ขอบคุณครับ
แต่ที่ผมสงสัยคือ

โค๊ด:

<div class="container">
<div class="col-md4">
<jdoc:include type="component">
</div>
</div>

แบบนี้หรือป่าวครับ

[bobbyonline]

ในส่วนของ layout น่าจะเป็นเรื่องของ bootstrap grid น่ะครับ โค้ด joomla ค่อยเอามาใส่ทีหลัง

หลักการคือ
1. มี container ก่อน เพื่อครอบ layout ทั้งหมด และระบุว่าเป็น component ของเรา

2. กำหนด row เพื่อแบ่งแนวบรรทัดของเรา (ส่วนนี้แล้วแต่ความชอบครับ มีก็ได้ไม่มีก็ได้)

3. แบ่ง column ส่วนนี้ หลักการคือ bootstrap จะแบ่งคอลัมน์ทั้งหมดเป็น 12 ช่อง วิธีการใส่ค่า คือให้นึกว่าอะไร x จำนวนช่องที่เราอยากได้แล้ว = 12 เช่นในกรณีของคุณต้องการแบ่ง 4 ช่อง ดังนั้น 3x4 = 12 เลข 4 คือช่องที่จะได้ เลข 3 คือค่าที่จะเอาไปใส่ col-mg-3, col-md-3, col-sm-3, col-xs-3 หลักๆที่ใช้กันบ่อยก็คือ col-md กับ col-xs ครับ เดี๋ยวนี้เริ่มมาใช้ col-sm กันเยอะขึ้นครับ

4. col-lg, col-md, col-sm, col-xs คืออะไร ตรงนี้รายละเอียดเยอะครับ ลองเข้าไปหน้านี้ดูและกันครับ
http://getbootstrap.com/examples/grid/
5. ตัวอย่าง
col-lg-3 = เวลาแสดงในจอขนาดใหญ่ เช่นเครื่องเดสก์ท็อปหน้าจอใหญ่ๆ ผมจะเห็นเป็น 4 column (3 x 4 =12)
col-md-3 = เวลาแสดงในจอขนาดทั่วไป เช่นเครื่องเดสก์ท็อปหน้าจอทั่วๆไป ผมจะเห็นเป็น 4 column (3 x 4 =12)
col-sm-3 = เวลาแสดงในจอขนาดประมาณ tablet ผมจะเห็นเป็น 4 column (3 x 4 =12)
col-xs-6 = เวลาแสดงในจอขนาดเล็ก เช่นสมาร์ทโฟน ผมจะเห็นเป็น 2 column  (6 x 6=12)

*หรือถ้าจะเอาสะดวก ลองเข้าไปใช้เว็บนี้ดูครับ สะดวกดี เอาไว้ออกแบบ layout bootstrap ครับ
http://www.layoutit.com/

*หรือถ้าเอาด่วน ลองเอา template free มาใช้ได้เลยครับ มี admin template สำหรับทำคอมโพเนนท์ไว้เรียบร้อย
http://startbootstrap.com/

*ไหนๆก็ใช้ bootstrap แล้ว แนะนำให้ใส่ font-awesome ลงไปด้วยครับจะได้สวยๆยิ่งขึ้น
http://fontawesome.io/

สู้ๆครับ ขอให้โชคดี

ระเอียดยิบครัช ^^ ขอบคุณครับ

[tutorclip]

แนะนำดีมากเลยครับ 

[watyai]

ถ้าจะแบ่ง result จาก jdoc component ต้อง Overwrite Component ใน template ที่เราทำขึ้นครับ
แล้วใช้ ความรู้ ตามที่ คุณ ariesanywhere แนะนำมาช่วยปรับในส่วนของ result ในไฟล์ view ของแต่ละ component

[steelheros]

เข้ามาฟังด้วยครับ