DominixZ : Live Smart & Geeky

ผมขอแปลมาจาก CodingInstinct เลยละกันครับ ผมว่าเป็นเทคนิคที่เข้าใจง่ายแล้วสุดยอดเหมาะสมกับคนชอบเห็น code แบบ clean สุดๆต้องไม่พลาดเจ้าตัวนี้เลยละครับ

จะเห็นได้การที่เราจะทำกล่องข้อความสวยๆแบบนี้ เราคงต้องไปเจอกับ Code สุดไม่ Clean ประเภทนี้รึเปล่า ?

<div class="shadebox-wrapper">
<div class="shadebox-wrapper2">
<div class="shadebox-wrapper3">
<div class="shadebox">
<div class="shadebox-header">
<b class="shadebox-tlc"></b>
<b class="shadebox-trc"></b>
</div>            
<h2>Hello</h2>
<div class="shadebox-inner">
Lorem uipsad asd asd asd as
asdassdasd asd asd
dasdaasd  asd asd
asdasdsd dsd
</div>
<div class="shadebox-footer">
<b class="shadebox-blc"></b>
<b class="shadebox-brc"></b>
</div>
</div>
</div>
</div>
</div>

โดยเจ้าของบทความว่าเขาอาจจะใช้ JQuery Corner เพื่อกำจัด Code ยุ่งยากเช่นนี้ออกไปได้ แต่มันไม่มีเงาในแบบที่เขาต้องการ (นั้นเป็นเหตุผลที่เขาทำกล่องแบบนี้ขึ้นมาเอง) แต่เขาหวังว่า Code ของเขาจะเหลืออย่างมากเพียงแค่นี้

<div class="shadebox">
<h2>Hello</h2>            
<div class="shadebox-inner">
Lorem uipsad asd asd asd as
asdassdasd asd asd
dasdaasd  asd asd
asdasdsd dsd
</div>
</div>

เสร็จแล้วเขาก็สามารถทำได้ด้วยคำสั่ง Wrap , prepend , append ของ jQuery ด้วย code ดังนี้เลย

<script type="text/javascript">
$(document).ready(function() {
$('.shadebox').wrap(
"<div class='shadebox-wrapper'>" +
"<div class='shadebox-wrapper2'>" +
"<div class='shadebox-wrapper3'>" +
"</div></div></div>");
$('.shadebox').prepend("<div class='shadebox-header'><b class='shadebox-tlc'></b><b class='shadebox-trc'></b></div>");
$('.shadebox').append("<div class='shadebox-footer'><b class='shadebox-blc'></b><b class='shadebox-brc'></b></div>");
});              
</script>

โดยเขายังฝากบอกมันไม่มีวิธีแก้ไขปัญหาที่เหมาะสมที่สุดสำหรับเรื่องนี้แต่ประเด็นของเขาคือเขาอยากทำให้ Code ของเขาอ่านง่ายและ maintanance ง่ายที่สุด ผมจะขออธิบาย Code อย่างสั้นๆได้ใจความนะครับโดย wrap จะทำการหุ้ม

<div class=”shadebox”> ก่่อนเสร็จแล้วก็เติม code ในส่วนหัวและท้าย (สังเกตุจากตอนต้นมาเป็น code ที่ปรับแล้วจะมีในส่วน wrapper แล้วก็ส่วน Header หลัง <div class=”shadebox”> แล้วค่อยตามด้วยค่าต่างๆแล้วปิดท้ายด้วย Footer แบบที่เขาต้องการ prepend เพื่อทำการแทรก header append ทำการแทรก footer ทำให้ code เขา clean สุดๆ ก็ฝากวิธีนี้เพื่อใครกำลังต้องการ Clean HTML jQuery ทำให้มันเป็นเรื่องง่ายมากเลยทีเดียว