الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

عنصر الخالق

مكتبة تساعد على إنشاء عناصر HTML تفاعلية (virtual 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 على Elementextened (أو الغلاف) الذي يغلف/يضيف وظائف تفاعلية مثل .find و .all إلى العنصر القياسي و ElementCreator الذي ينشئ عناصر HTML ثم يلتف ويعيد عنصر ElementExtened.

ElementCreator 

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

أين:

  • elementString عبارة عن سلسلة تحدد إنشاء معلمات العنصر بالنمط التالي:

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

(*) اختياري

حدود تقصير وصف مثال
elementType شعبة نوع العنصر أو نوع علامة العنصر p أو h1 . استخدم الافتراضي في حالة تركه فارغًا
معرف العنصر معرف العنصر #firstParagraph
elementClasses فئات العناصر .class__1 أو فئات متعددة .class__1.class_2
elementAtributes سمات العنصر [name=title] أو سمات متعددة [name=title,ref=titleRef]

  • الأطفال عبارة عن عقدة نصية أو عناصر html تبقى داخل العنصر.

  • خيارات نظام التشغيل التكوين الأخرى بما في ذلك:

    • على: إضافة مستمع الحدث
    • attrs: سمات العنصر
    • البيانات: بيانات العنصر

ElementExtending 

 // 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.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل