KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > jQuery プラグイン Slide boxメモ

jQuery プラグイン Slide boxメモ

ちょうどこういうのやりたかったのでどんな感じで実装されてるか調べてみた。

クライアント

PHP

<?php
$("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
?>

slideBox.js

PHP

<?php
/**
* Slide Box : a jQuery Plug-in
* Samuel Garneau <samgarneau@gmail.com>
* http://samgarneau.com
*
* Released under no license, just use it where you want and when you want.
*/
(function($){
/**
* プラグインの書式
* jQueryオブジェクトにslideBoxという
* メソッドを追加してる感じかと思われる。
*
* 引数 params はオブジェクト
* default と同じプロパティが設定される。
*/
$.fn.slideBox = function(params){
// thisは$("#testZone")
// id=testZone 内のHTMLを取得
var content = $(this).html();
// デフォルトのパラメータ
var defaults = {
width: "100%",
height: "200px",
position: "bottom" // Possible values : "top", "bottom"
}
/**
* 引数あった場合は
* デフォルトのパラメータを上書き
*
*/
// extending the fuction
if(params) $.extend(defaults, params);
var divPanel = $("<div class='slide-panel'>");
var divContent = $("<div class='content'>");
/**
* $(divContent)の中身は
*
* <div class='content'>
* id=testZone 内のHTML
* </div>
*
* って感じになる。
*/
$(divContent).html(content);
/**
* $(divPanel)にクラスの追加
*
* <div class='slide-panel bottom or top'>
* </div>
*
* って感じになる。
*/
$(divPanel).addClass(defaults.position);
// $(divPanel)の横幅を設定
$(divPanel).css("width", defaults.width);
// $(divPanel)のセンタリング
// centering the slide panel
$(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");
/**
* topが指定された場合の処理
*
* <div class='slide-panel bottom or top'>
* </div>
*
* って感じになる。
*/
// if position is top we're adding
if(defaults.position == "top")
$(divPanel).append($(divContent));
// adding buttons
$(divPanel).append("<div class='slide-button'>Ouvrir</div>");
$(divPanel).append("<div style='display: none' id='close-button' class='slide-button'>Fermer</div>");
if(defaults.position == "bottom")
$(divPanel).append($(divContent));
/**
* DOMの置換
*
* <div id="testZone">
* <p>TestZone</p>
* </div>
*
* ↓
* ↓ HTMLは下記のように変更される
* ↓
*
* <div class='content'>
*
* <div class='slide-button'>Ouvrir</div> <= position=bottom の場合
* <div style='display: none' id='close-button' class='slide-button'>Fermer</div> <= position=bottom の場合
*
* <div class='slide-panel bottom or top'>
* <p>TestZone</p>
* </div>
*
* <div class='slide-button'>Ouvrir</div> <= position=top の場合
* <div style='display: none' id='close-button' class='slide-button'>Fermer</div> <= position=top の場合
*
* </div>
*
* これに対してCSSとイベントを追加していく。
*/
$(this).replaceWith($(divPanel));
// 設置したボタンにイベントを設定
// 動きは高さを変更しています。
// Buttons action
$(".slide-button").click(function(){
if($(this).attr("id") == "close-button")
$(divContent).animate({height: "0px"}, 1000);
else
$(divContent).animate({height: defaults.height}, 1000);
$(".slide-button").toggle();
});
};
})(jQuery);
?>

何となくわかった気がする。ついでにjQueryのプラグインの作り方もなんとなくわかった気がする。

気になったのは

HTMLの量が多いページだとjQueryが実行されるまで時間かかるのでその間隠したいところが出ちゃってる状態になる。

こと。実際使う場合は、 slideBoxの位置を考えるか、最初はCSSでdisplay: noneとかにしておいた方が良さそう。

参照サイト

jQueryデザインブック　仕事で絶対に使うプロのテクニック: 作者:No Date | 価格:￥ 2,940

投稿日	2009年6月 4日 03:35
カテゴリ	JavaScript
タグ	jQuery \| プラグイン
トラックバック URL	http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1158