Javascript Archive

jQueryでバーコードを生成出来るプラグインが紹介されています。

http://jqselectable.googlecode.com/svn/trunk/index.html

久々のjQueryネタです。

可変グリッドレイアウトを作るときに便利なjQueryプラグインを見つけました。
http://blog.xlune.com/2009/09/jqueryvgrid.html
で、紹介されています。

デモはこちら。
ブラウザサイズを変更するとボックスの配置が変化します。

機会があったら使ってみよう。

ブラウザでスクロールした量を知りたい機会があって、jQueryに便利関数が用意してあった。

$(window).scrollTop();

って、書くと簡単に取得できます。

サンプル
スクロールすると左上にスクロール量(px)が出ます。


以下、サンプルソース

（JS）

<script language="JavaScript" type="text/javascript">
<!--

$(window).scroll(function(){
    $("#absolute").css("top",$(window).scrollTop());
    $("#absolute").html($(window).scrollTop());
});

//-->
</script>

(HTML)

<div id="absolute" style="position:absolute;"></div>

CREEAMUさんのエントリーで、紹介されていたjQueryプラグインです。

IDEA*IDEAさんのエントリから。

jquery.timepickr

これは、今後何かに使えそう。

jQueryネタです。

最近見つけた、jQueryプラグインを3つ紹介します。

■Flip!
フリップボードをめくるような感じでブロック要素を切り替えられるプラグインです。

■CrossSlide
クロスフェード効果を使ったスライドショーが実現できるプラグインです。

■SeekAttention
画面をグレーアウトさせ、一部分のみをハイライトさせることによって、その部分を注目させるようにするプラグ印です。

SeekAttentionは結構使えるかも。

久々にjQueryネタです。

画像置換をする際、僕はいつも　text-indent:-9999px;　などでテキストを領域外へ飛ばして対応していましたが、jQIRというjQueryプラグインを使えばCSSを使わずにテキストを画像置換できます。

使い方は以下、

<script type="text/javascript">
    $(function(){
        $(".hjpg").jQIR("jpg","images/");
        $(".hgif").jQIR("gif","images/");
        $(".hpng").jQIR("png","images/");
    });
</script>

jQIR以前は、画像置換する場所のclass名、jQIR以後は順に、置換する画像のファイル形式、画像が格納されているディレクトリのパスと続きます。

<h1 id="logo" class="hgif">ロゴ</h1>

"ロゴ"というテキストを、logo.gif　という名前の画像で置換したい場合は以上のように書く。

うん、非常に簡単。

いつか、機会があったら使ってみよう。

jQuery - jQIR

phpspot開発日誌さんのブログエントリーにて紹介されてました。

Javascriptでマリオカートが出来ます。









Javascript Super Mario Kart

アイテムやコインは取れないし、コンピューターがめちゃくちゃ速いけど、Javascriptで出来てると思うとすごいですね～。

jQueryとCSSを使った、面白い動きをするナビゲーションメニューです。

アニメーションの仕方が面白いですね。

チュートリアルは以下のブログエントリーに紹介されています。
Create a Cool Animated Navigation with CSS and jQuery

デモ

]ブラウザ上で花火を打ち上げられるJavascriptです。

下記サイトでデモとダウンロードが出来ます。
http://www.schillmania.com/projects/fireworks/












上のような、パネルで花火の大きさや、色を設定できます。
【Fire!】ボタンでデモが見れます。

いろんな形の花火が実現できるのでなかなか面白いです。

最近、新しいjQueryのプラグインを見つけました。

それは、Kwicks for jQuery

ある領域をスムーズに伸縮できるプラグインです。

同じようなプラグインはMootoolsで見たことあるのですが、jQueryでは見たことありませんでした。

これを使えばなかなか、かっこいいメニューが出来そうです。

デモはこちら

window.openのJavascript文を自動生成してくれるサービスです。
widow.open()メーカー

僕はあまり使わないが、よく使う人には便利かもしれませんね。

Flesh Out of the oven jQuery Plugins

jQueryプラグイン集です。
まだ、見たことの無いものも多々あったので、1つずつチェックしてみます。
なかなか、使えるのがありそうです。

---------
雑談

最近、メタボになりつつあるわ。そろそろ走りこみするかな。

デザイナーの為のjQueryチュートリアル

jQueryの動作デモと解説をしているチュートリアルです。

卒制でjQueryは極めたと思いましたが、まだまだ知らないことがたくさんありました。

考えが甘かったです。

もっと勉強します。

表記の通りです。

下記ブログのエントリーにて紹介されています。
http://creazy.net/2008/02/sl_js.html


このブログ上でも試してみました。

昨日に引き続きjQueryネタです。

下記ブログに素晴らしいjQueryプラグインのサンプルがまとめてあります。
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

半分以上は知ってるものでしたが、なかなか魅力的なものもたくさんあります。

要チェックですね。

jQueryネタです。

パネルをスライドしたりフェードさせたり、多彩なアクションを実現できます。↓
http://www.webinventif.fr/wslide-plugin/

デモはこちら↓
シンプルデモ

エフェクト付デモ

CSSを駆使したデモ


課題提出まであと1週間。終わるかなぁ～。ガンバロ！！

jQueryを使って、ラジオボタンから値を取得するには以下のように書けば良いようです。

$("input[@name=名前]:checked").val();

nameで取得するんですね。

またいつか使うときが来るかもしれないのでメモ。

卒制まであと2週間ちょっと。。。

終わるかなぁ。

http://www.trentrichardson.com/jsonsql/

表記の通り、JSON形式で取得したデータを、SQLのようなプログラムを書いて、検索、抽出できるjQueryプラグインです。

jsonsql.query("select * from json.channel.items order by title desc",json);


上記が記述例です。

また、

jsonsql.query("select title,url from json.channel.items where (category=='javascript' || category=='vista') order by title,category asc limit 3",json);

このようにLimitやorderも使うことができます。
まさにSQL。

かなり使えそうなプラグインです。

Lightboxはprototypeベースなので、jQueryでは使えません。(最近は、jQuery版のLightboxもありますが)


Shadowboxはコアライブラリに依存されません。prototypeでもjQueryでもYUIでも使えます。
本家サイトはこちら↓
http://mjijackson.com/shadowbox/

しかも、静止画だけでなく、動画、さらにはFlashも組み込むことができます。
デザインもクールでなかなかカッコいいです。

かなり使えそう。

以前のブログで紹介しましたが、用途によっては意外と使えるじゃんと思ったのでこちらのブログでもメモっときます。

デモを見てもらえばわかるのですが、画像をマウスオーバーした際に、別の大きな画像を読み込みポイントをズームしてくれるJavascriptです。

使い方は、

まず、こちらでダウンロードし、以下のようにjsとcssを読み込みます。

<script src="your_path/jquery.js" type="text/javascript"></script>;
<script src="your_path/jquery.jqzoom.js" type="text/javascript"></script>

そして、以下のように小さい画像をsrcにclassに"jqzoom"をつけ、alt要素に大きな画像のパスを入れます。

<img src="your_path/imagename_small.jpg" class="jqzoom" alt="your_path/imagename_big.jpg" />


Javascriptには、以下のように書けば実装できます。

$(document).ready(function(){
$("img.jqzoom").jqueryzoom();
});

カスタマイズ方法は以下、

$(document).ready(function(){
$("img.jqzoom").jqueryzoom({
xzoom: 300, //zooming div default width(default width value is 200)
yzoom: 300, //zooming div default width(default height value is 200)
offset: 40, //zooming div default offset(default offset value is 10)
position: "right" //zooming div position(default position value is "right")
});
});


これ、学校の友達が卒制で使うかもしれません。なかなか、使えるPlugInですね.