肉少なめ | Item - NP

概要

Yahoo! UIの各ファイルを読み込むためのプラグインです。他のプラグインと組み合わせて使うことを前提にしています。

ダウンロード

使用法

プラグイン・オプション

ファイルの所在

Yahoo! UIのファイルの所在です。スキンと管理画面で別個に指定できます。指定したディレクトリの直下にYahoo! UIのbuildディレクトリの中身が対応ように指定します。

Yahoo!がホスティングしているファイルを使用する場合は"http://yui.yahooapis.com/2.5.0/build/"のように指定します(Yahoo! UI ver.2.5.0の場合)。ホスティングについてはYahoo! UIの該当ページ(Serving YUI Files from Yahoo! Servers)も参照してください。

常に最小化されたファイルを使用する

"はい"にすると、最小化された.jsファイルを使用します。"いいえ"にした場合、最小化されたファイルを使用するかどうかは他のプラグインにゆだねられます。

スキンへの記述

スキンに<%YUIImporter%>と記述することで、そこに読み込み用のHTMLタグが出力されます。head要素の内部になるように記述してください。

他のプラグインからの使用法

NP_YUIImporter 0.1.0で一新されています。それより前のバージョンでの規格については述べません。

専用のイベント、"PreYUIImport"を使って読み込むファイルを指定します。

イベント"PreYUIImport"

$dataのキーと値の対応は以下のとおりです。

PreYUIImportイベントのパラメータ
キー	値
area	表示しているページの種類。skinまたはadmin。値渡し。
type	表示しているページの種類。スキンの場合はスキン・タイプ。管理画面の場合はactionのタイプ。値渡し。
component	使用するファイルの配列の配列。なるべく各配列の順序を守ろうとします。参照渡し。
before	文字列。YUIのファイルを読み込むHTMLタグの直前に出力。参照渡し。
after	文字列。YUIのファイルを読み込むHTMLタグの直後に出力。参照渡し。
prefix	現在使用されているファイルの所在。オプションを参照のこと。値渡し。

実際の方法

PreYUIImportイベントで、$data['component']に配列を追加することで読み込むファイルを指定します。

 
// 例 : Menuコンポーネントの読み込み (.jsファイルのみ)
$data['component'][] = array(
  'yahoo-dom-event/yahoo-dom-event.js',
  'container/container-min.js',
  'menu/menu-min.js',
);

使用するファイルが1つの場合、配列を使用する必要はありません。

// 例 : 
$data['component'][] = 'assets/skins/sam/skin.css';

複数のファイルが1つの配列で指定された場合、NP_YUIImporterはなるべくそれらの順序を守ろうとします。そのため、順序に依存するファイルの組み合わせにのみ配列を使うようにし、順序に依存しない組み合わせの場合は別々に追加するようにしてください。また、同じファイルが複数のファイルで必要とされている場合、そのつどそのファイルを指定してください。

// 例 : CalendarコンポーネントとButtonコンポーネントを読み込む
 
// Calendarコンポーネント
// CSSファイルの読み込み
$data['component'][] = 'calendar/assets/skins/sam/calendar.css';
// JSファイルの読み込み
$data['component'][] = array(
  'yahoo-dom-event/yahoo-dom-event.js',
  'calender/calendar-min.js'
);
 
// Buttonコンポーネント
// CSSファイルの読み込み
$data['component'][] = 'button/assets/skins/sam/button.css';
// JSファイルの読み込み
$data['component'][] = array(
  'yahoo-dom-event/yahoo-dom-event.js',
  'element/element-min.js',
  'button/button-min.js'
);

NP_YUIImporter

本文

概要