pan old
1.0.0
PAN.JS (또는 P.JS )는 조명 (<40ko) 및 간단한 JS 프레임 워크 입니다.
웹 애플리케이션을 구성 요소 및 도구 로 구성 할 수 있습니다. 유용한 미세한 물건이 함께 제공됩니다. HTML에 JS 파일을 포함시키고 사용을 시작하십시오. 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 와 같은 자신의 네임 스페이스를 만들 수 있습니다.
상속은 Deep Property Merging, Singleton, Defualt 옵션 등과 같은 일부 개선 사항이있는 John Resig 코드를 기반으로합니다.
P.JS는 엄격한 모드로 개발되었습니다. whish로서, 사용자 정의 도구와 구성 요소를 자유롭게 공유하십시오.
< 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 속성은 인스턴스화시 옵션과 병합 될 객체입니다.options 속성 내부에 속성을 register 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 확장합니다.
off on 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 (String | array) 하나는 이름으로 여러 중단 점입니다silent (선택 사항, 부울, 기본값 : False)는 이벤트를 트리거해서는 안됩니다breakpoint (문자열) 중단 점이 호기심이있는 경우 테스트condition (String) 클래식 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 (문자열)으로 변환하려고 시도하십시오 (#ff0000,#f00, red, {r : 1, g : 0, b : 1}, {h : 1, s : 1, l : 0.5}).target (선택 사항, dom 요소, 기본값 : document.body)selector (문자열, 기본값 : '대상')start (Any)end (및)count (번호)format (선택 사항, 문자열, 값 : 'rgb' | 'hsl' , default : 'hsl' )input (개체) RGB 객체로 변환input (개체) HSL 객체로 변환이벤트
없음
대상 요소에 CSS를 적용하고 접두사를 자동으로 추가하십시오. 속성은 자동으로 형성됩니다.
코드를 참조하십시오
예를 참조하십시오
옵션
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}속성
없음
행동 양식
target (Dom Element | JQuery) 요소는 QuerySelector 또는 JQuery와 같은 클래식 페치로 검색됩니다.values (객체) 값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 웹 로그 분석에 정보를 보냅니다. Google 웹 로그 분석을 직접 인스턴스화해야합니다.
코드를 참조하십시오
예를 참조하십시오
옵션
{
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 (Any)label (선택 사항, Any)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 (Any)이벤트
key (문자열)value (Any) 가능한 많은 옵션에 따라 컨테이너 내부의 요소를 조정하십시오.
컨테이너의 클래스 및 속성에 따라 자동으로 구문 분석하고 크기를 조정할 수 있습니다.
작동하려면 DOM 요소 자체에 다음 속성을 지정해야합니다.
data-width | width (선택 사항, 숫자)data-height | height (선택 사항, 숫자)data-width | width (번호)data-height | height (숫자)data-fit-type (선택 사항, 문자열, 값 : 'fill' | 'fit' , default : 'fill' )data-align-x (선택 사항, 문자열, 값 : '왼쪽' | '센터' | '오른쪽' , 기본값 : '센터' )data-align-y (선택 사항, 문자열, 값 : 'TOP' | 'CENTRE' | '하단' , 기본값 : '센터' )data-rounding (선택 사항, 문자열, 값 : 'CEIL' | 'FLOOR' | 'ROUND' | 없음, 기본값 : '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 (문자열, 기본값 : '대상')container (DOM 요소)content (DOM 요소)force_style (선택 사항, 부울, 기본값 : true) 아직 설정되지 않은 경우 '위치'및 '오버 플로우'스타일 속성 추가parameters (개체)content_width (번호)content_height (번호)container_width (번호)container_height (번호)fit_type (선택 사항, 문자열, 기본값 : 채우기 , 값 : fill | fit )align_x (선택 사항, 문자열, 기본값 : 중심 , 값 : 왼쪽 | 센터 | 오른쪽 )align_y (선택 사항, 문자열, 기본값 : 중심 , 값 : 상단 | 센터 | 하단 )rounding (선택 사항, 문자열, 기본값 : CEIL , 가치 : CEIL | FLOOR | ROUND | 없음)format (선택 사항, 문자열, 기본값 : 둘 다 , 값 : 둘 다 | Cartesian | CSS )이벤트
없음
문자열을 관리하는 방법
코드를 참조하십시오
예를 참조하십시오
옵션
없음
속성
없음
행동 양식
value (문자열) 문자열이 변경되어야합니다format (문자열) 원하는 경우value (문자열) 문자열을 다듬습니다characters (문자열) 문자를 다듬습니다value (String) 많은 지원되는 언어로 부울로 현명하게 변환value (문자열) 문자열이 슬러지이벤트
없음
requestAnimationFrame의 각 프레임베이스를 트리거하는 시세를 실행하십시오.
코드를 참조하십시오
예를 참조하십시오
옵션
{
auto_run : true
}속성
start 하십시오elapsed 시간delta 시간current 현재 시간행동 양식
run (부울)은 타이머를 실행하기 시작해야합니다frames_count (번호)action (기능)after (선택 사항, 부울, 값 : true | false , default : true )는 tick 이벤트가 트리거 된 후 함수를 적용해야합니다.이벤트
time (객체) 시간 정보time (객체) 시간 정보 너비, 높이, 스크롤 상단, 왼쪽 스크롤, 스크롤 델타 등과 같은 뷰포트에 대한 정보를 제공합니다.
스크롤 및 크기 조정에서 이벤트를 트리거합니다.
성능 향상을 위해 스크롤의 호버 호버를 비활성화 할 수 있습니다
코드를 참조하십시오
예를 참조하십시오
옵션
{
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 (String) 클래식 MatchMedia로 진행하지만 부울 만 반환합니다.이벤트
viewport (객체)viewport (객체) Preferences > Browse Packages...User/ 폴더 내부의 어디서나 스 니펫을 추가하십시오BC : 팬 클래스
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : PAN 클래스 엄격한
( 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 : Pan New
new Pan . Namespace . Class ( ) ;BNC : 새 구성 요소를 pan하십시오
new Pan . Components . Class ( ) ;BNT : 새로운 도구를 팬하십시오
new Pan . Tools . Class ( ) ; dashed 버그 convert_case add_detector 메소드 none init construct 별로 바꾸십시오$ 속성을 추가하십시오p- 추가하십시오null 옵션 버그를 수정하십시오'use strict' 으로 구조를 업데이트하십시오.match_breakpoint 추가하십시오no-features 클래스를 수정하십시오get_sizes 메소드에 format 매개 변수 추가 (지원 "Cartesian", "CSS"또는 "둘 다")wait 방법을 추가하십시오 이니
