pan old
1.0.0
PAN.JS（またはP.JS ）は、適切に構造化されたWebアプリケーションを迅速に開発するのに役立つライト（<40ko）および簡単なJSフレームワークです。
Webアプリケーションをコンポーネントとツールに整理できます。有用な既製のものが付属しています。 HTMLにJSファイルを含めるだけで、使用を開始します。 P.JSはまだ開発中です。アドバイスがあってもためらわないでください。
目次
P.JSには依存関係がありません（いいえ、jQueryは必要ありません）。 IE8までのすべての最新のブラウザと互換性があります。
使用しているブラウザとクラスに応じて、SRC/PolyFillsフォルダーに含まれるポリフィルが必要になる場合があります。
デフォルトのビルドには、必要なすべてのポリフィルが含まれていますが、 no-compatibilityバージョンを使用できます。
P.JSを使用する方法は2つあります。
ツールをインスタンス化することでシンプルなライブラリとして使用することも、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のような独自の名前空間を作成できます。
継承は、ディーププロパティの合併、シングルトン、defualtオプションなど、いくつかの改善があるジョンレジーグコードに基づいています。
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を拡張します。
on 、 off 、 triggerメソッドevent-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 （文字列|配列）remotingは、名前ごとに複数のブレークポイントですsilent （オプション、ブール、デフォルト：false）はイベントをトリガーしないでくださいbreakpoint （文字列）テストBreakPointがKureがアクティブであるかどうかをテストしますcondition （文字列）クラシックマッチメディアに進みますが、ブール値を返すだけですイベント
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 （String）に変換してみてください（＃ff0000、＃f00、red、{r：1、g：0、b：1}、{h：1、s：1、l：0.5}）target （オプション、dom要素、デフォルト：document.body）selector （string、default： 'to-Resize'）start （任意）end （および）count （number）format （オプション、文字列、値： 'rgb' | 'hsl' 、デフォルト： '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 （number）webkit （number）khtml （number）opera （番号）version （番号）ie （番号）firefox （番号）safari （番号）konq （number）opera （番号）chrome （番号）version （番号）windows （ブール）mac （ブール）osx （boolean）iphone （ブール）ipod （ブール）ipad （ブール）ios （ブール）blackberry （ブール）android （boolean）opera_mini （boolean）windows_mobile （boolean）wii （ブール）ps （ブール）touch （ブール）media_query （boolean）方法
なし
イベント
なし
現在のインスタンスを使用して、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 （string、default： 'to-Resize'）datas （オブジェクト）category （任意）action （任意）label （オプション、任意）value （オプション、任意）unique （オプション、文字列）は、文字列値に応じて複数回データを送信しないでください。イベント
キーボードのメソッド、プロパティ、イベントの親relative
コードを参照してください
例を参照してください
オプション
なし
プロパティ
方法
input （番号）キーコードinput （文字列|番号）キーコードまたは文字inputs （配列）キーコードおよび/または文字イベント
keycode （number）character （文字列）keycode （number）character （文字列） ユーザーがいつコナミコードを使用するかを知る↑↑↓←→←→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' 、default： 'fill' ）data-align-x （オプション、文字列、値： 'left' | 'center' | 'right' 、default： 'center' ）data-align-y （オプション、文字列、値： 'top' | 'center' | 'bottom' 、default： 'center' ）data-rounding （オプション、文字列、値： 'ceil' | 'floor' | 'round' | none、default： '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 （string、default： 'to-Resize'）container （dom要素）content （dom要素）force_style （オプション、boolean、default：true）まだ設定されていない場合は「位置」と「オーバーフロー」スタイルのプロパティを追加しますparameters （オブジェクト）content_width （number）content_height （number）container_width （number）container_height （number）fit_type （オプション、文字列、デフォルト： fill 、value： fill | fit ）align_x （オプション、文字列、デフォルト：センター、値：左|センター|右）align_y （オプション、文字列、デフォルト：センター、値：トップ|センター|ボトム）rounding （オプション、文字列、デフォルト：天井、値：天井|フロア|ラウンド|なし）format （オプション、文字列、デフォルト：両方、値：両方| cartesian | css ）イベント
なし
文字列を管理する方法
コードを参照してください
例を参照してください
オプション
なし
プロパティ
なし
方法
value （文字列）文字列format （文字列）募集ケースvalue （文字列）トリミングする文字列characters （文字列）文字value （string）サポートされている多くの言語でスマートにブール値に変換value （string）string to slugifyイベント
なし
RequestAnimationFrameに合わせて各フレームベースをイベントするティッカーを実行します。
コードを参照してください
例を参照してください
オプション
{
auto_run : true
}プロパティ
startかelapsed時間を費やしましたdelta時間currentの時刻方法
run （boolean）は、タイマーの実行を開始する必要がありますframes_count （number）action （関数）after （オプション、boolean、values： 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 （number）スクロールデルタトップleft | x （number）左のスクロールデルタdirection （オブジェクト）y （文字列）垂直スクロール方向x （文字列）水平スクロール方向方法
condition （文字列）クラシックマッチメディアに進みますが、ブール値を返すだけですイベント
viewport （オブジェクト）viewport （オブジェクト） Preferences > Browse Packages...User/フォルダー内のどこにでもスニペットを追加しますBC ：パンクラス
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS ：パンクラスの厳格
( 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 ：パン新しいコンポーネント
new Pan . Components . Class ( ) ;BNT ：パン新しいツール
new Pan . Tools . Class ( ) ; convert_caseがdashed add_detectorメソッドnone追加しませんconstructでinitを置き換えます$プロパティを追加しますp-デフォルトのクラスに追加しますnullオプションのバグを修正します'use strict'を備えた構造を更新しますmatch_breakpointを追加しますno-featuresを修正しますget_sizesメソッドにformatパラメーターを追加します（「CARTESIAN」、「CSS」または「両方」をサポート）wait方法を追加しますinit
