pan old
1.0.0
Pan.js (أو P.JS ) هو ضوء (<40ko) وإطار JS البسيط الذي تم إجراؤه لمساعدتك على تطوير تطبيقات الويب منظمة بشكل جيد بسرعة.
يمكنك تنظيم تطبيق الويب الخاص بك في مكونات وأدوات . يأتي مع بعض الأشياء المفيدة المفيدة. ببساطة تضمين ملفات JS في HTML الخاص بك والبدء في استخدامه. P.JS لا يزال قيد التطوير ، لا تتردد إذا كان لديك أي نصيحة.
جدول المحتويات
P.JS ليس لديه أي تبعيات (لا ، لا تحتاج إلى jQuery). إنه متوافق مع جميع المتصفحات الحديثة وصولاً إلى IE8.
اعتمادًا على المتصفحات والفئات التي تستخدمها ، قد تحتاج إلى تعددات مضمنة في مجلد SRC/Polyfills.
يتضمن البناء الافتراضي جميع عمليات التعليقات المطلوبة ولكن يمكنك استخدام إصدار no-compatibility .
هناك طريقتان لاستخدام P.JS.
يمكنك استخدامها كمكتبة بسيطة عن طريق إنشاء الأدوات أو يمكنك استخدامها كإطار عن طريق توسيع P.JS لإنشاء الأدوات والمكونات الخاصة بك.
< script src =" ../../builds/pan-0.3.min.js " > </ script > var viewport = new P . Tools . Viewport ( ) ;
viewport . on ( 'resize' , function ( width , height )
{
console . log ( width , height ) ;
} ) ; قم بإنشاء الأدوات والمكونات الخاصة بك بناءً على فصول P.JS. يمكنك وضع مكوناتك داخل كائن P.Components أو يمكنك إنشاء مساحة الاسم الخاصة بك مثل Foo.Bar.My_Class .
يعتمد الميراث على رمز John Resig مع بعض التحسينات مثل دمج الممتلكات العميقة ، و Singleton ، وخيارات Defualt ، إلخ.
تم تطوير P.JS في وضع صارم. افعل كما تفعل ولا تتردد في مشاركة الأدوات والمكونات المخصصة.
< script src =" ../../builds/pan-0.3.min.js " > </ script > // Create a class wrapping the all application
P . Components . My_App = P . Core . Abstract . extend (
{
construct : function ( )
{
// Instantiate a sidebar and header
this . sidebar = new P . Components . My_Sidebar ( { color : 'blue' } ) ;
this . header = new P . Components . My_Header ( ) ;
}
} ) ;
// Create a class for the sidebar
P . Components . My_Sidebar = P . Core . Abstract . extend (
{
// Default options
options :
{
colors : 'red'
} ,
construct : function ( options )
{
this . _super ( options ) ;
this . main = document . querySelector ( 'aside' ) ;
console . log ( 'Init Sidebar' ) ;
}
} ) ;
// Create a class for the header
P . Components . My_Header = P . Core . Abstract . extend (
{
construct : function ( )
{
this . main = document . querySelector ( 'header' ) ;
console . log ( 'Init Header' ) ;
}
} ) ; // Let's rock
var my_app = new P . Components . My_App ( ) ; الفصول الأساسية هي أسس P.JS.
ترث كل أداة أو مكون من إحدى هذه الفئات وينبغي أن تكون الفصول المخصصة الخاصة بك أيضًا.
P.Core.Abstract هي الفئة الافتراضية.
construct عند إنشاء مثيل لهاstatic الفصل كفرد. هذا يعني أن المؤسسة الأولى مع new سوف تعمل بشكل طبيعي ولكن كل المؤسسة التالية مع new سيعود الأول.options هي كائن سيتم دمجه مع الخيارات عند إنشاء مثيلregister داخل خاصية options تلقائيًا إلى أداة التسجيل مع قيمة register كمفتاح_super( parameters ) داخل الطريقة بالطريقة المتجددة للأصل // Inherit from Abstract
P . Components . Custom_Class = P . Core . Abstract . extend (
{
construct : function ( )
{
console . log ( 'Welcome to my custom class' ) ;
}
} ) ;
var custom_class = new P . Components . Custom_Class ( ) ; P . Components . Custom_Class = P . Core . Abstract . extend (
{
// Options with random deep properties
options :
{
test :
{
foo : 'bar' ,
lorem : 'ipsum'
}
} ,
// Add options argument
construct : function ( options )
{
// Pass options to _super
this . _super ( options ) ;
console . log ( 'Options' , this . options ) ;
}
} ) ;
// Instantiate by passing different options
var custom_class = new P . Components . Custom_Class ( {
test :
{
lorem : 'dolores'
}
} ) ; // Currently, static functionnality is only used for tools
// It's just a matter of organization, do whatever you want.
P . Tools . Custom_Class = P . Core . Event_Emitter . extend (
{
// Chose a name never used
static : 'custom_tool' ,
construct : function ( )
{
// Don't forget the _super
this . _super ( ) ;
console . log ( 'Init' ) ;
}
} ) ;
// 'custom_class' and 'custom_class_again' will share the same instance
// 'construct' will be called only the first time
var custom_class = new P . Tools . Custom_Class ( ) ,
custom_class_again = new P . Tools . Custom_Class ( ) ; // Create any class you'd like
P . Components . Test_Class = P . Core . Abstract . extend ( { } ) ;
// Instantiate and specify the register property in options object
// The value is the key you want to retrieve the instance later
var test_class = new P . Components . Test_Class ( { register : 'my_key' } ) ;
// Instantiate the registry tools and get the test_class using the register key
var registry = new P . Tools . Registry ( ) ,
test_class_2 = registry . get ( 'my_key' ) ; P.Core.Event_Emitter يمتد P.Core.Abstract مع طرق الحدث الإضافية.
on ، off و triggerevent-name == eventname == event_name ) // Create a custom component that extends Event_Emitter
P . Components . Custom_Component = P . Core . Event_Emitter . extend (
{
construct : function ( )
{
this . _super ( ) ;
// Save context
var that = this ;
// Interval every seconds
window . setInterval ( function ( )
{
// Trigger event and pass parameters
that . trigger ( 'event-test' , [ 'test-1' ] ) ;
} , 1000 ) ;
}
} ) ;
var custom_component = new P . Components . Custom_Component ( ) ;
// Listen to 'event-text'
custom_component . on ( 'event-test' , function ( value )
{
// Will log 'text-1' every second
console . log ( value ) ;
} ) ; // Create a custom component that extends Event_Emitter
P . Components . Custom_Component = P . Core . Event_Emitter . extend (
{
construct : function ( )
{
this . _super ( ) ;
// Save context
var that = this ;
// Wait a second
window . setTimeout ( function ( )
{
// Trigger some events
that . trigger ( 'event-1' , [ 'test-1' ] ) ;
that . trigger ( 'event-2' , [ 'test-2' ] ) ;
that . trigger ( 'event-3' , [ 'test-3' ] ) ;
that . trigger ( 'event-4' , [ 'test-4' ] ) ;
} ) ;
}
} ) ;
// Try to instantiate twice but get a common object each time
var custom_component = new P . Components . Custom_Component ( ) ;
// Listen two events
custom_component . on ( 'event-1 event-2' , function ( value )
{
console . log ( value ) ;
} ) ;
// Stop listening to 'event-1' event
custom_component . off ( 'event-1' ) ;
// Listen to event with namespace
custom_component . on ( 'event-2.foo event-3.bar event-4.bar' , function ( value )
{
console . log ( value ) ;
} ) ;
// Stop listening on 'event-2' with 'foo' namespace
custom_component . off ( 'event-2.foo' ) ;
// Stop listening on every events with 'bar' namespace
custom_component . off ( '.bar' ) ;P.JS يأتي مع بعض الأدوات الممتازة. كل واحد هو singleton (ثابت). يمكنك إنشاء مثيل له عدة مرات ، ستحصل دائمًا على المقدمة الأولى.
يمكنك تمديد هذه الأدوات إذا كنت تريد.
يعمل Breakpoints إلى حد ما مثل العرض والارتفاع للاستعلامات على وسائل الإعلام. حدد بعض نقاط التوقف وسيؤدي إلى تشغيل الأحداث عند تغيير حجم عرض Viewport.
انظر الكود
انظر المثال
خيارات
{
breakpoints : [ // Breakpoints
{
name : 'large' ,
width :
{
value : 960 ,
extreme : 'min' ,
included : false
}
} ,
{
name : 'medium' ,
width :
{
value : 960 ,
extreme : 'max' ,
included : true
}
} ,
{
name : 'small' ,
width :
{
value : 500 ,
extreme : 'max' ,
included : true
} ,
height :
{
value : 500 ,
extreme : 'max' ,
included : true
}
}
]
}ملكيات
طُرق
breakpoints (كائن | صفيف) إضافة واحدة هي نقاط توقف متعددةsilent (اختياري ، منطقي ، افتراضي: صحيح)breakpoints (سلسلة | صفيف) إزالة واحدة هي نقاط توقف متعددة بالاسمsilent (اختياري ، منطقي ، افتراضي: خطأ)breakpoint (سلسلة) إذا كانت نقطة الإيقاف نشطة بشكل منحنيcondition (سلسلة) انتقل إلى Matchmedia الكلاسيكي ولكن فقط أعد منطقيةالأحداث
breakpoints (صفيف) نقاط توقف نشطة حاليًا تساعدك على تحويل السلاسل إلى ألوان مكونة جيدًا.
إنشاء أقواس قزح جميلة. ؟
انظر الكود
انظر المثال
خيارات
{
gradients :
{
parse : true , // Automatically parse, looking for text to convert to gradient
target : document . body , // Default target when parsing
classes :
{
to_convert : 'gradient-text' , // Searched class
converted : 'gradient-text-converted' // Converted class
}
}
}ملكيات
طُرق
input كائن RGB (سلسلة) يشبه اللون (#ff0000 ،#f00 ، red ، {r: 1 ، g: 0 ، b: 1} ، {h: 1 ، s: 1 ، l: 0.5})target (اختياري ، عنصر dom ، الافتراضي: document.body)selector (سلسلة ، افتراضية: "للاتصال")start (أي)end (و)count (العدد)format (اختياري ، سلسلة ، القيم: 'rgb' | 'hsl' ، الافتراضي: 'hsl' )input (كائن) كائن RGBinput (كائن) كائن HSLالأحداث
لا أحد
قم بتطبيق CSS على العنصر المستهدف وإضافة البادئات تلقائيًا. سيتم تلقائيا خاصية.
انظر الكود
انظر المثال
خيارات
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}ملكيات
لا أحد
طُرق
target (عنصر DOM | jQuery) تم استرداده مع الإحضار الكلاسيكي مثل QuerySelector أو jQueryvalues (الكائن) القيمة للتطبيقprefixes (اختيارية ، منطقية | صفيف) صحيح للبادئات الافتراضية أو صفيف البادئاتالأحداث
لا أحد
تقديم معلومات مثل المحرك والمتصفح والنظام والميزات.
انظر الكود
انظر المثال
خيارات
{
targets : [ 'html' ] // Add detected informations to targets in array (selector or DOM Elements)
}ملكيات
ie (رقم)gecko (رقم)webkit (رقم)khtml (رقم)opera (رقم)version (الرقم)ie (رقم)firefox (رقم)safari (رقم)konq (رقم)opera (رقم)chrome (رقم)version (الرقم)windows (منطقية)mac (منطقية)osx (منطقية)iphone (منطقية)ipod (منطقية)ipad (منطقية)ios (منطقية)blackberry (منطقية)android (منطقية)opera_mini (منطقية)windows_mobile (منطقية)wii (منطقية)ps (منطقية)touch (منطقية)media_query (منطقية)طُرق
لا أحد
الأحداث
لا أحد
إرسال معلومات إلى Google Analytics باستخدام المثيل الحالي. يجب عليك إنشاء مثيل لـ Google Analytics بنفسك.
انظر الكود
انظر المثال
خيارات
{
send : true , // Should send informations
parse : true , // Automatically parse
true_link_duration : 300 , // Wait duration before following the link (enough time to be sure that informations have been well stend)
target : document . body , // Default target when parsing
classes :
{
to_tag : 'tag' , // Search class
tagged : 'tagged' // Tagged class
} ,
logs :
{
warnings : false , // Log warning
send : false // Log sent informations
}
}ملكيات
لا أحد
طُرق
target (اختياري ، عنصر dom ، الافتراضي: document.body)selector (سلسلة ، افتراضية: "للاتصال")datas (كائن)category (أي)action (أي)label (اختياري ، أي)value (اختياري ، أي)unique (اختيارية ، السلسلة) البيانات أكثر من مرة (اعتمادًا على قيمة السلسلة)الأحداث
الأساليب والخصائص والأحداث الأقارب إلى لوحة المفاتيح
انظر الكود
انظر المثال
خيارات
لا أحد
ملكيات
طُرق
input (رقم) رمز المفاتيحinput (سلسلة | رقم) رمز المفاتيح أو الحرفinputs (صفيف) مفاتيح ورود/أو أحرفالأحداث
keycode (رقم)character (سلسلة)keycode (رقم)character (سلسلة) تعرف متى يستخدم المستخدمون رمز Konami ↑ ↑ ↓ ↓ ← ← ← → BA
انظر الكود
انظر المثال
خيارات
{
reset_duration : 1000 , // Time in before reseting
sequence : // Sequence to enter
[
'up' ,
'up' ,
'down' ,
'down' ,
'left' ,
'right' ,
'left' ,
'right' ,
'b' ,
'a'
]
}ملكيات
لا أحد
طُرق
لا أحد
الأحداث
index (int) التقدم قبل المهلةindex (int) التقدم قبل الفشل العقارات والأحداث الأقارب للفأر
انظر الكود
انظر المثال
خيارات
لا أحد
ملكيات
طُرق
لا أحد
الأحداث
position (كائن) معلومات الموضع الماوسtarget (عنصر DOM) العنصر المباشر تحت موضع الماوسfalse في رد الاتصالposition (كائن) معلومات الموضع الماوسtarget (عنصر DOM) العنصر المباشر تحت موضع الماوسposition (كائن) معلومات الموضع الماوسtarget (عنصر DOM) العنصر المباشر تحت موضع الماوسwheel (كائن) معلومات عجلات الماوسfalse في رد الاتصال سجل المفتاح/القيمة عندما تحتاج إلى تخزين المتغير واسترداده في أي مكان دون استخدام المتغيرات العالمية القبيحة.
يمكنك استخدامه لتخزين ذاكرة التخزين المؤقت.
انظر الكود
انظر المثال
خيارات
لا أحد
ملكيات
طُرق
key (سلسلة)callback (اختياري ، وظيفة) يسمى إذا لم يتم العثور على العنصر للمفتاح المحدد ونتيجة الوظيفة التي تم إرجاعهاkey (سلسلة)value (أي)الأحداث
key (سلسلة)value (أي) تغيير حجم العناصر داخل الحاويات وفقًا للعديد من الخيارات الممكنة.
قد يتم تحليل وتغيير حجمه تلقائيًا وفقًا للفئات والسمات على الحاويات.
من أجل العمل ، يجب عليك تحديد الخصائص التالية على عناصر DOM نفسها
data-width | width (اختياري ، رقم)data-height | height (اختياري ، رقم)data-width | width (رقم)data-height | height (رقم)data-fit-type (اختياري ، السلسلة ، القيم: "fill" | 'fit' ، الافتراضي: 'Fill' )data-align-x (اختياري ، سلسلة ، القيم: "اليسار" | "المركز" | "يمين" ، افتراضي: "المركز" )data-align-y (اختياري ، سلسلة ، القيم: "أعلى" | "المركز" | "القاع" ، الافتراضي: "المركز" )data-rounding (اختياري ، سلسلة ، القيم: "السقف" | "الأرضية" | "جولة" | لا شيء ، الافتراضي : انظر الكود
انظر المثال
خيارات
{
force_style : true , // Add 'position' and 'overflow' CSS properties if not set yet
parse : true , // Automatically parse
target : document . body , // Default target when parsing
auto_resize : true , // Resize on browser 'resize' event
classes :
{
to_resize : 'to-resize' , // Containers searched class (on the container)
content : 'content' // Content class (must be inside container)
}
}ملكيات
لا أحد
طُرق
target (اختياري ، عنصر dom ، الافتراضي: document.body)selector (سلسلة ، افتراضية: "للاتصال")container (عنصر DOM)content (عنصر DOM)force_style (اختياري ، منطقي ، افتراضي: صواب) إضافة خصائص نمط "الموضع" و "الفائض" إذا لم يتم تعيينها بعد بعدparameters (كائن)content_width (رقم)content_height (رقم)container_width (رقم)container_height (رقم)fit_type (اختياري ، سلسلة ، افتراضي: ملء ، القيمة: FILL | FIT )align_x (اختياري ، سلسلة ، افتراضي: الوسط ، القيمة: اليسار | المركز | يمين )align_y (اختياري ، سلسلة ، افتراضي: المركز ، القيمة: أعلى | مركز | أسفل )rounding (اختياري ، سلسلة ، افتراضي: السقف ، القيمة: السقف | الأرضية | جولة | لا شيء)format (اختياري ، سلسلة ، افتراضي: كلاهما ، القيمة: كلاهما | Cartesian | CSS )الأحداث
لا أحد
طريقة لإدارة السلاسل
انظر الكود
انظر المثال
خيارات
لا أحد
ملكيات
لا أحد
طُرق
value (سلسلة) السلسلة التي تحتاج إلى تغيير الحالةformat (سلسلة) مطلوبvalue (سلسلة) سلسلة لتقليمهاcharacters (سلسلة) الأحرف لتقليمvalue (سلسلة) تحول بذكاء إلى منطقية مع العديد من اللغات المدعومةvalue (السلسلة) سلسلة لتجولالأحداث
لا أحد
قم بتشغيل مؤشر يثير أحداث كل قاعدة إطار على requestAnimationFrame.
انظر الكود
انظر المثال
خيارات
{
auto_run : true
}ملكيات
start متى بدأ الخانة الماضيelapsed الوقت المنقضيdelta منذ آخر علامةcurrentطُرق
run (Boolean) في تشغيل المؤقتframes_count (رقم)action (وظيفة)after (اختياري ، منطقية ، القيم: صواب | خطأ ، افتراضي: صحيح ) يجب تطبيق الوظيفة بعد أن يتم تشغيل حدث tickالأحداث
time (كائن) معلومات الوقتtime (كائن) معلومات الوقت يمنحك معلومات حول عرض Viewport مثل العرض ، والطول ، والتمرير العلوي ، والتمرير اليسرى ، و Scroll Delta ، إلخ.
تشغيل الأحداث على التمرير وتغيير الحجم.
يمكن تعطيل التحوم على التمرير لتحسين الأداء
انظر الكود
انظر المثال
خيارات
{
disable_hover_on_scroll : false , // Improve performance when scrolling but disable hovers
initial_triggers : [ 'resize' , 'scroll' ] // On the next frame, triggers 'resize' then 'resize' events
}ملكيات
delta (كائن)top | y (رقم) قم بالتمرير Delta Topleft | x (رقم) قم بالتمرير اليسرى دلتاdirection (كائن)y (سلسلة) اتجاه التمرير العموديx (سلسلة) اتجاه التمرير الأفقيطُرق
condition (سلسلة) انتقل إلى Matchmedia الكلاسيكي ولكن فقط أعد منطقيةالأحداث
viewport (كائن)viewport (كائن) Preferences > Browse Packages...User/ المجلدقبل الميلاد : فئة عموم
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : فئة عموم صارمة
( function ( )
{
'use strict' ;
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;
} ) ( ) ;BFN : وظيفة عموم
/**
* Description
*/
name : function ( options )
{
var that = this ;
this . _super ( ) ;
}BN: عموم جديد
new Pan . Namespace . Class ( ) ;BNC : مكون جديد
new Pan . Components . Class ( ) ;BNT : أداة جديدة
new Pan . Tools . Class ( ) ; convert_case مع dashed add_detector طريقة none في التقريب init construct$ على الملخصp- إلى فئات افتراضيةnull'use strict' عامmatch_breakpoint لعرض المنفذno-features لا تعمل على الكاشفformat على طريقة get_sizes (دعم "الديكارتيان" أو "CSS" أو "كلاهما")wait init
