jGlycyのダウンロードから、実装方法まで
jGlycyを使用するには、まずベースライブラリのjQueryが必要になりますので、
本家のダウンロードページよりjQueryをダウンロードしてください。
続いて、jGlycyはこちらのページでダウンロードしてください
head内に外部JavaScriptファイルの読み込みを記述します。
<html> <head> <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript" src="jGlycy.js"></script> </head> <body> <!-- contents --!> </body> </html>
jGlycyとjQueryを読み込むときは、必ずjQueryを先に読み込んでください。
そうしないと、jGlycyが正しく動作しません。
正しくjQuery、jGlycyを読み込むことができれば、jGlycyを利用できる環境ができあがります。
jGlycyでは、指定タグに対してjg属性を付与することにより
jg属性で指定されたjQuery関数がそのタグに適用される仕組みになっています。
<div jg="hogehoge">hogehoge</div>
上記の例では、このdiv要素に対して、hoeghoge()を実行します。
下記の例は上記の例とほぼ同じ動作を示しています。(idから要素を拾っている部分は異なっている)
<div id="hoge">hogehoge</div>
<script type="text/javascript"><!--
$("#hoge").hogehoge();
//--></script>
複数のPluginを割り当てたい場合は、jg属性の値にカンマ区切りでPlugin名を指定します。
<div jg="hogehoge,mogemoge">hogehoge</div> //div要素に対して、hogehoge(),mogemoge()が適用される
引数を渡したい場合は、「jg:関数名」属性にkey:val形式で指定します。
<div jg="hogehoge" jg:hogehoge="a:3,b:'abc',c:1000">hogehoge</div>
「jg:関数名」で指定された値は、オブジェクトとして評価され
jg属性で指定された関数の第一引数に渡されます。 上記の例は下記の例とほぼ等しい事を示しています。
<div id="hoge">hogehoge</div>
<script type="text/javascript"><!--
$("#hoge").hogehoge({a:3,b:'abc',c:1000});
//--></script>
jGlycyは、指定関数の第一引数にしかオブジェクト形式で引数を渡すことができないため、
この形式に対応していないPluginは適用できません。
つまり
$('#hoge').hogehoge({a:'b',c:'d'})
という書式のPluginには適用できますが、
$('#hoge').mogemoge('a','b','c','c')
といった、引数を複数必要とする書式のPluginは対応できません。