小粋空間: プラグインアーカイブ

Top ＞ JavaScript ＞ jQuery ＞プラグイン [全て閉じる]

2012年4月12日

HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」

April 12,2012 12:03 AM
Tag：[jQuery, placeholder, Plugin]
Permalink

HTML5のplaceholder属性をクロスブラウザ対応にするjQueryプラグイン「jQuery-Placeholder」jQueryプラグイン「jQuery-Placeholder」を紹介します。

jQuery-Placeholder

１．基本

HTML5のplaceholder（プレースホルダー）属性は、フォームのテキストフィールドやテキストエリアに淡い色のテキストを表示する機能です。

HTML

<input type="text" placeholder="入力してください" name="foo" value="" />

実際の表示

HTML5のプレースホルダーをサポートしていないブラウザではplaceholder属性のテキストは表示されませんが、jQuery-Placeholderプラグインを利用すれば表示されるようになります。IE6などでも大丈夫です。

これで、focus()やblur()を使ってフォームを制御する手間から開放されます。

２．jQuery-Placeholderプラグインのダウンロード

「jQuery-Placeholder」のページにある、「Download」をクリック。

jQuery-Placeholder

「Download .zip」または「Download .tar.gz」をクリック。これでダウンロードが開始します。

jQuery-Placeholder

ダウンロードしたアーカイブを展開した中にあるjquery.placeholder.min.js（またはjquery.placeholder.js）を任意の位置にアップロードします。

３．jQuery-Placeholderの設定

サンプルとして、次のinput要素のplaceholder属性に設定したテキストを、未サポートのブラウザでも表示するようにします。

<input type="text" placeholder="入力してください" name="foo" value="" />

まず、jQueryとjquery.placeholder.min.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.placeholder.min.js"></script>

プラグインの起動は次のように、placeholder属性をもつ要素を対象にするようにします。

<script>
$(function(){
    $('input[placeholder]').placeholder();
});
</script>

これでプレースホルダーが未サポートのブラウザでも表示されるようになります。textarea要素も対象にする場合は次のようにします。

<script>
$(function(){
    $('input[placeholder],textarea[placeholder]').placeholder();
});
</script>

４．CSSの設定

プレースホルダのサポート／未サポートはプラグインで自動的に判断し、未サポートのブラウザの場合、placeholder属性をもつ要素にフォーカスがあたっていないときだけ、class属性値「placeholder」を自動的に付与します。

よって次のようなCSSを設定すれば、テキストを淡い表示に変更できます。

.placeholder {
    color: #777
}

Comments [0] | Trackbacks [0]

2012年4月10日

ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」

April 10,2012 1:55 AM
Tag：[FitText, jQuery, Plugin]
Permalink

ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」を紹介します。

FitText

ウェブサイトをPC・スマホ・タブレットなど色々なサイズのディスプレイに対応させるときに便利そうです。

１．サンプル

上記の配布サイト自体がサンプルになっていますが、ためしに作ってみました。

サンプル

ブラウザの幅を変更するとタイトルの「FitTextサンプル」の部分が拡大・縮小します。

以下、具体的な設定方法です。

２．FitTextのダウンロード

「FitText」のページにある、「Download on Github」をクリック。

Download on Github

「ZIP」をクリック。これでダウンロードが開始します。

Github

ダウンロードしたアーカイブを展開した中にあるjquery.fittext.jsを任意の位置にアップロードします。

３．FitTextの設定

次のHTMLを拡大・縮小の対象にしてみます。

<h1>FitTextサンプル</h1>

まず、jQueryとjquery.fittext.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>

jquery.fittext.jsの起動は次のように記述します。

<script>
$(function(){
    $("h1").fitText(1.2);
});
</script>

fitText()のパラメータのデフォルト値は「1」です。「1」よりも値を大きくすると文字の圧縮率が大きくなり、「1」より小さくすると圧縮率が低くなります。

また次のように設定すれば、最小フォントサイズと最大フォントサイズを指定することもできます。

<script>
$(function(){
    $("h1").fitText(1.2, { 
        minFontSize: '20px',
        maxFontSize: '40px'
    })
});
</script>

minFontSizeが最小フォントサイズ、maxFontSizeが最大フォントサイズです。

ここではh1要素のみを例にしましたが、対象の要素を親要素で括るときは、親要素にwidthプロパティを%指定する必要があるようです（タイトルでは「ブラウザの幅にあわせる」と書きましたが、厳密には親要素の幅にあわせて拡大・縮小します）。

<div style="width:100%">
    <h1>FitTextサンプル</h1>
</div>

%指定をすればOKなので、「100%」以外の値でも動作します。

Comments [0] | Trackbacks [0]

2012年3月27日

jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン

March 27,2012 1:55 AM
Tag：[jQuery, PersistentHeaders, Plugin]
Permalink

jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。

このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。

PersistentHeaders

１．サンプル

サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。

サンプル

２．プラグインのダウンロード

以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。

jquery.persistentheaders_0.0.1.js

以下、設定方法です。

３．HTML

HTMLを次のように記述します。

<div class="persist-area">
   <h1 class="persist-header">ヘッダー</h1>
   <!-- コンテンツを記述 -->
</div>

固定したい部分の要素にclass属性「persist-header」を設定し、コンテンツを含む全体の要素にclass属性「persist-area」を設定します。

「persist-area」の要素がページ上部にさしかかると、「persist-header」の要素がページ上部に固定されます。また、「persist-area」の内容がページ上部に消えると「persist-header」の内容も消えます。

1ページ内に複数のclass属性を設定すれば、冒頭のサンプルのような動作になります。

４．JavaScript

JavaScriptを次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.persistentheaders.js"></script>
<script>
jQuery(function() {
    jQuery('#foo').persistentHeaders();
});
</script>

オプションとして以下を用意しています。

areaName：コンテンツのclass属性値。デフォルトは「persist-area」
headerName：固定する要素のclass属性値。デフォルトは「persist-header」
slideUpSpeed：固定する要素をスライドアップで表示するときの速度。デフォルトは「0」
slideDownSpeed：固定する要素をスライドダウンで表示するときの速度。デフォルトは「0」
idHidden：固定した要素を消したくない場合は「false」または「0」を設定。デフォルトは「true」。ナビゲーションなど、ページの最後まで常に表示しておきたい場合に利用します

オプションは以下のように設定してください。

jQuery(function() {
    jQuery('#foo').persistentHeaders({
        areaName: 'foo',
        headerName: 'bar',
        slideUpSpeed: 300,
        slideDownSpeed: 50,
        idHidden: false
    });
});

５．CSS

以下のCSSをページに追加してください。

.floatingHeader {
    position: fixed;
    top: 0;
    visibility: hidden;
}

６．要素を上部に固定する仕組み

ページをロードしたときにclass属性値「persist-area」の要素を探し、その中にあるclass属性値「persist-header」のクローンを作成し、元の要素の直前に追加すると同時に、CSSで非表示にします。

スクロールを行うと、scroll()イベントでclass属性値「persist-area」の要素を検索し、スクロール位置・要素のオフセット・要素の高さを計算し、その差分で動作を決定します。

Comments [0] | Trackbacks [0]

2012年2月 6日

TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」

February 6,2012 1:55 AM
Tag：[jQuery, Plugin]
Permalink

TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。

１．サンプル

jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。

jQuery.Bottomプラグインサンプル

ページの一番下までスクロールすると自動的にコンテンツを表示します。

なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。

２．プラグインの機能

jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。

３．プラグインのダウンロード

githubのjQuery.Bottomプラグインのページよりダウンロードします（ページ左側にあるZIPをクリック）。

４．プラグインのインストール

コンテンツを表示したいページに次のような内容を設定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bottom-1.0.js"></script>
<script type="text/javascript">
$(function() {
    $(window).bottom({proximity: 0.05});
    $(window).on('bottom', function() {
        // コンテンツ表示の処理を記述
    });
});
</script>

以下、設定内容の解説です。

bottom()メソッドでは、指定したオブジェクトにbottomイベントを登録します。下の例ではwindowオブジェクトに対して登録しています。

$(window).bottom();

特定の要素に対して設定することも可能です。

$('#hoge').bottom();

オプションのproximityは、スクロールバーがページ最下部にどの程度接近したらbottomイベントを発生させるかを決めるためのものです。

$(window).bottom({proximity: 0});

Twitterで、スクロールバーがページ一番下に到達しない時点でコンテンツの読み込みが開始するのを思い出してもらえればこのオプションの役割が分かると思います。

値に「0」を設定すると、スクロールバーがページ一番下に到達したときにbottomイベントが発生します。値を大きくしていくほどページ一番下から遠い位置でbottomイベントが発生します。冒頭のサンプルでは「0.05」になっています。

さて、メインのbottomイベント処理はon()メソッドで実行すると良いでしょう。

$(window).on('bottom', function() {
    // コンテンツ表示の処理を記述
});

さらに具体的なサンプルを示します。１項の動作サンプルではコンテンツの読み込みんでいる状態を分かりやすくするよう、setTimeout()を利用しているので、実際には以下のような実装になると思います（厳密にはajax()ではなく、getJSON()などを使うと思いますが）。

$(window).on('bottom', function() {
    var obj = $(this);
    if (!obj.data('loading')) {
        obj.data('loading', true);
        $('#image').html('<img src="loader.gif" />');
        $.ajax({
            url: "test.html",
            cache: false,
            success: function(html){
                $("#hoge").append(html);
                $('#image').html('');
               obj.data('loading', false);
            }
        });
    }
});

キモとなるのは赤色の部分で、このプラグインではスクロールを上下させたときにbottomイベントが何回も発生してしまいます。そのときに処理を重複させないための制御で、最初にイベントが発生した時点でobj.dataの「loading」をtrueにすることで次の重複イベントを処理しないようにします。

ローディング画像はイベントが発生した時点で任意のエリアに表示させ、コンテンツの表示と同時に削除します。

$(window).on('bottom', function() {
        …中略…
        ('#image').html('<img src="loader.gif" />');
        $.ajax({
            url: "test.html",
            success: function(html){
                …中略…
                $('#image').html('');
            }
        });
    }
});

５．注意事項

サンプルではスクロールバーが下の方にある状態でページをリロードすると、コンテンツの表示が連続で行われてしまうため、リロードしたときにページの先頭を表示する次の制御が必要かもしれません。

$('html,body').animate({ scrollTop: 0 }, 'normal');

Twitterなどではリロード時にコンテンツを最初から読み込み直しているのでスクロールバーが消えるようですが、そういった何らかの制御が必要みたいです。

６．参考サイト

参考サイトは以下です。ありがとうございました。

Comments [2] | Trackbacks [0]

2011年12月26日

Twitter検索結果をリアルタイム表示するjQueryプラグイン「monitter」徹底解説

December 26,2011 12:55 AM
Tag：[jQuery, monitter, Plugin]
Permalink

Twitterの検索結果をリアルタイム表示するjQueryプラグイン「monitter」を紹介します。スクリーンショットは「Android」の検索結果をリアルタイム表示したものです。

「Android」の検索結果をリアルタイム表示

このプラグインはやや古いもので、現在では公式の検索ウィジェットもありますが、公式のものは日本語の設定が面倒なのとデザインが限られるので、意外にこちらの方が使いやすいかもしれません。

１．機能

Twitterの検索APIとjQueryプラグインを組み合わせてウィジェットをウェブサイトに表示し、ウィジェットに検索結果をリアルタイムで表示します。

ウィジェットは1つのページに複数設置できます。設定方法については４項以降で解説します。

２．公式サイトのデモ

公式サイトでデモを確認できるので、操作方法を紹介します。

公式サイトの「monitter」にアクセスします。

monitter

ページ左上にある「tweets containing」に検索文字列を入力して「Add Column」をクリック。

検索文字列を入力

これで検索結果が表示されていきます。

検索結果

右側に設定・停止・削除用のアイコンが表示されます。

設定画面で言語の設定（ja）もできますがうまく動かないようです。

言語の設定

「Add Column」をクリックすればカラムを複数追加できます。カラム上部をドラッグすれば順番を並べ替えることもできます。

３．サンプル

言語設定を日本にしたサンプルを作ってみました。テキストフィールドに文字を入力すれば検索結果を変更することができます。

Monitter widgetサンプル

スタイルも白背景用に見直して、スクロールバーを表示して過去の履歴を見れるようにしたので、よければCSSファイルももっていってください。

４．ダウンロード

ここからはウェブサイトへのウィジェット設置方法を解説します。

「monitter」にアクセスして、右上の「Widgets」をクリック。

monitter

「download」をクリック。

download

ダウンロードしたアーカイブを展開します。実際に利用するのは次の2ファイルです。

monitter.min.js
monitter.css

この2つのファイルをウェブサイトの任意の位置にアップロードします。

アーカイブにはsamples.htmlがあり、ここにアクセスすればサンプルの表示を確認できます。samples.htmlは同梱されているdemo.cssも呼び出しています。

５．ウィジェットの追加

ウィジェットをウェブサイトに追加するには、以下のコードをページに追加します。

<link rel="stylesheet" href="http://user-domain/monitter.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://user-domain/monitter.min.js"></script>
…中略…
<div class="monitter" title="iPhone" lang="ja"></div>

div要素のclass属性「monitter」は必須で、ここにウィジェットが表示されます。

title属性には検索文字列、lang属性に検索対象の言語を設定します。div要素を複数設定すれば複数のウィジェットを表示できます。

title属性の検索文字列はTwitterの検索API（のSearch Operators）に準じているはずなので、AND検索／OR検索／NOT検索／フレーズ検索／特殊検索が可能と思われます。

検索方法は以下のページが参考になります。

超自己満足プログラミング - Twitter検索APIメモ

６．スタイルの設定

monitter.cssをアップロードしただけの状態（他にCSSの設定がまったくない場合）では実用に耐えられる表示になりません（下）。

download

ということで、文字色は最低限設定してください。

他にスタイルを変更したい場合は、monitor.cssの内容を適宜変更するか、monitor.cssの後方に同じセレクタ・プロパティを追加して上書きしてください。参考までにmonitter.cssのポイントとなる部分にコメントをいれておきます。

.tweet /* ツイート単位の設定 */
{
display: block;
background: #333; /* ツイートコンテンツの背景 */
clear: both;
padding: .6em;
margin: .3em;
overflow: hidden;
}
.tweet imgt /* ツイートアイコンの設定 */
{
float: left;
margin-right: 1em;
border: 2px solid #222;
background: #444;
}
.tweet p.text /* ツイートコンテンツの設定 */
{
margin: 0;
padding: 0;
padding-left: 70px; /* 画像とコンテンツの間隔 */
}
.monitter  /* ウィジェットの設定 */
{
float: left;
width: 280px; /* ウィジェットの幅 */
height: 180px; /* ウィジェットの高さ */
margin: 5px;
border: 4px solid #666;
background: #666; /* ウィジェットの背景 */
overflow:hidden; /* スクロールできるようにするにはここを変更 */
}

７．時間表示の修正

デフォルトのmonitter.min.jsでは、ツイート時間が00分～09分のときに10の位が表示されないので、以下の修正を行うことを推奨します。ファイルが圧縮されているので分かりにくいですが、変更前の文字列で検索して、該当部分をまるっと置き換えてください。

変更前

var thedatestr=thedate.getHours()+':'+thedate.getMinutes();

変更後

var min='00'+thedate.getMinutes();min=min.substr(min.length-2,2);var thedatestr=thedate.getHours()+':'+min;

Comments [2] | Trackbacks [0]

2011年12月 8日

jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法

December 8,2011 12:33 AM
Tag：[jQuery, Lightbox]
Permalink

拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。

jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。

jQuery lightBox plugin

１．問題点

jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。

対処前の拡大画像（ブラウザの幅を超えて拡大）

本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。

対処後の拡大画像

２．jquery.lightbox-0.5.jsの修正

jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、24行目あたりに赤色の2行を追加します。

…前略…
(function($) {
    /**
     * $ is an alias to jQuery object
     *
     */
    $.fn.lightBox = function(settings) {
        // Settings to configure the jQuery lightBox plugin how you like
        settings = jQuery.extend({
            maxWidth : 0,
            maxHeight : 0,
            // Configuration related to overlay
            …後略…

同様に、195行目あたりに赤色の9行を追加します。

…前略…
function _set_image_to_view() { // show the loading
    // Show the loading
    $('#lightbox-loading').show();
    if ( settings.fixedNavigation ) {
        $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    } else {
        // Hide some elements
        $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    }
    // Image preload process
    var objImagePreloader = new Image();
    objImagePreloader.onload = function() {
        $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
        // Perfomance an effect in the image container resizing it
        if ( settings.maxWidth && objImagePreloader.width > settings.maxWidth ) {
            objImagePreloader.height = objImagePreloader.height * (settings.maxWidth / objImagePreloader.width);
            objImagePreloader.width = settings.maxWidth;
            jQuery('#lightbox-image').css('width', settings.maxWidth + 'px');
        } else if ( settings.maxHeight && objImagePreloader.height > settings.maxHeight ){
            objImagePreloader.width = objImagePreloader.width * (settings.maxHeight / objImagePreloader.height);
            objImagePreloader.height = settings.maxHeight;
            jQuery('#lightbox-image').css('height', settings.maxHeight + 'px');
        }
        _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
        //    clear onLoad, IE behaves irratically with animated gifs otherwise
        objImagePreloader.onload=function(){};
    };
    objImagePreloader.src = settings.imageArray[settings.activeImage][0];
};
…後略…

修正が完了したら、元のディレクトリに上書き保存してください。

３．jquery.lightbox実行部分の修正

jquery.lightboxを実行するときに赤色のオプションを追加します。指定した数値の単位はpxで、このサイズが画像拡大時の最大幅（または高さ）になります。

$(function(){
    $('.lightbox').lightBox({
        maxWidth: 800,
        maxHeight: 800,
    });
});

幅だけを制限したい場合はmaxWidthのみを、高さだけを制限したい場合はmaxHeightのみを記述してください。両方記述した場合、幅の制限が優先されます。

４．参考サイト

参考サイトは下記です。ありがとうございました。

jquery lightbox で拡大画像の幅を指定する

Comments [0] | Trackbacks [0]

2011年11月29日

テーブルを直接編集できるjQuery.TableEditorプラグイン

November 29,2011 12:55 AM
Tag：[jQuery, TableEditor]
Permalink

テーブルを直接編集できるようにするjQuery.TableEditorプラグインを紹介します。

１．サンプル

以下のリンク先にサンプルを用意しました。jQuery.TableEditorプラグインの動作を確認できます。

サンプル

「編集」をクリックすれば、テーブルのセルがテキストフィールドに切り替わります。

サンプル

「保存」をクリックすれば、テキストフィールドに入力した値がテーブルに表示されます。入力した値は保存時に起動する関数を利用してデータベースやファイルに保存できます。

２．プラグインのダウンロード

TableEditorのページから「tableEditor」と「tableSorter」をダウンロードします。

TableEditor

３．jquery.tableEditor.jsの修正

ダウンロードしたjquery.tableEditor.jsはjQueryの最新バージョン（2011年11月現在では1.7.1）では正常に動作しないため、以下の2ヶ所を修正します。

変更前

…前略…
jQuery.editRow = function(link, tid) {
  …中略…
  var action = (jQuery(link).is('.tsToggleEdit')) ? 'save' : 'edit';
  var row = jQuery("../../td",link);
  var key = jQuery(o.ROW_KEY_SELECTOR,row).text();
  …中略…
  if (action == 'edit') {
    row.each(function(i) {
      if (fRow.index(this) < 0)
        …後略…

変更後

…前略…
jQuery.editRow = function(link, tid) {
  …中略…
  var action = (jQuery(link).is('.tsToggleEdit')) ? 'save' : 'edit';
  var row = jQuery("td",jQuery(link).parent().parent());
  var key = jQuery(o.ROW_KEY_SELECTOR,row).text();
  …中略…
  if (action == 'edit') {
    row.each(function(i) {
      if (fRow.index(this) < 1)
        …後略…

４．設定

テーブルを編集できるようにするには、JavaScriptを次のように設定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.tableEditor.js"></script>
<script type="text/javascript">
$(function() {
    $("#editableTable").tableEditor({
        EDIT_HTML: '（編集）',
        SAVE_HTML: '（保存）',
        FUNC_PRE_EDIT: 'preEdit',
        FUNC_POST_EDIT: 'postEdit',
        FUNC_PRE_SAVE: 'preSave',
        FUNC_UPDATE: 'updateTable'
    });
});
function preEdit(o) {
  // alert('FUNC_PRE_EDIT called');
}
function postEdit(o) {
  // alert('FUNC_POST_EDIT called');
}
function preSave(o) {
  // alert('FUNC_PRE_SAVE called');
}
function updateTable(o) {
  // alert('FUNC_UPDATE called');
}
</script>

指定したtable要素のエレメントに対してtableEditor()を実行します。

$("#editableTable").tableEditor({ ... });

tableEditor()の主なパラメータの意味は次の通りです。

EDIT_HTML：保存後の編集用のリンクテキスト
SAVE_HTML: 編集時の保存用のリンクテキスト
FUNC_PRE_EDIT：編集前に起動する関数名を指定
FUNC_POST_EDIT：編集開始後に起動する関数名を指定
FUNC_PRE_SAVE：保存前に起動する関数名を指定
FUNC_UPDATE：保存後に起動する関数名を指定

table要素は次のように設定します。

<table id="editableTable">
  <thead>
  <tr>
    <th name="ID" class="pvV pvNumber">ID</th>
    <th id="name" name="first" class="pvV pvEmpty" >商品名</th>
    <th id="price" name="last" class="pvV pvEmpty">価格</th>
  </tr>
  </thead>
  <tbody>
    <tr><td><key>1</key><a href="#" class="tsEditLink">（編集）</a></td><td>あああ</td><td>1000</td></tr>
    <tr><td><key>2</key><a href="#" class="tsEditLink">（編集）</a></td><td>いいい</td><td>3000</td></tr>
    <tr><td><key>3</key><a href="#" class="tsEditLink">（編集）</a></td><td>ううう</td><td>200</td></tr>
    <tr><td><key>4</key><a href="#" class="tsEditLink">（編集）</a></td><td>えええ</td><td>500</td></tr>
  </tbody>
</table>

tableのid属性にはtableEditor()を実行するエレメントを設定します。また、一番左側のtd要素に、次のリンクを設定します。

<tr><td><a href="#" class="tsEditLink">（編集）</a></td>～</tr>

class属性値に「tsEditLink」を設定します。この属性値はtableEditor()のオプションに「EVENT_LINK_SELECTOR」を設定することで変更できます。

また、サンプルのように編集リンク部分にkey要素を指定すれば、編集用リンクと併せて値を設定することができるようです。

<tr><td><key>1</key><a href="#" class="tsEditLink">（編集）</a></td>～</tr>

５．テーブルに入力した値の取得

テーブルに入力した値を取得には、保存時に起動する関数を使って次のように記述します。

function updateTable(o) {
    var data = o.row[1].innerHTML;
    // dataの値をデータベースやファイルに保存
}

配列o.rowのインデックスはテーブルの列を指定します。一番左の列（td要素）の内容がインデックス「0」に保存されています。保存時にデータベースやファイルにアクセスすれば、変更した値を保存させることができます。

以上です。他にもソートや行追加などの機能がありますが、これらについては別途エントリーします。

Comments [0] | Trackbacks [0]

2011年8月25日

jQuery Listfolderプラグイン v0.0.5

August 25,2011 12:55 AM
Tag：[jQuery, Listfolder, Plugin]
Permalink

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインをバージョンアップしました。

１．変更点

これまでのバージョンでは、次のようにタイトルとなる要素に隣接したコンテンツのみしか折りたたみを許容していませんでした（dt要素がタイトル、dd要素全体が折りたたみ対象）。

<dt class="sidetitle" id="hoge">最近の記事</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

今回のバージョンアップで、タイトルから隣接していない要素でも折りたたみを指定できるようになります。

サンプル（タイトルをクリックすれば本文を折りたたみます）

２．設定方法

次のようなマークアップを想定します。h1要素のタイトルをクリックしたら本文があるdiv要素全体を折りたたむようにします。

<header>
  <h1>モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div>
  本文
</div>

折りたたみを設定するには、まずh1要素のclass属性に「content-title」、id属性に「title1」を設定します。

<header>
  <h1 class="content-title" id="title1">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div>
  本文
</div>

次に本文のdiv要素のid属性に「content1」を設定します。

<header>
  <h1 class="content-title" id="title1">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div id="content1">
  本文
</div>

あとは、listfolder起動時のオプションに「sidebarClass:'content-title'」「specifyID:1」を設定します。

jQuery(function() {
    jQuery('body').listfolder({
        sidebarClass: 'content-title',
        specifyID: 1
    });
});

この設定により、プラグインの動作としては次のようになります。

ページ内のclass属性値「content-title」の要素を検索
検索した要素のid属性値を取得して「title」を除去して数値を取得
id属性値「content+取得した数値」の要素を探して折りたたみ

折りたたむ要素が1ページ内に複数ある場合はid属性値の数字をインクリメントして設定してください。ここでは数値で示していますが、文字列でもOKです。

<header>
  <h1 class="content-title" id="title1">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div id="content1">
  本文
</div>
 
<header>
  <h1 class="content-title" id="title2">モバイルサイトオープン</h1>
  <div>
    <span>投稿日:2011年8月24日</span> <span>作成者:admin</span>
  </div>
</header>
<div id="content2">
  本文
</div>

ブログツールを利用していれば、数値の部分は記事IDを適用できると思います。

３．ダウンロード

jQuery listfolderプラグインは以下のリンクからダウンロードしてください。動作サンプルもダウンロードページにあります。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン

Comments [0] | Trackbacks [0]

2011年4月21日

jQuery Listfolderプラグイン v0.0.4（折りたたみマーク表示機能追加）

April 21,2011 1:55 AM
Tag：[jQuery, Listfolder, Plugin]
Permalink

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインをバージョンアップしました。

１．変更点

次のように折りたたみマークを設定できるようにしました。これにより、Listfolderプラグインだけでサイドメニューの色々な折りたたみが実現できるようになります。

折りたたんだ状態

開いた状態

折りたたみ状態はクッキーで保持されます。

２．設定方法

折りたたみマークは、予め次のような(X)HTMLマークアップを追加します（赤色部分）。a要素のclass属性に対し、デフォルトの値と「mark」という値の2つを設定してください。このa要素の次の要素（ここではul要素）が折りたたみ対象になります。

<dd class="side" id="categories">
  <ul>
    <li><a href="cat1/" title="">お知らせ</a> [4] <a href="javascript:void(0)" id="cat0" class="sidetitle mark"></a>
      <ul>
        <li>イベント</li>
        <li>ニュース</li>
      </ul>
    </li>
    <li><a href="cat2/" title="">日記</a> [8] <a href="javascript:void(0)" id="cat1" class="sidetitle mark"></a>
      <ul>
        <li>旅行</li>
        <li>食事</li>
      </ul>
    </li>
  </ul>
</dd>

折りたたみマークを変更したい場合、初期化オプションに「openMark」「closeMark」を設定してください。

jQuery(function() {
    jQuery('#box').listfolder({
        openMark: '▽',
        closeMark: '△',
    });
});

３．ダウンロード

jQuery listfolderプラグインは以下のリンクからダウンロードしてください。動作サンプルもダウンロードページにあります。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン

Comments [0] | Trackbacks [0]

2011年3月 8日

JavaScriptでデータをダンプする「jQuery Dumpプラグイン」

March 8,2011 1:55 AM
Tag：[Dump, jQuery, Plugin]
Permalink

PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。

jQuery Dump

１．サンプル

jQuery Dumpを使ってデータをダンプするには次のように設定します（青色部分）。

<pre id="dump"></pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dump.js"></script>
<script type="text/javascript">
    $(function(){
        var obj = {
            hubba: "Some string...",
            bubba: 12.5,
            dubba: ["One", "Two", "Three"]
        }
        $("#dump").append($.dump(obj));
    });
</script>

実行結果

Object {
     hubba: "Some string..."
     bubba: 12.5
     dubba: Array (
          0 => "One"
          1 => "Two"
          2 => "Three"
     )
}

次のように、要素を指定したデータダンプも可能です（青色部分）。

<p>Hubba <span>bubba</span> dubba</p>
<pre id="dump"></pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dump.js"></script>
<script type="text/javascript">
    $(function(){
        $("#dump").append($("p").dump());
    });
</script>

実行結果

jQuery Object {
     0 = DOMElement [
          nodeName: P
          nodeValue: null
          innerHTML: [
               0 = String: Hubba
               1 = DOMElement [
                    nodeName: SPAN
                    nodeValue: null
                    innerHTML: [
                         0 = String: bubba
                    ]
               ]
               2 = String: dubba
          ]
     ]
}

２．返却値の型

このプラグインで返却可能な型は次の通りです。

Strings
Numbers
Booleans
Dates
Arrays
Objects
jQuery Objects
RegExp
Errors
DOMElements
Functions

３．ダウンロード

ページの下にある「View all releases」をクリック。

jQuery Dumpプラグイン

「jquery.dump.js.txt」を右クリックして「jquery.dump.js」というファイル名で保存します。

jQuery Dumpプラグイン

Comments [0] | Trackbacks [0]

2011年2月25日

jQuery listfolderプラグイン v0.0.3（折りたたみ初期状態設定機能追加）

February 25,2011 2:55 AM
Tag：[jQuery, Listfolder, Plugin]
Permalink

jQueryでサイドメニューの折りたたみを実現するjQuery listfolderプラグインをバージョンアップしました。

１．追加機能

v0.0.2までは、リストがすべて折りたたまれた状態でしか表示されませんでした。v0.0.3では折りたたみを開いた状態で表示できるよう、プラグインオプションで設定できるようにしました。

v0.0.2までの初期状態（すべて閉じた状態で表示）

v0.0.3の初期状態（指定したリストを開いた状態で表示）

特定のリストを開いた状態にするには、次のようにinitOpenオプションを設定します。

<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder({
        initOpen: ['aaa','ddd','fff'],
    });
});
</script>

オプションの値には、開いた状態で表示したいリストのid属性値を配列で設定します。なお、折りたたみ状態がクッキーに保存された時点で、そのリストに対する初期状態は無効になります。

また、オプション「sidebar_class」の名称を「sidebarClass」に変更しました。

２．ダウンロード

jQuery listfolderプラグインは以下のリンクからダウンロードしてください。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン

Comments [0] | Trackbacks [0]

2011年2月23日

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン

February 23,2011 2:55 AM
Tag：[jQuery, Listfolder, Plugin]
Permalink

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインを紹介します。同じようなプラグインはすでに存在すると思いますが、勉強がてら作ってみました。

１．機能

このプラグインを利用すれば、サイドメニュータイトルをクリックすることで、リストの折りたたみが簡単にできるようになります。

折りたたみ機能だけであればjQueryを数行書けば実現できますが、このプラグインのウリは折りたたみ状態をクッキーに保持することです。クッキーに保持するので、リロードや他のページに移動しても折りたたみ状態が初期状態に戻ることはありません。

動作は以下の配布ページで確認できます。配布ページのサイドメニュータイトルをクリックすれば折りたたみを行えます。

jQuery listfolder plugin

以下、インストールと利用方法を説明します。

２．プラグインのダウンロード・インストール

Listfolderのページにある「jquery.listfolder_0.0.1.js（バージョンは2011年2月現在）」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.listfolder.jsとします。

プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

折りたたみを行いたいページに以下の内容を設定します。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfolder.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder();
});
</script>

#boxの部分は、折りたたみを行いたいリストを包含している要素やid属性など、何でも構いません。

３．(X)HTMLマークアップ

Listfolderプラグインは、次のような(X)HTMLマークアップを想定しています。サンプルはdt/dd要素を用いていますが、div要素やul/li要素でも構いません。メニュータイトルのclass属性・id属性は必須です。また、メニュータイトルのclass属性は統一してください。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

４．オプション

listfolderプラグインは、次のオプションを用意しています。

sidebarClass:メニュータイトルのclass属性値
time:折りたたみスピード。デフォルトは0
initOpen:初期状態を開いた状態にしたいリストのid属性値を配列で指定。デフォルトなし

設定例

jQuery(function() {
    jQuery('#box').listfolder({
        sidebarClass: 'hoge',
        time: 1000,
        initOpen: ['bbb','ddd','fff'],
    });
});

Comments [5] | Trackbacks [0]

2010年12月16日

jQueryでギャラリーを実現するGalleryboxプラグイン

December 16,2010 2:22 AM
Tag：[Gallerybox, jQuery]
Permalink

jQueryでギャラリーを実現するGalleryboxプラグインを紹介します。

このプラグインを利用すれば、サムネイル画像をクリックすることでメインの画像をフェードイン・フェードアウトで入れ替えてくれます。またオプション設定により、メイン画像とlightboxの連携、あるいは画像タイトルやタイトルリンクも切り替えてくれます。

動作は以下の配布ページで確認できます。

Gallerybox

以下、インストールと利用方法を説明します。

１．プラグインのダウンロード・インストール

Galleryboxのページにある「jquery.gallerybox_0.0.1.js（バージョンは2010年12月現在）」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.gallerybox.jsとします。

２．(X)HTMLマークアップ

このプラグインでは次の(X)HTMLマークアップが必要です。

メイン画像を括る要素のid属性値（必須）：gallery_main
サムネイルを括る要素のid属性値（必須）：gallery_thumbnail
メイン画像のタイトル（オプション）：任意のclass属性名

次のようなマークアップになります。

<h1 class="title">foo</h1>
<div id="gallery_main">
  <a class="lightbox" href="http://.../images/foo.jpg"><img src="http://.../images/foo_thumbnail.jpg" alt="foo" title="view slideshow" /></a>
</div>
<div id="gallery_thumbnail">
  <ul>
    <li class="start"><a href="http://.../a.html" title="a"><img src="http://.../images/a_thumbnail.jpg" class="asset-img-thumb" alt="a" title="Change to a" /></a></li>
    <li><a href="http://.../b.html" title="b"><img src="http://.../images/b_thumbnail.jpg" class="asset-img-thumb" alt="b" title="Change to b" /></a></li>
    <li><a href="http://.../c.html" title="c"><img src="http://.../images/c_thumbnail.jpg" class="asset-img-thumb" alt="c" title="Change to c" /></a></li>
  </ul>
</div>

３．プラグインの設定

(X)HTMLマークアップに次の内容を追加します。jQueryはscript要素で事前に読み込んでください。

<script type="text/javascript" src="http://user-domain/jquery.gallerybox.js"></script>
<script type="text/javascript">
$(function() {
    $('#box').gallerybox();
});
//]]>
</script>

「#box」の部分は、２項のマークアップを括っているid属性値やclass属性値など、なんでも大丈夫です。

４．JSONデータ

このプラグインでは、サムネイルをクリックしたときにメイン画像に拡大画像を表示するため、次のJSONデータが必要です。

var obj = {"item":[
    {"alt":"Wine",
     "title":"Wine",
     "url":"http://.../images/a_lightbox.jpg",
     "slideshow":1,
     "thumbnail":"http://.../images/a.jpg",
     "content":'<a class="lightbox" href="http://.../images/a_lightbox.jpg"><img src="http://.../images/a.jpg" alt="a" /></a>'},
    {"alt":"Coffee",
     "title":"Coffee",
     "url":"http://.../images/b_lightbox.jpg",
     "slideshow":1,
     "thumbnail":"http://.../images/b.jpg",
     "content":'<a class="lightbox" href="http://.../images/b_lightbox.jpg"><img src="http://.../images/b.jpg" alt="b" /></a>'},
]}

各キーの意味は次の通りです。かなり複雑になっているので次バージョン以降ですっきりすることを期待しています。

content：メインエリアに表示する内容
thumbnail：メインエリアに表示する画像のURL（urlと同じ内容でも構いません）
title：h1要素のタイトルに表示する文字列
link：h1要素のタイトルリンク
slideshow：lightboxを併用するときに「1」を設定
url：メイン画像から元画像（lightbox表示または直リンク）へリンクするときのURL

５．オプション

GalleryBox起動時に、次のオプションが設定可能です。

fade：メイン画像のフェードアウト時の秒数（ms）
fadeTo：メイン画像のフェードインの秒数（ms）
link：メイン画像のh1要素などのタイトルリンクの利用有無（0/1）
title：メイン画像のh1要素などのタイトルの利用有無（0/1）
title_class：メイン画像のh1要素などを使うときのclass属性値
lightbox：lightboxの利用有無（0/1）
lightboxURL：lightboxを利用するときのimageディレクトリまでのURL

設定例は次の通りです。

$('#box').gallerybox({
    fade: 600,
    fadeTo: 1200,
    lightbox:0,
    link:0,
    title:0,
    title_class:'.main-entry-header',
    lightboxURL:'http://user-domain/lightbox/'
});

Comments [0] | Trackbacks [0]