pan old
1.0.0
Pan.js (ou P.JS ) est un framework JS léger (<40ko) et simple fait pour vous aider à développer rapidement des applications Web bien structurées.
Vous pouvez organiser votre application Web en composants et outils . Il est livré avec des trucs préfabriqués utiles. Incluez simplement les fichiers JS dans votre HTML et commencez à l'utiliser. P.JS est toujours en développement, n'hésitez pas si vous avez des conseils.
Table des matières
P.JS n'a pas de dépendances (non, vous n'avez pas besoin de jQuery). Il est compatible avec tous les navigateurs modernes à IE8.
Selon les navigateurs et les classes que vous utilisez, vous pouvez avoir besoin de polyfills qui sont inclus dans le dossier SRC / Polyfills.
La version par défaut comprend tous les polyfills nécessaires, mais vous pouvez utiliser la version no-compatibility .
Il existe deux façons d'utiliser P.Js.
Vous pouvez l'utiliser comme une bibliothèque simple en instanciant les outils ou vous pouvez l'utiliser comme cadre en étendant P.JS pour créer vos propres outils et composants.
< 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 ) ;
} ) ; Créez vos propres outils et composants en fonction des classes P.JS. Vous pouvez mettre vos composants dans Foo.Bar.My_Class objet P.Components
L'héritage est basé sur le code John Resig avec quelques améliorations comme la fusion de propriétés profondes, Singleton, les options de définition, etc.
P.JS est développé en mode strict. Faites ce que vous obtenez et n'hésitez pas à partager vos outils et composants personnalisés.
< 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 ( ) ; Les classes de base sont les fondements de P.Js.
Chaque outil ou composant hérite de l'une de ces classes et de vos classes personnalisées devrait également.
P.Core.Abstract est la classe par défaut.
construct sera appelée lors de l'instanciationstatic a défini la classe en tant que singleton. Cela signifie que la première institiation avec new agira normalement, mais chaque instialisation suivante avec new Rendra la première.options est un objet qui sera fusionné avec les options lorsqu'il est instanciéregister à l'intérieur de la propriété options ajoutera automatiquement l'instanciation à l'outil de registre avec la valeur register en tant que clé_super( parameters ) à l'intérieur d'une méthode appellera la méthode remplacée par le parent // 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 étend P.Core.Abstract avec des méthodes d'événements supplémentaires.
on , off et 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 est livré avec des outils préfabriqués. Chacun est un singleton (statique). Vous pouvez l'instancier plusieurs fois, vous obtiendrez toujours la première instance.
Vous pouvez étendre ces outils si vous le souhaitez.
Les points d'arrêt fonctionnent un peu comme la largeur et la hauteur pour les requêtes médiatiques. Spécifiez certains points d'arrêt et il déclenchera les événements lors de la redimensionnement de la fenêtre.
Voir code
Voir l'exemple
Options
{
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
}
}
]
}Propriétés
Méthodes
breakpoints (objet | Array) Ajouter un sont plusieurs points d'arrêtsilent (facultatif, booléen, par défaut: true) ne doit pas déclencher l'événementbreakpoints (chaîne | array) supprimer un sont plusieurs points d'arrêt par nomsilent (facultatif, booléen, par défaut: false) ne doit pas déclencher l'événementbreakpoint (chaîne) si le point d'arrêt est indirectement actifcondition (chaîne) Passez à un matchmedia classique mais renvoie uniquement un booléenÉvénements
breakpoints (tableau) Points d'arrêt actuellement actifs Vous aider à convertir les cordes en couleurs bien formées.
Créez des arcs-en-ciel de belles. ?
Voir code
Voir l'exemple
Options
{
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
}
}
}Propriétés
Méthodes
input d'objet RVB (chaîne) tout ce qui ressemble à une couleur (# ff0000, # f00, rouge, {r: 1, g: 0, b: 1}, {h: 1, s: 1, l: 0,5})target (facultatif, élément DOM, par défaut: document.body)selector (chaîne, par défaut: 'to-resize')start (n'importe quel)end (et)count (numéro)format (facultatif, chaîne, valeurs: 'rgb' | 'hsl' , par défaut: 'hsl' )input HSL (objet) RGB Objetinput RVB (objet) objet HSLÉvénements
aucun
Appliquez CSS sur l'élément ciblé et ajoutez automatiquement les préfixes. La propriété sera automatiquement formée.
Voir code
Voir l'exemple
Options
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}Propriétés
aucun
Méthodes
target (élément Dom | jQuery) récupéré avec un fourrure classique comme QueySelector ou jQueryvalues (objet) valeur à appliquerprefixes (facultatif, booléen | Array) Vrai pour les préfixes ou les préfixes par défaut ArrayÉvénements
aucun
Fournir des informations telles que le moteur, le navigateur, le système et les fonctionnalités.
Voir code
Voir l'exemple
Options
{
targets : [ 'html' ] // Add detected informations to targets in array (selector or DOM Elements)
}Propriétés
ie (numéro)gecko (numéro)webkit (numéro)khtml (numéro)opera (numéro)version (numéro)ie (numéro)firefox (numéro)safari (numéro)konq (numéro)opera (numéro)chrome (numéro)version (numéro)windows (booléen)mac (booléen)osx (booléen)iphone (booléen)ipod (booléen)ipad (booléen)ios (booléen)blackberry (booléen)android (booléen)opera_mini (Boolean)windows_mobile (booléen)wii (booléen)ps (booléen)touch (booléen)media_query (Boolean)Méthodes
aucun
Événements
aucun
Envoyez des informations à Google Analytics en utilisant l'instance actuelle. Vous devez instancier Google Analytics vous-même.
Voir code
Voir l'exemple
Options
{
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
}
}Propriétés
aucun
Méthodes
target (facultatif, élément DOM, par défaut: document.body)selector (chaîne, par défaut: 'to-resize')datas (objet)category (n'importe quel)action (tout)label (facultatif, tout)value (facultatif, tout)unique (facultatif, chaîne) ne doit pas envoyer les données plus d'une fois (selon la valeur de la chaîne)Événements
Méthodes, propriétés et événements Parents au clavier
Voir code
Voir l'exemple
Options
aucun
Propriétés
Méthodes
input (numéro)input (chaîne | numéro) Keycode ou caractèreinputs (tableau) codes et / ou caractèresÉvénements
keycode (numéro)character (chaîne)keycode (numéro)character (chaîne) Sachez quand vos utilisateurs utilisent le code konami ↑ ↑ ↓ ↓ ← → ← → BA
Voir code
Voir l'exemple
Options
{
reset_duration : 1000 , // Time in before reseting
sequence : // Sequence to enter
[
'up' ,
'up' ,
'down' ,
'down' ,
'left' ,
'right' ,
'left' ,
'right' ,
'b' ,
'a'
]
}Propriétés
aucun
Méthodes
aucun
Événements
index (INT) Progrès avant le délai d'expirationindex (INT) progressait avant d'échouer Propriétés et événements parents à la souris
Voir code
Voir l'exemple
Options
aucun
Propriétés
Méthodes
aucun
Événements
position (objet) Informations de position de souristarget (élément Dom) sous la position de la sourisfalse dans le rappelposition (objet) Informations de position de souristarget (élément Dom) sous la position de la sourisposition (objet) Informations de position de souristarget (élément Dom) sous la position de la souriswheel (objet)false dans le rappel Registre clé / valeur pour le moment où vous devez stocker les variables et la récupérer n'importe où sans utiliser de variables globales laides.
Vous pouvez l'utiliser pour mettre en cache des variables.
Voir code
Voir l'exemple
Options
aucun
Propriétés
Méthodes
key (chaîne)callback (facultatif, fonction) appelé si élément non trouvé pour la clé et le résultat de la fonction spécifié renvoyékey (chaîne)value (tout)Événements
key (chaîne)value (tout) Redimensionner les éléments à l'intérieur des conteneurs en fonction de nombreuses options possibles.
Peut analyser automatiquement et redimensionner en fonction des classes et des attributs sur les conteneurs.
Pour travailler, vous devrez spécifier les propriétés suivantes sur les éléments DOM eux-mêmes
data-width | width (facultatif, numéro)data-height | height (facultatif, numéro)data-width | width (numéro)data-height | height (numéro)data-fit-type (facultatif, chaîne, valeurs: «remplissage» | «Fit» , par défaut: «remplissage» )data-align-x (facultatif, chaîne, valeurs: 'gauche' | 'Centre' | 'droite' , par défaut: 'Centre' )data-align-y (facultatif, chaîne, valeurs: 'top' | 'Centre' | 'inférieur' , par défaut: 'Centre' )data-rounding (facultatif, chaîne, valeurs: 'ceil' | 'plancher' | 'rond' | Aucun, par défaut: 'ceil' ) Voir code
Voir l'exemple
Options
{
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)
}
}Propriétés
aucun
Méthodes
target (facultatif, élément DOM, par défaut: document.body)selector (chaîne, par défaut: 'to-resize')container (élément DOM)content (élément DOM)force_style (facultatif, booléen, par défaut: true) Ajouter les propriétés de style «position» et «déborde» si ce n'est pas encore définiparameters (objet)content_width (numéro)content_height (numéro)container_width (numéro)container_height (numéro)fit_type (facultatif, chaîne, par défaut: remplissage , valeur: remplissage | fit )align_x (facultatif, chaîne, par défaut: Centre , valeur: gauche | Centre | Droite )align_y (facultatif, chaîne, par défaut: Centre , valeur: Top | Centre | en bas )rounding (facultatif, chaîne, par défaut: Ceil , valeur: Ceil | Floor | Round | Aucun)format (facultatif, chaîne, par défaut: les deux , valeur: les deux | cartésien | CSS )Événements
aucun
Méthode pour gérer les chaînes
Voir code
Voir l'exemple
Options
aucun
Propriétés
aucun
Méthodes
value (chaîne) qui doit être modifiée de casformat (chaîne) Case recherchéevalue (chaîne) à coupercharacters (chaîne) Caractères à coupervalue (chaîne) Convertir intelligemment en booléen avec de nombreuses langues prises en chargevalue (chaîne) à slutifÉvénements
aucun
Exécutez un ticker qui déclenche les événements de chaque base de trame sur DequestanimationFrame.
Voir code
Voir l'exemple
Options
{
auto_run : true
}Propriétés
start quand le ticker a-t-il commencé en dernierelapsed passédelta passé depuis la dernière tiquecurrentMéthodes
run (booléen) devrait commencer à exécuter la minuterieframes_count (numéro)action (fonction)after (facultatif, booléen, valeurs: true | false , par défaut: true ) devrait appliquer la fonction après le déclenchement de l'événement tickÉvénements
time (objet) Informations de tempstime (objet) Informations de temps Vous donne des informations sur la fenêtre comme la largeur, la hauteur, le dessus de défilement, le défilement à gauche, le delta de défilement, etc.
Déclencher des événements sur défilement et redimensionner.
Peut désactiver la survol sur le défilement pour l'amélioration des performances
Voir code
Voir l'exemple
Options
{
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
}Propriétés
delta (objet)top | y (numéro) Scroll Delta Topleft | x (numéro) défile delta à gauchedirection (objet)y (String) Direction verticalex (chaîne) Direction de défilement horizontalMéthodes
condition (chaîne) Passez à un matchmedia classique mais renvoie uniquement un booléenÉvénements
viewport (objet)viewport (objet) Preferences > Browse Packages...User/ le dossierColombie-Britannique : Classe PAN
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : Classe Pan stricte
( function ( )
{
'use strict' ;
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;
} ) ( ) ;BFN : fonction PAN
/**
* Description
*/
name : function ( options )
{
var that = this ;
this . _super ( ) ;
}BN : Pan Nouveau
new Pan . Namespace . Class ( ) ;BNC : Pan Nouveau composant
new Pan . Components . Class ( ) ;BNT : PAN NOUVEAU outil
new Pan . Tools . Class ( ) ; convert_case avec dashed add_detector none en arrondie init par construct$ sur Abstractp- aux classes par défautnull d'option NULL'use strict'match_breakpoint à la fenêtreno-features qui ne travaillent pas sur le détecteurformat sur la méthode get_sizes (prendre en charge "cartésien", "CSS" ou "les deux")wait Init
