หลาย ๆ คนคงกำลังมองหา feature ที่สามารถปรับแต่งให้เกิดความน่าสนใจกับเว็บไซต์
ด้วยการนำสิ่งที่มีอยู่ในระบบเช่น ระบบข่าวสาร มาใส่ลูกเล่นเพื่อให้เกิดการตอบโต้กับผู้ใช้งาน
เช่น การคลิ๊กแล้วเปิดเนื้อหาข่าว แทนที่จะลิ้งก์ไปที่หน้าใหม่ เพื่อดูรายละเอียดของข่าวนั้น ๆ
แล้วต้องเตรียมอะไรบ้างหล่ะ?
1. tt_news HTML Template ที่มีการ Customize ใส่ Class และตำแหน่งที่ต้องการเช่น
<div class="news-list-container">
<!-- ###CONTENT### begin -->
<!-- ###NEWS### begin -->
<div class="news-list-item-accordion">
<h2 class="acc_trigger">###NEWS_TITLE###</h2>
<div class="acc_container">
<div class="block">
###NEWS_CONTENT###
</div>
</div>
</div>
<!-- ###NEWS### end-->
<!-- ###CONTENT### end -->
</div>
2. CSS สำหรับช่วยในการแสดงผล ดังนี้
.news-list-container .news-list-item-job h2.acc_trigger p {
padding:0;
margin: 0 0 5px 0;
font-size: 70%;
font-weight: normal;
background:none;
color:#000;
}
.news-list-container .news-list-item-accordion h2.acc_trigger{
text-decoration: none;
color:#C30020;
display: block;
font-weight: bold;
font-size: 1.4em;
padding:0 0 0 15px;
background:url("../../images/non-active.png") no-repeat left 5px transparent;
}
.news-list-container .news-list-item-accordion h2.acc_trigger:hover {
padding:0 0 0 15px;
background:url("../../images/active.png") no-repeat left 5px transparent;
}
.news-list-container .news-list-item-accordion h2.active{
padding:0 0 0 15px;
background:url("../../images/active.png") no-repeat left 5px transparent;
}
.news-list-container .news-list-item-accordion .acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
clear: both;
}
.news-list-container .news-list-item-accordion .acc_container .block { padding: 20px; }
.news-list-container .news-list-item-accordion span.news-list-morelink {display:none;}
.news-list-container .news-list-item-accordion {
border-bottom: 1px black dotted;
background: url("../../images/linksbg.gif") repeat-x left bottom white;
margin:0 0 10px 0;
}
3. JQuery ที่มีฟังก์ชั่นการทำงานของ Accordion ถ้าหากใช้ ibstv package
เราจะเตรียม t3jquery สำหรับ migrate ฟังก์ชั่นที่ต้องการใช้แล้วทำการ generate แบบไม่ต้องไปหา jquery ที่ไหนให้ยุ่งยาก
เวลาที่ merge การใช้งาน ตรง jQuery UI Widgets ก็ให้เลือก Accordion เข้าไปด้วย จากนั้นก็ทำการ create ไฟล์สำหรับใช้งาน
4. เรียกใช้งาน JQuery ผ่านทาง TYPO Script Setup ดังนี้
includeLibs.t3jquery = EXT:t3jquery/class.tx_t3jquery.php
page.1490 = COA
page.1490 {
10 = USER
10.userfunc = tx_t3jquery->addJS
20 = USER
20.userFunc = tx_t3jquery->addJS
20.jsdata.cObject = COA
20.jsdata.cObject {
1 = TEXT
1.value (
jQuery('div.news-list-item-job> div.acc_container').hide();
jQuery('div.news-list-item-job> h2').click(function() {
jQuery(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
});
)
}
}
เห็นหรือเปล่าว่าไม่ยากเลย ถ้าเรารู้จักนำสิ่งที่มีอยู่มาใช้ให้เป็นประโยชน์
สามารถลดเวลาในการทำ ยังถูกอกถูกใจผู้ใช้งานอีกด้วย
