pan old
1.0.0
Pan.js (oder P.JS ) ist ein Licht (<40KO) und ein einfaches JS -Framework , mit dem Sie schnell strukturierte Webanwendungen entwickeln können.
Sie können Ihre Webanwendung in Komponenten und Tools organisieren. Es kommt mit einigen nützlichen Vorgegriffen. Fügen Sie einfach die JS -Dateien in Ihr HTML ein und verwenden Sie sie. P.JS ist noch in der Entwicklung, zögern Sie nicht, wenn Sie Ratschläge haben.
Inhaltsverzeichnis
P.JS hat keine Abhängigkeiten (nein, Sie brauchen keine jQuery). Es ist kompatibel mit allen modernen Browsern mit IE8.
Abhängig von den Browsern und Klassen, die Sie verwenden, benötigen Sie möglicherweise Polyfills, die im Ordner SRC/Polyfills enthalten sind.
Der Standard-Build enthält alle benötigten Polyfills, aber Sie können die no-compatibility -Version verwenden.
Es gibt zwei Möglichkeiten, P.Js.
Sie können es als einfache Bibliothek verwenden, indem Sie die Tools instanziieren, oder Sie können sie als Framework verwenden, indem Sie P.Js erweitern, um Ihre eigenen Tools und Komponenten zu erstellen.
< 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 ) ;
} ) ; Erstellen Sie Ihre eigenen Tools und Komponenten basierend auf P.JS -Klassen. Sie können Ihre Komponenten in P.Components -Objekt einfügen oder Ihren eigenen Namespace wie Foo.Bar.My_Class erstellen.
Die Vererbung basiert auf dem John Ressig -Code mit einigen Verbesserungen wie Deep Property Fusion, Singleton, Defualt -Optionen usw.
P.JS wird im strengen Modus entwickelt. Tun Sie, was Sie wischen, und können Sie Ihre benutzerdefinierten Tools und Komponenten freigeben.
< 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 ( ) ; Kernklassen sind die Grundlagen von P.Js.
Jedes Werkzeug oder jede Komponente erbt auch aus einer dieser Klassen und Ihren benutzerdefinierten Klassen.
P.Core.Abstract ist die Standardklasse.
construct wird aufgerufen, wenn sie instanziiert werdenstatic Eigenschaft setzte die Klasse als Singleton. Das bedeutet, dass die erste Einrichtung mit new normal wirkt, aber jede nächste Einrichtung mit new wird den ersten zurückgeben.options ist ein Objekt, das beim Instanziieren mit den Optionen verschmolzen wirdregister die Eigenschaft in der Eigenschaft options automatisch die Instanziierung zum Registrierungswerkzeug mit dem register als Schlüssel_super( parameters ) innerhalb einer Methode ruft die übergeordnete Methode auf // 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 erweitert P.Core.Abstract mit zusätzlichen Ereignismethoden.
on und off trigger Methodenevent-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 verfügt über einige vorgefertigte Werkzeuge. Jeder ist ein Singleton (statisch). Sie können es mehrmals instanziieren, Sie erhalten immer die erste Instanz.
Sie können diese Tools erweitern, wenn Sie möchten.
Breakpoints funktioniert ein wenig wie Breite und Höhe für Medienanfragen. Geben Sie einige Haltepunkte an und es wird Ereignisse ausgelöst, wenn Sie das Ansichtsfenster ändern.
Siehe Code
Siehe Beispiel
Optionen
{
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
}
}
]
}Eigenschaften
Methoden
breakpoints (Objekt | Array) Hinzufügen eines sind mehrere Breakpointssilent (optional, boolean, Standard: TRUE) sollte kein Ereignis auslösenbreakpoints (String | Array) Entfernen Sie eine sind mehrere Breakpoints mit dem Namensilent (optional, boolean, Standard: Falsch) sollte kein Ereignis auslösenbreakpoint (String) -Test Wenn der Breakpoint leistungsstark aktiv istcondition (String) fahren Sie mit einem klassischen Matchmedia fort, geben Sie jedoch nur einen Booleschen zurückEreignisse
breakpoints (Array) Derzeit aktive Haltepunkte Helfen Sie, Saiten in gut geformte Farben umzuwandeln.
Schaffen Sie schöne Regenbogen. ?
Siehe Code
Siehe Beispiel
Optionen
{
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
}
}
}Eigenschaften
Methoden
input (String) zu konvertieren, was wie eine Farbe aussieht (#ff0000,#f00, rot, {r: 1, g: 0, b: 1}, {h: 1, s: 1, l: 0.5})target (optional, DOM -Element, Standard: Dokument.body)selector (String, Standard: 'To-Resizeze')start (beliebt)end (und)count (Nummer)format (optional, Zeichenfolge, Werte: 'RGB' | 'HSL' , Standard: 'HSL' )input (Objekt) RGB -Objektinput (Objekt) HSL -ObjektEreignisse
keiner
Wenden Sie CSS auf das Zielelement an und fügen Sie automatisch Präfixe hinzu. Eigenschaft wird automatisch geschaffen.
Siehe Code
Siehe Beispiel
Optionen
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}Eigenschaften
keiner
Methoden
target (DOM -Element | jQuery) Element mit klassischem Fetcher wie QuerySelector oder JQuery abgerufenvalues (Objekt) Wert anwendenprefixes (optional, boolean | Array) TRUE für Standardpräfixe oder Präfixe ArrayEreignisse
keiner
Bereitstellung von Informationen wie Engine, Browser, System und Funktionen.
Siehe Code
Siehe Beispiel
Optionen
{
targets : [ 'html' ] // Add detected informations to targets in array (selector or DOM Elements)
}Eigenschaften
ie (Nummer)gecko (Nummer)webkit (Nummer)khtml (Nummer)opera (Nummer)version (Nummer)ie (Nummer)firefox (Nummer)safari (Nummer)konq (Nummer)opera (Nummer)chrome (Nummer)version (Nummer)windows (boolean)mac (boolean)osx (Boolean)iphone (boolean)ipod (boolean)ipad (boolean)ios (boolean)blackberry (Boolean)android (Boolean)opera_mini (Boolean)windows_mobile (boolean)wii (Boolean)ps (boolean)touch (boolean)media_query (Boolean)Methoden
keiner
Ereignisse
keiner
Senden Sie Informationen mit der aktuellen Instanz an Google Analytics. Sie müssen Google Analytics selbst instanziieren.
Siehe Code
Siehe Beispiel
Optionen
{
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
}
}Eigenschaften
keiner
Methoden
target (optional, DOM -Element, Standard: Dokument.body)selector (String, Standard: 'To-Resizeze')datas (Objekt)category (beliebig)action (beliebig)label (optional)value (optional, alle)unique (optional, Zeichenfolge) sollte die Daten nicht mehr als einmal senden (abhängig vom String -Wert)Ereignisse
Methoden, Eigenschaften und Ereignisse Verwandte der Tastatur
Siehe Code
Siehe Beispiel
Optionen
keiner
Eigenschaften
Methoden
input (number) keyCodeinput (Zeichenfolge | Nummer) Schlüsselcode oder Zeicheninputs (Array) Schlüsselcodes und/oder ZeichenEreignisse
keycode (Nummer)character (Zeichenfolge)keycode (Nummer)character (Zeichenfolge) Wissen Sie, wann Ihre Benutzer den Konami -Code verwenden ↑ ↑ ↓ ↓ ← → ← → Ba
Siehe Code
Siehe Beispiel
Optionen
{
reset_duration : 1000 , // Time in before reseting
sequence : // Sequence to enter
[
'up' ,
'up' ,
'down' ,
'down' ,
'left' ,
'right' ,
'left' ,
'right' ,
'b' ,
'a'
]
}Eigenschaften
keiner
Methoden
keiner
Ereignisse
index (int) Fortschritt vor der Zeitüberschreitungindex (int) Fortschritte vor dem Ausfall Eigenschaften und Ereignisse Verwandte der Maus
Siehe Code
Siehe Beispiel
Optionen
keiner
Eigenschaften
Methoden
keiner
Ereignisse
position (Objekt) Maus Positionsinformationentarget (DOM -Element) direktes Element unter der Mauspositionfalse zurückposition (Objekt) Maus Positionsinformationentarget (DOM -Element) direktes Element unter der Mauspositionposition (Objekt) Maus Positionsinformationentarget (DOM -Element) direktes Element unter der Mauspositionwheel (Objekt) Mausrad -Informationenfalse zurück Key/Value -Registrierung, wenn Sie Variable speichern und überall abrufen müssen, ohne hässliche globale Variablen zu verwenden.
Sie können es zum Cache -Variablen verwenden.
Siehe Code
Siehe Beispiel
Optionen
keiner
Eigenschaften
Methoden
key (Zeichenfolge)callback (optional, Funktion) aufgerufen, wenn Element nicht für das angegebene Schlüssel- und Funktionsergebnis zurückgegeben wurdekey (Zeichenfolge)value (beliebig)Ereignisse
key (Zeichenfolge)value (beliebig) Größen Sie die Größenänderung Elemente in Containern nach vielen möglichen Optionen.
Kann automatisch analysieren und die Größe gemäß den Klassen und Attributen für Container ändern.
Um zu arbeiten, müssen Sie die folgenden Eigenschaften für die DOM -Elemente selbst angeben
data-width | width (optional, Nummer)data-height | height (optional, Nummer)data-width | width (Nummer)data-height | height (Nummer)data-fit-type (optional, Zeichenfolge, Werte: 'Füllen' | 'fit' , Standard: 'FILL' )data-align-x (Optional, String, Werte: 'links' | 'Center' | 'rechts' , Standard: 'Center' )data-align-y (Optional, String, Werte: 'Top' | 'Center' | 'unten' , Standard: 'Center' )data-rounding (optional, String, Werte: 'Ceil' | 'Boden' | 'Runde' | Keine, Standard: 'Ceil' ) Siehe Code
Siehe Beispiel
Optionen
{
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)
}
}Eigenschaften
keiner
Methoden
target (optional, DOM -Element, Standard: Dokument.body)selector (String, Standard: 'To-Resizeze')container (DOM -Element)content (DOM -Element)force_style (optional, boolean, Standard: TRUE) Eigenschaften "Position" und "Überlauf" -Stil, wenn nicht noch festgelegt wirdparameters (Objekt)content_width (Nummer)content_height (Nummer)container_width (Nummer)container_height (Nummer)fit_type (optional, Zeichenfolge, Standard: Füllung , Wert: FILL | Fit )align_x (optional, String, Standard: Mitte , Wert: links | Mitte | rechts )align_y (optional, String, Standard: Mitte , Wert: Oben | Mitte | unten )rounding (optional, Zeichenfolge, Standard: Ceil , Wert: Ceil | Boden | Runde | Keine)format (optional, Zeichenfolge, Standard: Beides , Wert: Beide | cartesian | CSS )Ereignisse
keiner
Methode zum Verwalten von Zeichenfolgen
Siehe Code
Siehe Beispiel
Optionen
keiner
Eigenschaften
keiner
Methoden
value (Zeichenfolge), die Fall geändert werden müssenformat (String) GESAND CASEvalue (Zeichenfolge) String zu trimmencharacters (Zeichenfolge) Zeichen zum Trimmenvalue (Zeichenfolge) mit vielen unterstützten Sprachen intelligent zu Boolean konvertierenvalue (String) String, um zu schlüpfenEreignisse
keiner
Führen Sie einen Ticker aus, der Ereignisse jede Frame -Basis auf RequestArimationFrame auslöst.
Siehe Code
Siehe Beispiel
Optionen
{
auto_run : true
}Eigenschaften
start , wann der Ticker zuletzt angefangen hatelapsed Zeit verbrachtdelta -Zeit seit dem letzten Zecken verbrachtcurrent aktuelle ZeitMethoden
run (boolean) sollte den Timer ausführenframes_count (Nummer)action (Funktion)after (optional, boolean, Werte: true | false , Standard: true ) sollte die Funktion anwenden, nachdem das tick -Ereignis ausgelöst wurdeEreignisse
time (Objekt) Zeitinformationentime (Objekt) Zeitinformationen Gibt Ihnen Informationen über das Ansichtsfenster wie Breite, Höhe, Scrollen, scrollen Sie nach links, scrollen Delta usw.
Lösen Sie Ereignisse bei Scrollen und Größenänderung.
Kann Schwebewechsel für die Leistungsverbesserung deaktivieren
Siehe Code
Siehe Beispiel
Optionen
{
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
}Eigenschaften
delta (Objekt)top | y (Nummer) Scroll Delta Topleft | x (Nummer) Scroll Delta linksdirection (Objekt)y (String) vertikale Bildlaufrichtungx (String) Horizontale BildlaufrichtungMethoden
condition (String) fahren Sie mit einem klassischen Matchmedia fort, geben Sie jedoch nur einen Booleschen zurückEreignisse
viewport (Objekt)viewport (Objekt) Preferences > Browse Packages...User/ Ordner hinzuBC : PAN -Klasse
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : PAN -Klasse streng
( function ( )
{
'use strict' ;
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;
} ) ( ) ;BFN : PAN -Funktion
/**
* Description
*/
name : function ( options )
{
var that = this ;
this . _super ( ) ;
}BN : Pan New
new Pan . Namespace . Class ( ) ;BNC : Pan New Component
new Pan . Components . Class ( ) ;BNT : Pan New Tool
new Pan . Tools . Class ( ) ; convert_case mit dashed add_detector -Methode none beim Runden hinzu init durch construct$ Property auf Abstract hinzup- hinzunull -Optionsfehler beheben'use strict'match_breakpoint zum Ansichtsfenster hinzuno-features die nicht am Detektor arbeitenformat für get_sizes -Methode hinzu (unterstützen Sie "kartesischer", "CSS" oder "beide").wait hinzufügen Init
