การสร้าง extension ปุ่ม bbcode เป้น pop-up เพื่อกรอกลิ้งค์ แบบง่ายๆ

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

การสร้าง extension ปุ่ม bbcode เป้น pop-up เพื่อกรอกลิ้งค์ แบบง่ายๆ

โพสต์ที่ยังไม่ได้อ่าน โดย Ittichai_chupol »

--หลายๆคนคงเคยเห็นการที่กดปุ่มแล้ว มาหน้าต่าง popup แสดงขึ้นขึ้นแล้วให้เรากรอกข้อมูล เข้าไปเพื่อที่จะส่งค่าไปยังหน้าที่เราต้องการ ได้ ซึ่งการจะเขียนโคดเพื่อสร้าง pop-up แบบนั้นก็คงไม่ใช่ปัญหาที่ยากมากสำหรับใครบางคน แต่กว่า ถ้าการสร้าง pop-up นั้นจะเป็นการสร้างขึ้นมาเพื่อที่จะแทรกเข้าไปในโปรแกรมหรือระบบ ที่เราได้สร้างไว้ก่อนหน้าแล้วนั้น บางทีเราต้องคำนึกถึง Template ที่เราใช้อยู่เดิมด้วย(ในกรณีที่เราไม่ได้สร้าง Template เอง) เพราะว่าในบางกรณีนั้น popup ที่เรานำมาแทรก จะมี
Template หรือ javascript เฉพาะของมันอยู่ด้วย ซึ่งอาจจะทำให้เกิดการซับซ้อนกับ Template หรือ javascript ที่เราใช้อยู่ก็ได้

--การสร้าง Extension ใน phpbb คือการที่เราจะเพื่อส่วนขยาย (ส่วนที่เพิ่มความสามารถในกับ phpbb ) เป้นการที่เราจะเขียนโคดการทำงานที่ไม่มีใน phpbb ให้มีขึ้นมา
หรือ สร้างเสรืิมส่วนเดิมให้ทำงานที่ดีขึ้น

-- ซึ่งวันนี้เราจะมาสร้างส่วนขยายนี้ นั้นคือการที่เราจะสร้าง Extension เป็น ปุ่ม pop-up เพื่ที่จะบันทึก ลิ้งค์ แล้วส่งลงที่หน้าบอร์ดกระทู้ กัน

ขั้นตอนการทำงาน

1.เราจะต้องรู้การสร้าง Extension กันก่อน

2.จากนั้นเราจต้อทราบก่อนว่า ส่ววนที่เราจะสร้างนี้ เราจะสร้างเป็นแบบไหน ระหว่าง event หรือ controler
** event คือการเขียนเพื่อจากส่วนที่มีอยู่
** controler คือการเขียนเพื่อสร้าง ส่วนการทำงานใหม่
++ ในนนี้เราจะสร้างเป็นแบบ event ครับ

3. เมื่อเรารู้วิธีการที่สร้างแล้ว คราวนี้จะต้องมาเลือกว่า เราจะใช้ event ไหนเพื่อให้เเสดง ณ ตำแหน่งที่ต้องการ
**ตำแหน่งที่เราต้องการนั้นก็คือ
n2.png

** ซึ่ง event ที่ใช้ตำแหน่งนี้คือ
core.display_custom_bbcodes_modify_sql
4. จากนั้นเราจะสร้าง ส่วนของ listenner
5. เมื่อเรามีส่วน listenner แล้ว ให้เราเข้าใน สร้าง function ตามนี้

โค้ด: เลือกทั้งหมด

  'core.display_custom_bbcodes_modify_sql' => 'custom_bbcode_modify_sql' 


6. ไปที่สร้างไฟล์ชื่อ ---ชื่อ extension--posting_buttons.html ที่โฟลเดอร์ style -> all -> template

7.จากนั้นเขียนโคดแสดงปุ่ม ปรัมาณนี้

โค้ด: เลือกทั้งหมด


<button type="button" class="button button-icon-only bbcode-img" accesskey="p" name="addbbcode14" value="Img"

 onclick="mpopimg()" //ชื่อฟังชั่น
 title="{L_BBCODE_P_HELP}">
<i class="icon fa-image fa-fw" aria-hidden="true"></i>

</button>


8. จากนั้นเราก็มาสร้างส่นของ javaScript เพื่อเป็นส่วนของ pop-up

โค้ด: เลือกทั้งหมด


   function mpopup(){
   jQuery.MessageBox({
    buttonDone  : "OK",
    message     : "input URL Youtube",
    input       : true,
    speed       : 1000
}).done(function(data){
    if (jQuery.trim(data)) {
        mbbfontstyle('[youtube]', '[/youtube]', data) ;
        }
});
    }

9.ตัวอย่างโคดที่ส่งข้อมูล ลงมาที่ หน้ากระดาษ กระทู้

โค้ด: เลือกทั้งหมด


function mbbfontstyle(bbopen, bbclose, data) {
	theSelection = false;
	var textarea = document.forms[form_name].elements[text_name];
	textarea.focus();
	var caret_pos = getCaretPosition(textarea).start;
	var new_pos = caret_pos + bbopen.length;
	insert_text(bbopen + data + bbclose);
	if (!isNaN(textarea.selectionStart)) {
		textarea.selectionStart = new_pos;
		textarea.selectionEnd = new_pos;
	}
	// IE
	else if (document.selection) {
		var range = textarea.createTextRange(); 
		range.move("character", new_pos); 
		range.select();
		storeCaret(textarea);
	}
              textarea.focus();
}

</script>


หลัการทำงานก็มีประมาณนี้ครับ
ขอให้วันนี้เป็นวันที่ดี
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 74