อยากใช้ Jump Break ทำเองซะเลย

posted on 12 Jan 2013 16:54 by verellie in Blogging directory Tech, Idea
วันนี้อัพบล็อกวิธีทำของเล่นอีกแล้วค่ะ (ของเล่นของดิฉันทำไมมันน่าเศร้าเยี่ยงนี้...)
คราวที่แล้วเขียนเกี่ยวกับการตกแต่ง header ด้วย CSS และ jQuery ไป 
ใครสนใจเชิญที่ลิงค์ด้านล่างค่ะ
 
 
 

วันนี้ไม่ได้มารีวิวหนังสือหรือหนังค่ะ! วันนี้เขียนฮาวทูนะ! ฮาวทู! >_< หลังจากเมื่อวานเปลี่ยนธีมใหม่และเขียนฟังก์ชั่นเล่น (เอ็งว่างมากนะ...เขียนโปรแกรมที่บ.อย่างเดียวไม่พอใช่มั้ย...) เห็นว่าทำง่ายดี วันนี้เลยมาเขียนฮาวทูแบ่งปันค่ะ ใครยังไม่เห...

02 Jan 2013 11:32
 
 
คราวนี้เราเปลี่ยนจากรูปภาพ มาลองเล่นกับ Contents ดูบ้าง 
เนื่องจากเมื่อหลายเดือนที่ผ่านมาได้ไปลองใช้ Blog.com กับ Blogger ค่ะ
(รวมถึง Livejournal ที่ใช้มานานแล้ว) บล็อกเหล่านี้จะมีลูกเล่นอันหนึ่งที่เรียกว่า Jump Breaker
 
ถามว่า Jump Breaker คืออะไร?
ถ้าบอกว่ามันคือฟังก์ชั่น "Read More >>" อาจจะคุ้นหูคุ้นตากันมากกว่า
มันคือฟังก์ชั่นที่อนุญาตให้บล็อกเกอร์ย่อคอนเทนต์ของบล็อกในหน้า Home
จากที่ยาวปรื้ดๆ รกตา เป็นสั้นๆ แล้วมีลิงค์ Read More ให้กดอ่านข้อความที่เหลือนั่นเอง
ตามภาพค่ะ วันนี้เรามาทำอะไรคล้ายๆ แบบนี้ใส่ในบล็อกเรากัน!
จะได้โชว์บทความบนหน้าแรกได้ๆ บทความโดยไม่ต้องกลัวว่าจะยาวเฟื้อย
 
  
 
 
 
 
เนื่องจาก Exteen กำลังทำระบบใหม่ ที่เรียกว่า Exteen Beta ซึ่งจะแตกต่างจากตัวเก่านิดหน่อย
ใครเป็น Tester อยู่ตอนนี้สามารถเลื่อนลงไปดูวิธีทำ Jump Break สำหรับ new editor 
ที่อยู่ด้านล่างได้ค่ะ เพราะเราจะอธิบายโค้ดของ exteen แบบเก่าก่อน
โค้ดไม่เหมือนแต่ผลลัพธ์เหมือนกันค่ะ
(เราก็ใช้ตัวเบต้าอยู่เหมือนกันค่ะ) 
 
 
นี่เป็นตัวอย่าง Jump Break บนเอ็กซ์ทีนค่ะ
 
มีข้อแม้อย่างนึงคือ เอนทรี่ที่จะใช้งาน Jump Breaker
"ต้อง Allow Comment นะคะ" 
 
 
 
 
 
อันดับแรก เรามาทำความเข้าใจองค์ประกอบของแต่ละเอนทรี่กัน
ในเอนทรี่หนึ่งๆ นั้น จะมี title, post, info etc. เป็นส่วนประกอบ
ครั้งนี้เราจะใช้แค่ title กับ post ค่ะ
title คือชื่อบทความที่เป็นลิงค์ post คือข้อความที่เราเขียนลงในเอนทรี่นั้นๆ
สมมติว่าเราอยากโชว์บทความในหน้าแรกสักสามบทความต่อหนึ่งหน้า แต่มันยาวเกิน
เราก็เลือกส่วนที่จะโชว์ แล้วที่เหลือยัดใส่ Jump Break ไปค่ะ
 
 
 
วิธีการ เอาแบบไม่อ้อมค้อม... ตามภาพเลยค่ะ ยัดใส่ div แล้ว hide ไปซะ...
ขอย้ำก่อนว่า ข้อความของเราที่เซฟในเดตาเบสของ Exteen ไม่ได้โดนลบนะคะ ไม่ต้องกังวล
 
 
 
 
 
ก่อนอื่นก็เขียนบล็อกขึ้นมา พอเสร็จแล้วก็เปิดหน้า HTML ค่ะ
(คิดว่าทุกคนคงทราบว่าสามารถดู HTML ของบทความได้อย่างไรนะคะ)
จากนั้นก็ควานหาข้อความส่วนที่เราไม่อยากโชว์ในหน้าแรก
 
แล้วใส่ <*div id = 'afterjumpbreak'> ครอบลงไปค่ะ
แบบนี้ <*div id = 'afterjumpbreak'>ข้อความยาวๆ ที่จะซ่อน</*div>
(เวลาใช้จริง เอา * ออกนะคะ) 
เสร็จแล้วก็เซฟบทความเลย publish เลยก็ได้ แต่จะยังเห็นเป็นบทความยาวๆ เต็มหน้าอยู่
 
 
จากนั้นก็ถึงเวลาของ script ที่จะจัดการสร้าง jumpbreak ให้เราค่ะ
ให้ก็อปปี้โค้ดด้านล่างโดยลบ * ออกแล้วเอาไปใส่ใน widget  > customcode อันไหนก็ได้
ก็อปลิงค์ไปใช้ตามสบายเลยค่ะ อันนี้เป็นโค้ดที่เราอัพใส่ Google Code ไว้เอง
 

<*script src='http://exteen-jquery-for-fun.googlecode.com/files/jquery.exteen.jumpbreak.js' type="text/javascript">
</*script>

 
 
 
จากนั้นก็ refresh หน้า home ของบล็อกอีกครั้ง จะเห็นว่าบทความถูกย่อ
และมีลิงค์ ( ..Read After the Jump.. ) ต่อท้าย
พอคลิกที่ลิงค์ก็จะไปยังหน้าเต็มของบทความ >_<// 
 
 
 
แถม!! เราสามารถกำหนดคำที่จะใช้เป็น Jump Breaker ได้ด้วยตัวเองค่ะ!
ตามรูปด้านล่าง จะเห็นว่าเป็นคำอื่น ไม่ใช่ ( ..Read After the Jump.. )
เปลี่ยนได้ด้วยการกำหนดค่า data-breaker
 
 
 
 ตามนี้ค่ะ!! แน่นอนว่าใช้ภาษาไทยหรือภาษาดาวไหนก็ได้ค่ะ!
<*div id="afterthejump" data-breaker="Find out whom JC met!!"> 
 
 
 
 
 
ต่อไปเป็นเวลาของโค้ด!! สำหรับคนที่สนใจหรืออยากลองเขียนบ้าง กด view ดูโค้ดได้เลย
ใครไม่สนก็ข้ามไป~
 
 
=============jquery.exteen.hideshow.withdocready.js==============

jQuery.fn.jumpbreak = function(settings) {
     var config = {
          jumpText : "Read After the Jump", //default jumpText
     };

     if (settings) {
          $.extend(config, settings); //กำหนดค่า jumpText แต่จริงๆ ไม่ได้ใช้...
     }
     return this.each(function() {
          var = $(this); //get  Post object

 

          if (.find('#afterthejump').length == 1 && .parents().find('#commentform').length==0){

                //ถ้าในPostนั้นๆ มี div id = afterthejump และ

                //ในหน้านั้นไม่มีกล่องคอมเม้นต์แสดงว่าเป็นหน้า home 

                //(ต้องมีครบสองเงื่อนไขจึงจะผ่านไปขั้นถัดไป!! ไม่งั้นสคริปต์ไม่ทำงานค่ะ)

                if(.parents().find('.title').find('h2').find('a').length>=1){

                //ต้องมี Title และมี URL สำหรับเปลี่ยนไปยังหน้าบทความตัวเต็ม ซึ่งก็มีแน่อยู่แล้ว

                //Get jumpText ที่ผู้ใช้เซตไว้ใน data-breaker ถ้าไม่มีใช้ default
                       if(.find('#afterthejump').attr('data-breaker'))
                       {
                             var userJumpText = .find('#afterthejump').attr('data-breaker');
                             .find('#afterthejump').attr('data-breaker', '');
                              config.jumpText = userJumpText;
                        }
                        //Get Link จาก Title แฮ้บมาดื้อๆ เลยยย
                         var link = .parents().find('.title').find('h2').find('a').attr('href');

                          var content = .html(); //แปะ JumpBreak และลิงค์ลงไปท้ายบทความ
                          content = content + '<br /><div id = "jumpbreak">( ..<a href="'+link+'">' + config.jumpText + '</a>.. )</div>'; 
                          .html(content);
                          .find("#afterthejump").hide(); //Hide ข้อความที่เอา afterjumptextครอบไว้
                    }
         }
     });
};


$(document).ready(function() {
      $(".post").jumpbreak();//ส่วนนี้จะสั่งให้สคริปต์ทำงานเมื่อโหลดบล็อกขึ้นมาค่ะ
});

=================================================

 

 

 
 
 
 
 
ต่อไปเป็นโค้ดสำหรับ Exteen โฉมใหม่ค่ะ 
ถ้าใครเคยใช้จะเห็นว่ามันหน้า editor จะแบ่งเป็นบล็อกๆ ตามภาพด้านล่าง
ข้อแตกต่างก็ตามลายมือโย้เย้ด้านล่างเลยค่ะ
 
 
 
 
 
จากของเก่าที่เป็น [post]บทความ[/post] ของใหม่จะมีลักษณะเป็น
[post]
[item]
[div block1][/div]
[div block2][/div]
[div block3][/div]
[/item]
[/post]
 
เราจึงไม่สามารถเอา [div afterthejump] ไปครอบทุก div ที่อยากซ่อนได้...//ร้องไห้...
เลยต้องเปลี่ยนวิธีค่ะ 
 
 
จากที่เอา div ไปครอบแล้วซ่อน
คราวนี้เราใช้ hidden field เป็น Jump Breaker
แล้วซ่อนบล็อกที่อยู่ต่ำกว่า Jump Breaker ทุกบล็อกค่ะ
 
 
 
 
 ก่อนอื่นก็เขียนบทความขึ้นมา!! หลายๆ ช่องเลย!! แล้วกดปุ่มมุมบนขวา เปลี่ยนเป็น HTML
 
 
 
จากนั้นก็อปโค้ดข้างล่างไปวางในช่องที่เราอยากจะซ่อนไว้ใต้ Jump Breaker ค่ะ
 
<*input id="JumpBreaker" type="hidden" value="Read Below the Jump">
 
ไม่ต้องใส่ครบทุกช่องนะคะ ใส่แค่ช่องที่เราจะซ่อนเป็นช่องแรก
สคริปต์จะซ่อนทุกช่องตั้งแต่ช่องที่เราใส่โค้ดเข้าไปค่ะ
เช่นเคย! เราสามารถกำหนดคำที่จะใช้เป็น Line Breaker ได้เองด้วยการกำหนดค่า Value ค่ะ
 
 
 
 
แล้วก็ Publish จากนั้นก็ถึงเวลาของ jQuery อีกเช่นเคย
นำโค้ดด้านล่างนี้ไปใส่ใน widget > custom code อันไหนก็ได้ค่ะ 
 
<*script type='text/javascript' src='http://exteen-jquery-for-fun.googlecode.com/files/jquery.newexteen.jumpbreak.js'></script>
 
เมื่อ Refresh หน้า Home ดูจะเห็นว่ามี Jump Breaker แล้ว
 
 
 
ใครใคร่ดูคำอธิบายโค้ด กด View ดูด้านล่างได้เลยค่ะ
จะอธิบายเฉพาะตรงที่ต่างกับอันเมื่อกี๊นะ
 
 
 
===========jquery.newexteen.hideshow.withdocready.js============

jQuery.fn.jumpbreak = function(settings) {
     var config = {
          jumpText : "Read After the Jump",
     };

     if (settings) {
          $.extend(config, settings);
     }

     return this.each(function() {
          var = $(this);
          if (.find('.item').find('div').find('#JumpBreaker').length == 1 && .parents().find('#commentform').length==0){

                //ถ้าใน post นั้นมี hidden field และ ไม่มี comment form (แสดงว่าเป็น home)


                if(.parents().find('.title').find('h2').find('a').length>=1){

                     //ถ้ามี Title เอาลิงค์จาก Title และเอา user custom jumpText จาก Hidden Value
                     //Get jumpText
                     if(.find('.item').find('div').find('#JumpBreaker').val())
                     {
                          var userJumpText = .find('.item').find('div').find('#JumpBreaker').val();
                          config.jumpText = userJumpText;
                     }
                    //Get Link
                    var link = .parents().find('.title').find('h2').find('a').attr('href');


                   //Hide Div
                   var hideAllBelowFlag = 0; //hidden flag, 1 = hide, 0= otherwise
                   .find('.item').find('div').each(function() {

                        //เราจะดึงเอาแต่ละบล็อกใน post ออกมา แล้วดูว่าบล็อกไหนที่เราจะเริ่มซ่อน
                        var = $(this);
                        var childcontent = .html();
                        if(.find('#JumpBreaker').length > 0 || hideAllBelowFlag==1)
                        {

                              //ถ้าในบล็อกนั้นมี hidden code ที่เราใส่ไป เราจะเริ่มซ่อนจากบล็อกนี้

                              //แล้วเปลี่ยน hideAllBelowFlag เป็น 1 เพื่อบอกว่า บล็อกถัดไปจะถูกซ่อนด้วย

                              //ถ้าบล็อกก่อนหน้านี้โดนซ่อนไป (Flag=1) บล็อกนี้ก็ต้องโดนซ่อนด้วย


                              hideAllBelowFlag=1;
                              .hide();
                         }
                   });

                   //เช่นเคย นำลิงค์ Read More ไปแปะท้าย post ค่ะ
                   var content = .html();
                    content = content + '<br /><div id = "jumpbreak">( ..<a href="'+link+'">' + config.jumpText + '</a>.. )</div>';
                    .html(content);
              }

          }

      });
};

$(document).ready(function() {
$(".post").jumpbreak();
});

===============================================

 
 
 
โฮก เหนื่อยมาก
โค้ดมีบั๊กรึเปล่าก็ไม่รู้ กร๊าก
เอาเป็นว่าเก็บไปเป็นไอเดีย ลองเขียนโค้ดดูนะคะ : )
 
วันนี้ขอลาไปก่อนแล้ว~
 
 

Comment

Comment:

Tweet

ครับผม นึกว่าจะไม่ตอบซะแล้ว open-mounthed smile
ถ้าเป็นเรื่อง div นี่ผมค่อยข้างแม่นครับ คิดว่าไม่น่าพลาดเรื่องนี้ แต่ยังไงก็ตาม ตอนนี้ผมกลับไปแก้เอนทรีที่ทำสำหรับ Exteen เวอร์ชันเก่าเป็นใหม่หมดแล้วล่ะครับ แล้วก็ใช้ Code สำหรับ New Exteen เลย ก็เลยไม่มีปัญหาแล้วละครับ ขอบคุณสำหรับ Code ครับ บล็อกดูดีขึ้นจมเลย confused smile
 
//แต่ผมสังเกตอย่างนึง ถ้ามี Script ตัวอื่นในบล็อกอยู่แล้วหลายอัน ต้องเอา Script JumpBreak ไว้เป็นตัวสุดท้าย ไม่งั้นมันไม่ทำงานซะงั้นอะครับ แปลกดี sad smile

#6 By BoatKung on 2013-03-09 21:47

@boatkung20 ไอ้หยา ไม่ได้เข้าบล็อกเลย
มาตอบช้า T w T
บางทีโค้ดใช้ไม่ได้อาจจะเพราะระดับ div ผิดค่ะ เวลาเราเขียนเอนทรี่ เอ็กทีนจะจับเข้า div ให้หยุบหยับ พอเราก็อปๆ แก้ๆ เขียนๆ อาจจะมี div ไหนหายไป ทำให้โครงสร้างบล็อกเปลี่ยน แล้วโค้ดทำงานไม่ได้ค่ะ ถ้าไม่ได้ผลคงต้องเปิดหน้า html เช็กค่ะ มีอะไรถามอีกเมนชั่นทางทวีตได้นะคะ จะตอบไวกว่า ขอโทษด้วยค่า

#5 By persona non grata on 2013-03-09 15:42

ผมแวะมาถาม Jquery สองตัวนี้ ดูเหมือนจะใช้พร้อมกันไม่ได้รึเปล่าครับ sad smile พอแปะพร้อมกันสองตัวเลยไม่แสดงผลเลย หรือผมพลาดตรงไหนหว่า

#4 By BoatKung on 2013-02-24 02:14

จะลองใช้นะคะ ขอบคุณค่ะ
เราเป็นพวกด้านชากับเทคโนโลยีค่ะ ต้องอาศัยบล้อกแนะนำแบบนี้ช่วย
Hot! Hot!
น่าสนใจมากอะ แบบนี้ต้องเก็บไปทำบ้าง อยากทำแบบนี้นานแล้ว confused smile Hot!

#2 By BoatKung on 2013-01-25 15:10

ชอบมากวิชามาร ที่ทำให้ blog ดูเป็นเทพได้
big smile big smile big smile Hot! Hot! Hot! Hot! Hot!
น้าเคท

#1 By Siamese Kate on 2013-01-12 22:13