iGoogle風プラグイン

iGoogle風プラグイン「jGoogle」

去年仕事で作ったiGoogle風のドラッグ&ドロップ&Cookie保存の機能を汎用性を持たせてプラグインに作り変えました。
まずは以下のリンク先よりサンプルをご覧下さい。
ちなみにプラグインを作るのは初めてなので作りの甘いところは大目に見て下さい。




  • サンプル
  • ダウンロード
  • iGoogle風プラグイン:jGoogle
    基本的な機能について

    1、コンテンツの並び替え・・・コンテンツのタイトル部分をマウスで掴んでドラッグ&ドロップできます。
    2、コンテンツ高さの設定・・・コンテンツの最下部を上下にドラッグすることで高さを調整できます。
    3、コンテンツの開閉・・・コンテンツのタイトル部分右にある閉じるをクリックするとコンテンツを開閉できます。
    4、コンテンツの拡大・縮小・・・コンテンツのタイトル部分右にある拡大をクリックするとコンテンツを最大化できます。
    5、cookieへの保存・・・上記の1〜3の操作で変更した情報をcookieに保存します。ブラウザの更新ボタンを押しても変更したコンテンツの状態が保持されます。

    制限について

    プラグインとうたってますが自由度は低く、いくつかの制限があります。
    1、コンテンツの数が固定・・・javascriptの限界で動的に変数を作成できない為、コンテンツの数は固定になってしまいます。
    2、htmlソースの固定・・・html部分は決まったルールで書く必要があります。

    解説

    実際の使い方について解説します。
    まずhead部に以下のCSSファイルを読み込みます。

    <style type="text/css">
    @import "css/default.css";
    @import "css/base.css";
    </style>
    

    続いてjquery本体とjquery.ui、jquery.cookie、jquery.jgoogle.1.0を読み込みます。
    今回はjqueryとjquery.uiの読み込みにgoogleのAjaxロードを利用します。

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.4");</script>
    <script type="text/javascript">google.load("jqueryui", "1.8");</script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/jquery.jgoogle.1.0.js"></script>
    

    次にjgoogleを実行します。

    $(function() {
    	$().jgoogle();
    });
    

    ちなみにオプションの設定も可能です。jquery.jgoogle.1.0のオプションは以下になります。
    cont_w: 数値 → コンテンツの横幅を数値で指定します。
    cont_h: 数値 → コンテンツの高さを数値で指定します。
    cont_c: ‘カラー’ → コンテンツのborderカラーを指定します。
    cont_b: ‘数値’ → コンテンツのborder太さを指定します。
    cont_s: ‘borderスタイル’ → コンテンツのborderスタイルを指定します。
    holder_c: ‘カラー’ → ドラッグ先エリアの背景色を指定します。
    max_c: 数値 → 全画面表示時のコンテンツ高さを指定します。
    tit_style: ‘背景’ → コンテンツタイトルのbackgroundを指定します。
    imgpass: ‘パス’ → 画像ファイルまでのパスを指定します。
    set_html: [‘ファイル名1’,’ファイル名2’・・・] → 配列で読み込むファイル名を指定します。現状はファイル数が固定なので8個までとなっています。

    $().jgoogle({
    	cont_w: 420,
    	cont_h: 300,
    	cont_c: '#ccc',
    	cont_b: '1',
    	cont_s: 'solid',
    	holder_c: '#eee',
    	max_c: 460,
    	tit_style: '#eee',
    	imgpass: 'images/',
    	set_html: ['test1.html','test2.html','test3.html','test4.html','test5.html','test6.html','test7.html','test8.html']
    });
    

    最後にhtmlのルールを説明します。以下は基本的な構造です。

    <div id="wrapper">
    
    <div id="left_content">
    
    <div id="cont_no_1" class="contents">
    <input type="hidden" class="togglechk" value="0" />
    <div class="title">テスト1
    <div class="size_change"><img src="images/btn_top_cont_zoomin.png" /></div>
    <div class="switch"><img src="images/btn_top_cont_small.png" /></div>
    </div>
    <div class="nest_content"></div>
    </div>
    ・
    ・
    ・
    </div>
    
    <div id="right_content">
    
    <div id="cont_no_5" class="contents">
    <input type="hidden" class="togglechk" value="0" />
    <div class="title">テスト5
    <div class="size_change"><img src="images/btn_top_cont_zoomin.png" /></div>
    <div class="switch"><img src="images/btn_top_cont_small.png" /></div>
    </div>
    <div class="nest_content"></div>
    </div>
    ・
    ・
    ・
    </div>
    
    </div><!--wrapper-->
    

    ID名「wrapper」の中に左右のコンテンツエリア、ID「left_content」とID「right_content」を用意します。

    <div id="wrapper">
    
    <div id="left_content">
    </div>
    
    <div id="right_content">
    </div>
    
    </div><!--wrapper-->
    

    「left_content」と「right_content」の中にコンテンツを用意します。
    コンテンツのID名は「cont_no_」+番号とします(現状はコンテンツ数は8つまでなので1〜8の連番)。

    <div id="cont_no_1" class="contents">
    <input type="hidden" class="togglechk" value="0" />
    <div class="title">テスト1
    <div class="size_change"><img src="images/btn_top_cont_zoomin.png" /></div>
    <div class="switch"><img src="images/btn_top_cont_small.png" /></div>
    </div>
    <div class="nest_content"></div>
    </div>
    

    おまけ、コンテンツ数は8個までのしばりを入れていますが、「jquery.jgoogle.1.0.js」を直接編集すれば増やす事が可能です。方法は「jquery.jgoogle.1.0.js」の18行目〜の変数を増やすだけです。

    var cont_html_1 = $("#cont_no_1").html();
    var cont_html_2 = $("#cont_no_2").html();
    var cont_html_3 = $("#cont_no_3").html();
    var cont_html_4 = $("#cont_no_4").html();
    var cont_html_5 = $("#cont_no_5").html();
    var cont_html_6 = $("#cont_no_6").html();
    var cont_html_7 = $("#cont_no_7").html();
    var cont_html_8 = $("#cont_no_8").html();
    var cont_html_9 = $("#cont_no_9").html();
    
    var cont_no_1 = '<div id="cont_no_1" class="contents">' + cont_html_1 + '</div>';
    var cont_no_2 = '<div id="cont_no_2" class="contents">' + cont_html_2 + '</div>';
    var cont_no_3 = '<div id="cont_no_3" class="contents">' + cont_html_3 + '</div>';
    var cont_no_4 = '<div id="cont_no_4" class="contents">' + cont_html_4 + '</div>';
    var cont_no_5 = '<div id="cont_no_5" class="contents">' + cont_html_5 + '</div>';
    var cont_no_6 = '<div id="cont_no_6" class="contents">' + cont_html_6 + '</div>';
    var cont_no_7 = '<div id="cont_no_7" class="contents">' + cont_html_7 + '</div>';
    var cont_no_8 = '<div id="cont_no_8" class="contents">' + cont_html_8 + '</div>';
    var cont_no_9 = '<div id="cont_no_9" class="contents">' + cont_html_9 + '</div>';
    

    以上要望があればオプションの追加等していきたいと思います。
    また、時間があればPHPでより自由度の高いプラグインに作りかえたいと思います。


    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です