เพิ่มลูกเล่น Accordion ให้กับ tt_news ด้วย JQuery ใน TYPO3 แบบง่าย ๆ

typo3 tt_news with accordion using jquery
หลาย ๆ คนคงกำลังมองหา 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');
		});
	)
  }
}


เห็นหรือเปล่าว่าไม่ยากเลย ถ้าเรารู้จักนำสิ่งที่มีอยู่มาใช้ให้เป็นประโยชน์
สามารถลดเวลาในการทำ ยังถูกอกถูกใจผู้ใช้งานอีกด้วย

Posted by:

Kickstarter
Administrator

12 Comments

  1. modv1 -  February 28, 2012 - 10:25 am

    ดีครับ
    มีคำถามอีกละ

    tt_news

    จะ set ยังไงให้ พอเรากดเข้าไปดูในข่าว ให้มันเปิดเป็น new window หรือ ให้มันเปิดเป็น tabใหม่ น่ะครับ

    ลอง plugin.tt_news {

    pageTypoLink.target >
    pageTypoLink.target = _blank

    }

    ก็ไม่ได้น่ะครับ

    pageTypoLink.extTarget = _blank

    ก็ไม่ได้อยู่ดี

    พอจะทราบมั้ยครับ ขอบคุณครับ

    Reply
    • Kickstarter -  February 29, 2012 - 10:47 am

      พี่อ่านเจอใน blog ของ นักพัฒนา TYPO3 ต่างประเทศ
      ในเวอร์ชั่นเก่า ๆ ของ tt_news สามารถทำงานได้ดี
      ถ้าในเวอร์ชั่นที่มากกว่า 2.5 อาจจะต้องเข้าไปแก้โค้ดและเขียน typoscript เพิ่มนะค่ะ
      เพราะมีหลายอย่างในเวอร์ชั่นใหม่ ๆ ที่เป็น bugs อยู่ค่ะ

      Reply
      • modv1 -  February 29, 2012 - 11:21 am

        ครับ ขอบคุณครับ
        ผมใช้ 3.1.0 ครับ

        เคยใช้ เวอร์ชั่นต่ำกว่านี้แล้วโดน hack อ่ะครับ แต่จำไม่ได้แล้วว่าเวอร์ชั่นไหน
        ข่าวผมอยู่หน้าแรกของเว็บเลย วันนึงเปิดเว็บมา มันมีข่าวใหม่โผล่มาจากไหนไม่รู้ซึ่งผมไม่ได้ใส่ข่าวไปใหม่ หัวข้อข่าวชื่อ Hack by xxx

        เลยต้องอัพเป็น 3.1.0 จากนั้นก็ไม่เคยโดนhack อีกเลย

        Reply
        • Kickstarter -  February 29, 2012 - 11:24 am

          ส่งเว็บไซต์ให้ดูหน่อยได้หรือเปล่าค่ะ
          น่าจะต้องวิเคราะห์ว่าทำไมถึง hack ได้

          Reply
  2. modv1 -  February 29, 2012 - 1:26 pm

    จิงๆอยากจะโชเว็บให้ดูเหมือนกันครับ
    แต่ท่าทางจะไม่ได้น่ะครับ เจ้านายสั่งไว้ ขนาดคอมเม้นของ typo3 เจ้านายยังสั่งให้เอาออกเลยครับ

    ที่โดน hack อาจเพราะใช้ typo3 เวอร์ชั่นเก่า กับ tt_news เวอร์ชั่นเก่าด้วยครับ คงมีช่องให้ hack ได้

    แต่ตั้งแต่อัพเป็น TYPO3 Ver. 4.6.3 กับ tt_news 3.1.0 ก็ไม่โดนอีกเลยครับ

    Reply
    • Kickstarter -  February 29, 2012 - 2:11 pm

      ให้ไปดูเรื่องของการเขียน htaccess ของ TYPO3
      และก็เรื่องของ Server ค่ะว่า
      ปิด-Directory listing เพื่อไม่ให้เข้าถึงข้อมูลที่ไม่ได้มีการอ้างอิงจากลิ้งก์หน้าเว็บไซต์
      ปิด – CGI/Perl outside cgi-bin ไม่ให้สามารถทำงานได้ถ้าไม่ได้อยู่ภายใต้ในโฟลเดอร์เดียวกับที่กำหนด

      ถ้าสองส่วนนี้เปิดทำงาน ก็ยิ่งเปิดโอกาสให้ hacker ได้เห็นโครงสร้างไฟล์ของเรานะค่ะ
      และก็เล่นงานเว็บไซต์ของเราได้ง่ายขึ้นค่ะ

      เว็บไซต์ที่น่าสนใจที่พี่แนะนำให้อ่านคือ http://typo3.org/fileadmin/security-team/typo3_security_cookbook_v-0.5.pdf

      หวังว่าคงช่วยได้ในระดับนึงนะค่ะ ^^

      Reply
      • modv1 -  February 29, 2012 - 2:44 pm

        ขอบคุณมากเลยครับ กำลังนั่งอ่านเลยครับ อิอิ

        Reply
        • Kickstarter -  February 29, 2012 - 6:13 pm

          ถ้าไงก็อย่าลืมเอามาแชร์ด้วยนะค่ะ
          จะได้แบ่งปันสำหรับผู้ที่เริ่มต้นด้วยค่ะ ^^

          Reply
  3. modv1 -  March 1, 2012 - 2:20 pm

    ได้ละครับ

    ใช้ jQuery เอาครับ จะได้ไม่ต้องไปแก้ code ของเขา

    ประมาณนี้
    jQuery(‘.news-latest a’).attr(‘target’,’_blank’);

    ^^

    Reply
    • Kickstarter -  March 1, 2012 - 7:59 pm

      เยี่ยมเลยค่ะ
      เห็นหรือเปล่าว่าบางทีเราก็มองข้ามสิ่งเล็ก ๆ ที่เรียกว่า จาวาสคริป ไป 😉

      Reply
  4. modv1 -  March 8, 2012 - 8:49 am

    typo3 4.6 มันเปลี่ยน Form อ่ะครับ
    The new Form content element, available as a system extension, makes it easy to generate forms to be used as content elements

    แต่ในเว็บ typo3.org กลับหาวิธีใช้ไอ้ form ใหม่นี้ไม่ได้ T_T พอจะมีเว็บที่สอน form ใหม่นี้มั้ยครับ ลองแล้วงงเลย

    Reply
    • modv1 -  March 16, 2012 - 9:13 am

      มันมีคู่มืออยู่ใน
      typo3/sysext/form/Documentation/Manual/en/manual.sxw

      แต่รู้สึกว่าจะช่วยได้ไม่มาก

      Reply

Leave A Comment

Your email address will not be published. Required fields are marked (required):

Human answer! *

Related articles

Back to Top