หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ผู้สร้างองค์ประกอบ

ไลบรารี่ที่ช่วยในการสร้างองค์ประกอบ HTML แบบโต้ตอบ (dom เสมือน) ได้อย่างง่ายดาย แรงบันดาลใจจากกรอบ MithrilJs

  • การติดตั้ง
  • ตัวอย่าง
  • เอกสารประกอบ

การติดตั้ง

element-creator พร้อมใช้งานบน NPM และเป็นไลบรารี Javascript

ติดตั้งบน NPM 

 npm install element-creator

หรือรวมไว้ในไฟล์ html บน unpkg 

 < script  type =" text/javascript " src =" https://unpkg.com/[email protected]/build/element-creator.min.js " > </ script >

ตัวอย่าง:

ตัวอย่างเนื้อหาหนึ่งหน้าอยู่ที่ build/index.html หรือตัวอย่างด่วนด้านล่างนี้ 

 // using node with es6, otherwise var e = require('element-creator');
import e from 'element-creator' ;

var myDiv = e ( 'div#myElement.class__1[name=awesome-div]' , 'My awesome div' , {
    on : { 'click' : function ( e ) {
        alert ( 'You have clicked on My awesome div' ) ;
    } }
} )

ตัวแปร myDiv ด้านบนสร้างองค์ประกอบ div html พร้อมด้วยเหตุการณ์ click ที่รองรับข้อความแจ้งเตือน 

 < div id =" myElement " class =" class__1 " name =" awesome-div " > My awesome div </ div >

เอกสารประกอบ

element-creator ประกอบด้วย Elementextensed (หรือ wrapper) ซึ่งตัด/เพิ่มฟังก์ชันเชิงโต้ตอบ เช่น .find , .all ไปยังองค์ประกอบมาตรฐาน และ ElementCreator ซึ่งสร้างองค์ประกอบ HTML จากนั้นตัดและส่งคืนองค์ประกอบ ElementExtensed

ElementCreator 

 // vdom return new element
var vdom = e ( elementString , children , options )

ที่ไหน:

  • elementString เป็นสตริงที่ระบุการสร้างพารามิเตอร์องค์ประกอบด้วยรูปแบบต่อไปนี้:

{elementType}{(*)elementId}{(*)elementClasses}{(*)elementAttributes}

(*) เป็นทางเลือก

พารามิเตอร์ ค่าเริ่มต้น คำอธิบาย ตัวอย่าง
องค์ประกอบประเภท กอง ประเภทขององค์ประกอบหรือประเภทแท็กขององค์ประกอบ p หรือ h1 . ใช้กรณีเริ่มต้นที่เว้นว่างไว้
รหัสองค์ประกอบ รหัสองค์ประกอบ #firstParagraph
องค์ประกอบคลาส คลาสองค์ประกอบ .class__1 หรือหลายคลาส .class__1.class_2
คุณสมบัติองค์ประกอบ คุณลักษณะองค์ประกอบ [name=title] หรือแอตทริบิวต์หลายรายการ [name=title,ref=titleRef]

  • ลูก คือโหนดข้อความหรือองค์ประกอบ html ที่อยู่ภายในองค์ประกอบ

  • ตัวเลือก os การกำหนดค่าอื่น ๆ ได้แก่ :

    • เปิด: เพิ่มผู้ฟังเหตุการณ์
    • attrs: คุณลักษณะขององค์ประกอบ
    • ข้อมูล: ข้อมูลขององค์ประกอบ

องค์ประกอบขยาย 

 // wrappedElement return a html element within the html body with more interactive functions
var wrappedElement = e . wrap ( querySelector , isMultiple )

ที่ไหน:

  • querySelector เป็นสตริงตัวเลือกแบบสอบถามมาตรฐาน เช่น h1 จะค้นหาส่วนหัว h1 , .class__1 จะค้นหาองค์ประกอบใดๆ ที่มีคลาส .class__1
  • isMultiple เป็น false โดยค่าเริ่มต้น หากตั้งค่าเป็น true ก็จะส่งคืนอาร์เรย์ขององค์ประกอบที่ตรงกับ querySelector
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด