ページを開いたときにメッセージを表示するjQueryプラグイン

ウェブページを開いたときに注意メッセージを表示するjQueryプラグイン「jquery.opening.js」を作りました。
ページを開いたときにメッセージが表示されます。メッセージは変更できます。
「今後はこのメッセージを表示しない。」にチェックすると次回からは表示されません。クッキーを利用しています。

使い方

  1. プラグイン(jquery.opening.js)をダウンロードします。
  2. 別途、Downloads · carhartl/jquery-cookie · GitHubでjquery.cookie.jsをダウンロードします。※jQueryでcookieを使う | You Look Too Cool
  3. HTMLを書きます。後述のサンプルを参考にしてください。
  4. これらを同じフォルダに保存します。

(さらに…)

祝日に対応したカレンダーを挿入するjQueryプラグイン

JavaScriptで日本の祝日を判定する関数を書いたので、ついでにカレンダーを挿入するjQueryプラグインを書いてみました。
使い道がよく分からないですが。

プラグインです。
jquery.calendar_jp

年間カレンダーを作るサンプルです。
sample1

一か月カレンダーを作るサンプルです。
sample2

jQueryの最新版にリンクする

通常、jQueryを使うときは、公式サイトなどから「jquery.min.js」などをダウンロードして自分のサーバに置いておきます。
しかし、最近は、外部のサイトにリンクして使う方法が主流のようです。 (さらに…)

「jQuery Calculator」を日本語化

前にjQuery用プラグイン「jQuery Calculator」を紹介しました。
You Look Too Cool » 電卓として使えるjQuery用プラグイン「jQuery Calculator」
元は英語ですがドイツ語、中国語などに変換する仕組みがあります。
日本語については対応していなかったので、勝手に作ってみました。 (さらに…)

電卓として使えるjQuery用プラグイン「jQuery Calculator」

ウェブサイト上のフォームに数字を入力するためのjQuery用プラグイン「jQuery Calculator」を紹介します。

jQuery Calculator

マウスで数字を入力できるので便利です。しかも電卓と同様に計算することができ、計算結果をフォームに貼り付けることができます。
とにかく多機能でカスタマイズもいろいろできます。「こんな機能、使うのか」というのもありますが、単純にウェブサイトに設置するだけならばとても簡単にできます。

上に書いたウェブサイトに行きます。
「Download now」をクリックしてzipファイルをダウンロードします。
適当なフォルダに解凍します。
中に「calculatorBasic.html」があるので、開きます。

これで使えます。
あとは自分が設置したいウェブサイト用にアレンジすればよいでしょう。

zrssfeedでRSSを取得

jQueryプラグインの「zrssfeed」を使うと簡単にRSSを取得して表示することができます。 (さらに…)

jQueryでcookieを使う

jQueryでcookie(クッキー)を扱うにはプラグイン「jquery.cookie.js」を使うと簡単です。

Downloads · carhartl/jquery-cookie · GitHub

cookieを作る(書く)には次のようにします。cookieの名前と文字列(値)を指定するだけです。

$.cookie(名前,文字列);

有効期間は日数で指定します。指定しない場合はブラウザを終了すると削除されます。

$.cookie(名前,文字列,{expires:日数});

cookieを読むには次のようにします。

c=$.cookie(名前);

cookieを削除するには次のようにします。

$.cookie(名前,null);

jQueryプラグイン「flipCounter」

数字を「大きくて美しいアナログ表示」にするjQuery用のプラグイン「flipCounter」を使ってみました。

flipCounter 1.2 a jQuery plugin by BloggingSquared.ca

準備

まず、上のページでプラグインをダウンロードします。私は「Bare Bones」の1.2を使いました。
解凍してファイルを適当なフォルダに入れます。
例えばfcというフォルダにjs、imgというフォルダを作ります。

  • fc
    • js
    • img

jsにjquery.flipCounter.1.2.pack.jsを保存します。
imgにflipCounter-medium.pngを保存します。

そして、別のプラグインが必要になります。
danro/jquery-easing · GitHub
jsにjquery.easing.jsを保存します。

HTML

bodyの部分に次のように書きます。

<div id="counter1"><input type="hidden" name="counter-value" value="100" /></div>
<div id="counter2"><input type="hidden" name="counter-value" /></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$("#counter1").flipCounter();
</script>

最初の2行はカウンターを表示する部分です。
3行目はjQueryです。Googleから借りています。
4行目と5行目は先ほど準備したプラグインを指定しています。違うフォルダ構造の場合はここを修正します。
最後がコードの本体です。

JavaScript

上のコード本体の部分です。

$("#counter1").flipCounter();
$("#counter2").flipCounter("startAnimation", {
  number: 0,
  end_number: 99999,
  easing: jQuery.easing.easeOutExpo,
  duration: 5000
});

$("#counter1")の部分はHTMLで指定した「100」を表示するものです。動きません。
$("#counter2")の部分は「0」から「99999」までパタパタとアニメーションで表示するものです。easingで表示パターン、durationで間隔を指定します。

easingについては便利なチートシートがあります。
Easing Functions Cheat Sheet

プラグインや画像のフォルダを変える

上の例ではプラグインをjsというフォルダに保存していますが、別のフォルダに保存する場合は、

<script src={フォルダ} type="text/javascript"></script>

のフォルダの部分を適当に書き換えればよいです。

一方、画像ファイルについてはちょっと面倒です。
このプラグインはimgフォルダにある画像ファイルを読み出して使っていますが、デフォルトでは「HTMLファイルと同一のフォルダにあるimgというフォルダ」で固定です。
これと違うフォルダを使う場合は次のようにします。

$("#counter1").flipCounter({
  imagePath: "フォルダ/flipCounter-medium.png"
});
$("#counter2").flipCounter("startAnimation", {
  imagePath:"フォルダ/flipCounter - medium.png ",
    number: 0,
    end_number: 99999,
    easing: jQuery.easing.easeOutExpo,
    duration: 5000
});

jQueryでtagNameが使えない

jQueryの現時点での最新ヴァージョンは1.7.2です。
Downloading jQuery - jQuery JavaScript Library
HTMLのタグを取得するには「attr("tagName")」を使えばよいのですが、上手くいきません。
どうやらjQueryのヴァージョンによって取得できる場合とできない場合があるようです。
実際に動かして調べてみました。

version Chrome IE Firefox
1.5
1.5.1
1.5.2
1.6 × × ×
1.6.1 × ×
1.6.2 × ×
1.6.3 × × ×
1.6.4 × × ×
1.7 × × ×
1.7.1 × × ×
1.7.2 × × ×

ChromeとIEとFirefoxで調べてみました。
それも1.5では動きます。
しかし、1.6と1.7では動かないようです。ただしIEは1.6.1と1.6.2の場合は動きます。

テーブルにフィルター機能を付けるjQueryプラグイン

HTMLのテーブルにExcelのようなフィルター機能を付けようと思い、jQueryのプラグインを探したところ、見付からなかったので、自分で作ってみました。

サンプル

tablefilterサンプル

プラグイン

ダウンロードしてください。
jquery.tablefilter

使用例

<body>
<table id="mytable" border="1">
<tr><th>番号</th><th>名前</th><th></th><th>区分</th><th>所在地</th></tr>
<tr><td>1</td><td></td><td>100</td><td>A</td><td>埼玉県</td></tr>
<tr><td>2</td><td></td><td>200</td><td>B</td><td>千葉県</td></tr>
<tr><td>3</td><td></td><td>300</td><td>C</td><td>東京都</td></tr>
<tr><td>4</td><td></td><td>100</td><td>D</td><td>神奈川県</td></tr>
<tr><td>5</td><td></td><td>200</td><td>E</td><td>埼玉県</td></tr>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablefilter.js"></script>
<script type="text/javascript">
<!--
$(function () {
  $("table").tablefilter();
});
// --></script>
</body>

jQueryの本体と「jquery.min.js」と上でダウンロードした「jquery.tablefilter.js」を適当なフォルダに保存します。それに応じて「src=」の部分を書き換えてください。
「$("table").tablefilter();」と書くとそのページ内のすべてのテーブルにフィルターボタンが設置されます。
特定のテーブルだけに適用するときは、テーブルにidを設定し「$("#mytable").tablefilter();」のようにします。

新しい記事 | 古い記事

タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報