pan old
1.0.0
O Pan.js (ou P.JS ) é uma estrutura JS leve (<40KO) e simples, feita para ajudá -lo a desenvolver aplicativos da Web bem estruturados rapidamente.
Você pode organizar seu aplicativo da web em componentes e ferramentas . Ele vem com algumas coisas úteis pré -fabricadas. Basta incluir os arquivos JS em seu HTML e começar a usá -los. O P.JS ainda está em desenvolvimento, não hesite se você tiver algum conselho.
Índice
O P.JS não tem dependências (não, você não precisa de jQuery). É compatível com todos os navegadores modernos até o IE8.
Dependendo dos navegadores e das aulas que você está usando, você pode precisar de poli -preenchimentos incluídos na pasta SRC/Polyfills.
A compilação padrão inclui todos os poli-preenchimentos necessários, mas você pode usar a versão no-compatibility .
Existem duas maneiras de usar o P.JS.
Você pode usá -lo como uma biblioteca simples instanciando as ferramentas ou pode usá -lo como uma estrutura, estendendo o P.JS para criar suas próprias ferramentas e componentes.
< 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 ) ;
} ) ; Crie suas próprias ferramentas e componentes com base nas classes P.JS. Você pode colocar seus componentes dentro do objeto P.Components ou criar seu próprio espaço para nome como Foo.Bar.My_Class .
A herança é baseada no código de John Resig, com algumas melhorias, como fusão de propriedades profundas, singleton, opções de defualt etc.
O P.JS é desenvolvido no modo rigoroso. Faça o que você usa e sinta -se à vontade para compartilhar suas ferramentas e componentes personalizados.
< 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 ( ) ; As classes principais são as fundações de P.JS.
Todas as ferramentas ou componentes herdam de uma dessas classes e suas classes personalizadas também devem.
P.Core.Abstract é a classe padrão.
construct será chamado quando instanciadostatic definiu a classe como um singleton. Isso significa que a primeira instância com new atuará normalmente, mas toda a próxima instância com new retornará o primeiro.options é um objeto que se fundirá com as opções quando instanciadasregister dentro da propriedade options adicionará automaticamente a instanciação à ferramenta de registro com o valor register como chave_super( parameters ) dentro de um método chamará o método de superação pai // 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 estende P.Core.Abstract com métodos de eventos extras.
on , off and 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' ) ;O P.JS vem com algumas ferramentas pré -fabricadas. Cada um é um singleton (estático). Você pode instanciá -lo várias vezes, sempre receberá a primeira instância.
Você pode estender essas ferramentas, se quiser.
Os pontos de interrupção funcionam um pouco como largura e altura para consultas de mídia. Especifique alguns pontos de interrupção e ele desencadeará eventos ao redimensionar a viewport.
Veja o código
Veja o exemplo
Opções
{
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
}
}
]
}Propriedades
Métodos
breakpoints (objeto | Array) Adicionar um são vários pontos de interrupçãosilent (opcional, booleano, padrão: true) não deve acionar o eventobreakpoints (string | matriz) remover um são vários pontos de interrupção pelo nomesilent (opcional, booleano, padrão: false) não deve acionar o eventobreakpoint (string) se o ponto de interrupção estiver ativo com curiosidadecondition (string) prosseguir para um clássico MatchMedia, mas apenas devolve um booleanoEventos
breakpoints (Array) atualmente ativos pontos de interrupção Ajudá -lo a converter strings em cores bem formadas.
Crie arco -íris lindos. ?
Veja o código
Veja o exemplo
Opções
{
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
}
}
}Propriedades
Métodos
input de objeto RGB (string) qualquer coisa que pareça uma cor (#ff0000,#f00, vermelha, {r: 1, g: 0, b: 1}, {h: 1, s: 1, l: 0,5})target (Opcional, DOM Element, Padrão: Document.body)selector (String, Padrão: 'TO-RESIZE')start (qualquer)end (e)count (número)format (opcional, string, valores: 'rgb' | 'hsl' , padrão: 'hsl' )input (Object) RGB Objectinput (objeto) objeto hslEventos
nenhum
Aplique CSS no elemento direcionado e adicione automaticamente prefixos. A propriedade será formada automaticamente.
Veja o código
Veja o exemplo
Opções
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}Propriedades
nenhum
Métodos
target (elemento DOM |values (objeto) valor para aplicarprefixes (opcional, boolean | Array) true para prefixos ou prefixos padrãoEventos
nenhum
Forneça informações como motor, navegador, sistema e recursos.
Veja o código
Veja o exemplo
Opções
{
targets : [ 'html' ] // Add detected informations to targets in array (selector or DOM Elements)
}Propriedades
ie (número)gecko (número)webkit (número)khtml (número)opera (número)version (número)ie (número)firefox (número)safari (número)konq (número)opera (número)chrome (número)version (número)windows (booleano)mac (booleano)osx (booleano)iphone (booleano)ipod (booleano)ipad (booleano)ios (booleano)blackberry (booleano)android (booleano)opera_mini (booleano)windows_mobile (booleano)wii (booleano)ps (booleano)touch (booleano)media_query (booleano)Métodos
nenhum
Eventos
nenhum
Envie informações ao Google Analytics usando a instância atual. Você deve instanciar você mesmo o Google Analytics.
Veja o código
Veja o exemplo
Opções
{
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
}
}Propriedades
nenhum
Métodos
target (Opcional, DOM Element, Padrão: Document.body)selector (String, Padrão: 'TO-RESIZE')datas (objeto)category (qualquer)action (qualquer)label (opcional, qualquer)value (opcional, qualquer)unique (opcional, string) não deve enviar os dados mais de uma vez (dependendo do valor da string)Eventos
Métodos, propriedades e parentes de eventos para o teclado
Veja o código
Veja o exemplo
Opções
nenhum
Propriedades
Métodos
input (número) KeyCodeinput (string | número) Código de chave ou caractereinputs (Array) Codos de chaves e/ou caracteresEventos
keycode (número)character (string)keycode (número)character (string) Saiba quando seus usuários usam o código Konami ↑ ↑ icionça icionça icionça ↑
Veja o código
Veja o exemplo
Opções
{
reset_duration : 1000 , // Time in before reseting
sequence : // Sequence to enter
[
'up' ,
'up' ,
'down' ,
'down' ,
'left' ,
'right' ,
'left' ,
'right' ,
'b' ,
'a'
]
}Propriedades
nenhum
Métodos
nenhum
Eventos
index (int) Progresso antes do tempo limiteindex (int) Progresso antes de falhar Propriedades e eventos parentes para o mouse
Veja o código
Veja o exemplo
Opções
nenhum
Propriedades
Métodos
nenhum
Eventos
position (objeto) Informações da posição do mousetarget (elemento dom) elemento direto na posição do mousefalse no retorno de chamadaposition (objeto) Informações da posição do mousetarget (elemento dom) elemento direto na posição do mouseposition (objeto) Informações da posição do mousetarget (elemento dom) elemento direto na posição do mousewheel (objeto)false no retorno de chamada Registro de chave/valor para quando você precisar armazenar variável e recuperá -lo em qualquer lugar sem usar variáveis globais feias.
Você pode usá -lo para cache variáveis.
Veja o código
Veja o exemplo
Opções
nenhum
Propriedades
Métodos
key (string)callback (opcional, função) chamado If Item não encontrado para a chave especificada e resultado da função retornadakey (string)value (qualquer)Eventos
key (string)value (qualquer) Redimensione os elementos dentro dos recipientes de acordo com muitas opções possíveis.
Pode analisar automaticamente e redimensionar de acordo com as classes e atributos em contêineres.
Para trabalhar, você terá que especificar as seguintes propriedades sobre os próprios elementos DOM
data-width | width (opcional, número)data-height | height (opcional, número)data-width | width (número)data-height | height (número)data-fit-type (opcional, string, valores: 'preenchimento' | 'fit' , padrão: 'preencher' )data-align-x (opcional, string, valores: 'esquerda' | 'Center' | 'Right' , padrão: 'Center' )data-align-y (opcional, string, valores: 'top' | 'Centro' | 'Bottom' , padrão: 'Centro' )data-rounding (opcional, string, valores: 'teto' | 'piso' | 'Round' | Nenhum, padrão: 'teto' ) Veja o código
Veja o exemplo
Opções
{
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)
}
}Propriedades
nenhum
Métodos
target (Opcional, DOM Element, Padrão: Document.body)selector (String, Padrão: 'TO-RESIZE')container (elemento dom)content (elemento DOM)force_style (opcional, booleano, padrão: true) Adicionar propriedades de estilo 'posição' e 'transbordar' se ainda não estiver definidoparameters (objeto)content_width (número)content_height (número)container_width (número)container_height (número)fit_type (opcional, string, padrão: preencher , valor: preencher | ajuste )align_x (opcional, string, padrão: centro , valor: esquerda | centro | à direita )align_y (opcional, string, padrão: centro , valor: top | centro | inferior )rounding (opcional, string, padrão: teto , valor: teto | piso | redonda | nenhum)format (opcional, string, padrão: ambos , valor: ambos | cartesiano | css )Eventos
nenhum
Método para gerenciar strings
Veja o código
Veja o exemplo
Opções
nenhum
Propriedades
nenhum
Métodos
value (string) que precisam ser alterados no casoformat (string)value (string) string para apararcharacters (string) caracteres para apararvalue (string) converte de maneira inteligente em booleano com muitos idiomas suportadosvalue (string) string para lesmaEventos
nenhum
Execute um ticker que desencadeia os eventos de cada base de quadros na requestanimationframe.
Veja o código
Veja o exemplo
Opções
{
auto_run : true
}Propriedades
start quando o ticker começou por últimoelapsed gastodelta tempo gasto desde o último tickcurrentMétodos
run (booleano) deve começar a executar o timerframes_count (número)action (função)after (opcional, booleano, valores: true | false , padrão: true ) deve aplicar a função após o evento tick ser acionadoEventos
time (objeto) Informações de tempotime (objeto) Informações de tempo Dá -lhe informações sobre a viewport, como largura, altura, tampo de rolagem, role à esquerda, rolagem delta, etc.
Acionar eventos em rolagem e redimensionar.
Pode desativar o mouse no rolo para melhorar o desempenho
Veja o código
Veja o exemplo
Opções
{
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
}Propriedades
delta (objeto)top | y (número) Roll Delta Topleft | x (número) Roll Delta esquerdodirection (objeto)y (string) Direção de rolagem verticalx (string) Direção de rolagem horizontalMétodos
condition (string) prosseguir para um clássico MatchMedia, mas apenas devolve um booleanoEventos
viewport (objeto)viewport (objeto) Preferences > Browse Packages...User/ pastaBC : Pan Class
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : Pan Class Strict
( function ( )
{
'use strict' ;
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;
} ) ( ) ;BFN : função pan
/**
* Description
*/
name : function ( options )
{
var that = this ;
this . _super ( ) ;
}BN : PAN NOVO
new Pan . Namespace . Class ( ) ;BNC : PAN novo componente
new Pan . Components . Class ( ) ;bnt : pan nova ferramenta
new Pan . Tools . Class ( ) ; convert_case com dashed add_detector none no arredondamento init por construct$ propriedade em resumop- às classes padrãonull Option Bug'use strict'match_breakpoint à Viewportno-features que não estão trabalhando no detectorformat no método get_sizes (suporte "cartesiano", "css" ou "ambos")wait Init
