2008年10月22日水曜日

(suz-php-jquery)にShadowbox.jsを採用

スズキです。

suz-php-jqueryフレームワークのダイアログ関係は、
Shadowbox.jsを利用することにしました。
http://www.mjijackson.com/shadowbox/

こんな感じで使えるようにしています。

--------【HTML】--------
<head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
  <title>Shadowbox</title>
  <script type="text/javascript"
    src="../JS/ext/jquery.js"></script>
  <script type="text/javascript"
    src="../JS/ext/shadowbox.js"></script>
  <script type="text/javascript"
    src="../JS/app/example/shadowbox.js"></script>
</head>
<body>
  <p>
    <a rel="shadowbox"
        href="../IMG/app/example/shadowbox.jpg"
        title="テスト">テスト</a>
  </p>
</body>
--------【HTML】--------
http://code.google.com/p/suz-lab/source/browse/trunk/suz-php-jquery/webapp/example/shadowbox.html

--------【JavaScript】--------
var BASE_DIR = "../JS/app/example";
Shadowbox.loadSkin(
  "SHADOWBOX", BASE_DIR
);
Shadowbox.loadLanguage(
  "ja", BASE_DIR + "/SHADOWBOX"
);
$(function(){
Shadowbox.init();
});
--------【JavaScript】--------
http://code.google.com/p/suz-lab/source/browse/trunk/suz-php-jquery/webapp/JS/app/example/shadowbox.js

"ext/shadowbox.js"は、ダウンロードページより、
--------
Adapter: jQuery
Language: None
Players: img, html, iframe, swf, flv
--------
で作成しています。

また、lang、skinはプロジェクト毎に変更するものなので、
JS/app下の任意の位置のSHADOWBOXフォルダ下に
置くようにしています。
(skin, langフォルダ別にもしていないので注意が必要です)

よし、次はPHPだ!

--
http://suz-lab.blogspot.com/

0 コメント: