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 Options и т. Д.
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 поставляется с некоторыми готовыми инструментами. Каждый из них является синглтоном (статичным). Вы можете создать экземпляр его несколько раз, вы всегда получите первый экземпляр.
Вы можете расширить эти инструменты, если хотите.
Точки останова работают немного как ширина и высота для медиа -запросов. Укажите некоторые точки останова, и это запустит события при изменении размера видового порта.
Смотрите код
Смотрите пример
Параметры
{
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 (необязательно, логическое, по умолчанию: true) не должно запускать событиеbreakpoints (строка | массив) удалить один - несколько точек останова по имениsilent (необязательно, логическое, по умолчанию: false) не должно запускать событие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 (строка, по умолчанию: 'to-resize')start (любое)end (и)count (номер)format (необязательно, строка, значения: 'rgb' | 'hsl' , по умолчанию: 'hsl' )input (объект) объект RGBinput (объект) HSL объектСобытия
никто
Примените CSS на целевой элемент и автоматически добавьте префиксы. Свойство будет автоматически формируется.
Смотрите код
Смотрите пример
Параметры
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}Характеристики
никто
Методы
target (Dom Element | jQuery) элемент получен с помощью классического выбора, например, QuerySelector или jQueryvalues (объект) значение для примененияprefixes (необязательно, логическое | массив) TRUE для префиксов по умолчанию или массива префиксовСобытия
никто
Предоставьте информацию, такую как двигатель, браузер, систему и функции.
Смотрите код
Смотрите пример
Параметры
{
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 (строка, по умолчанию: 'to-resize')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 (необязательно, строка, значения: «левый» | 'center' | 'right' , default: 'center' )data-align-y (необязательно, строка, значения: «top» | 'center' | 'снизу' , по умолчанию: 'center' )data-rounding (необязательно, строка, значения: 'ceil' | 'floor' | 'round' | none, по умолчанию: 'ceil' ) Смотрите код
Смотрите пример
Параметры
{
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 (строка, по умолчанию: 'to-resize')container (элемент DOM)content (элемент DOM)force_style (необязательно, логическое, по умолчанию: true) Добавить свойства «позиция» и «переполнение», если еще не установленparameters (объект)content_width (номер)content_height (номер)container_width (номер)container_height (номер)fit_type (необязательно, строка, по умолчанию: заполнить , значение: заполнить | fit )align_x (необязательно, строка, по умолчанию: Центр , значение: слева | Центр | справа )align_y (необязательно, строка, по умолчанию: центр , значение: вверху | Центр | внизу )rounding (необязательно, строка, по умолчанию: ceil , значение: ceil | Пол | Раунд | Нет)format (необязательно, строка, по умолчанию: оба , значение: оба | картезианские | CSS )События
никто
Метод управления строками
Смотрите код
Смотрите пример
Параметры
никто
Характеристики
никто
Методы
value (строка), которая должна быть изменена.format (строка) разыскиваемый случайvalue (String) String to Tripcharacters (строки) символы для обрезкиvalue (строка) Умно конвертируется в Boolean со многими поддерживаемыми языкамиvalue (string) строка для ликвидацииСобытия
никто
Запустите тикер, который запускает события каждую базу кадров на запросе анимации.
Смотрите код
Смотрите пример
Параметры
{
auto_run : true
}Характеристики
start , когда тикер началelapsed время потраченоdelta Time, проведенное с момента последнего тикаcurrent времяМетоды
run (boolean) должен начать запускать таймерframes_count (номер)action (функция)after (необязательно, логическое, значения: true | false , default: true ) должен применить функцию после того, как событие tick запускаетсяСобытия
time (объект) Информация о времениtime (объект) Информация о времени Дает вам информацию о просмотре, такой как ширина, высота, верхняя часть прокрутки, прокрутка влево, Delta Scroll и т. Д.
Триггер событий при прокрутке и изменение размера.
Может отключить зависание на свитка для повышения производительности
Смотрите код
Смотрите пример
Параметры
{
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 (номер) прокручивать дельта -топleft | x (номер) прокрутка дельта слеваdirection (объект)y (строка) направление вертикального прокруткиx (строка) горизонтальное направление прокруткиМетоды
condition (строка) перейти к классическому MatchMedia, но только верните логическийСобытия
viewport (объект)viewport (объект) Preferences > Browse Packages...User/ папкиBC : класс PAN
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : Pan Class строго
( function ( )
{
'use strict' ;
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;
} ) ( ) ;BFN : функция PAN
/**
* Description
*/
name : function ( options )
{
var that = this ;
this . _super ( ) ;
}BN : Pan New
new Pan . Namespace . Class ( ) ;BNC : PAN новый компонент
new Pan . Components . Class ( ) ;Bnt : Pan New Tool
new Pan . Tools . Class ( ) ; convert_case с dashed add_detector none в округление init на construct$ недвижимость в абстрактныйp- в классы по умолчаниюnull опцией'use strict'match_breakpoint в Viewportno-featuresformat в метод get_sizes (поддержка «картезиан», «CSS» или «Оба»)wait Инициатор
