Home > スクリプト系 > JavaScript

JavaScript Archive

jQueryでフォームをすっきりとしたウィザード化するチュートリアル

http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

長いフォーム、いやですねぇ。

jQueryでフォームをウィザード化して「次へ」ボタンで次のフォームへ、というデザインが可能になるチュートリアル。

デザインの参考になるだけじゃなく、勉強にもなるね！

jQueryのUIイロイロ：TABSを使う。

昨日、TABの実装について１つのソースをメモったけど、このソース、なんか、デフォルトでスクリプトエラーでてるし；；；

ってことで、普通にjQueryのUIを使って、TABを実装することにした。

んで、その覚書。

jQueryのUIについては、いろんなサイトで紹介されているので、ぐぐって見るといい。とりあえず、みんな本家サイトの翻訳とか抽象的な同じようなネタが多いけども。。。（＾＾；

今回は、とりあえず、タブを使いたかったので、そのソースを紹介。てかメモ。

 

先に、jQuery本体とUIのソースをダウンロードしておく。

 

じゃあ、まずは、HTMLソース。
HTMLソースのHEAD内に、上記サイトで入手したjavascript２つとCSSへのリンクを貼っておく。それと、TABS用のJSソースも記述。

<head>
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”js/jquery-ui-1.7.2.min.js” type=”text/javascript”></script>
<link type=”text/css” href=”css/custom.css” rel=”stylesheet” />

<script type=”text/javascript”>
   $(function(){
    // Tabs
    $(‘#tabs’).tabs();
   });
  </script>
</head>

そして、BODY内に、タブのソースを記述。

 <!– Tabs –>
<h2>TABSの実装サンプル</h2>
<div id=”tabs”>
<ul>
 <li><a href=”#tabs-1″>タブ1</a></li>
 <li><a href=”#tabs-2″>タブ2</a></li>
 <li><a href=”#tabs-3″>タブ3</a></li>
</ul>
<div>
<div id=”tabs-1″>タブ１の内容。jQueryUIでは、色々とオプションも使える。例えば、ソース内の、
$(‘#tabs’).tabs();
この部分を、
$(‘#tabs’).tabs({selected:1});
とすると、2番目のタブがアクティブになった状態でページが開かれる。（※番号は、0から順番にインデックスを振っていくので、1番目のタブなら0、3番目のタブなら2ということになる）。いろんなことができますね～。　</div>
<div id=”tabs-2″>各コンテンツの中身は、こんな感じで適宜作成します。</div>
<div id=”tabs-3″>いろんなことができますね～。　</div>
 </div>

そして、実装した画面イメージがこれです。（タブ１が開かれています）
jQuery-UI-Example-Page

そのほかのオプションとしては、タブのコンテンツの大きさを固定にするとか。色々。THEMEROLLERを使うと、適したCSSをWEB画面上で作成して、ダウンロードすることもできる。

 

参考サイト：

http://jqueryui.com/download

http://jqueryui.com/themeroller/

http://docs.jquery.com/UI/Tabs#option-selected

jQuiry：タブですっきりとコンテンツ表示-idtabs-

http://www.sunsean.com/idTabs/

idTabs

便利なjQuiry。本当に色々できちゃうだね。

こちらのidtabsは、同じ画面内で、コンテンツをタブ切り替えできるというもの。

CSS3とjQueryで作るフラッシュライクなフォトビューアー

http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

Creating a polaroid photo viewer with CSS3 and jQuery 

こういう動きをフラッシュ離れと考えるべきか、はたまた、フラッシュには違う役割とか表現がでてきて、JSとフラッシュで棲み分けが進むと考えるべきか。

とにもかくにも、ことのところのJSやCSSは、本当に表現が熱い。昔フラッシュで高いお金を出して外注していたようなことが、さくさくっと、オープンソースでできたりするから、うれしいやら、怖いやら。

と、ごたくはともかく。

こちらは、CSS3とjQueryでポラロイド写真を机上にランダムに散らしたようなフォトギャラリーを実装するソースとデモです。写真の1枚1枚は、マウスドラッグで任意の位置に移動もできる。

こういうのは、結構すきなので、ちょっとソースを見てみることに。よくできてるなぁ。。。

最近残念なのは、IEの表現力の問題とか。なぁんか、足並みが揃わない。IEだけ。でも、国内ユーザーは、未だにIEシェアが高いので、作るほうとしては、なんだかなぁ。。。

私は、基本、作るときからIEでプレビューしてIE中心で作るんだけど、1ユーザーとしては、イライラすることも多い。
もういい加減、クロスブラウザーとか、そういうの、ナシにしてくれないかなぁ。。。プラグインとかオプションとか、違うところだけで選択肢をもてるようになればいいんだけど。

iphoneライクなパスワード入力フィールドを作るjQuery

http://css-tricks.com/better-password-inputs-iphone-style/

Better Password Inputs_ iPhone Style _ CSS-Tricks

入力すると、右側に、入力したアルファベットが1文字1文字大きく表示される。入力が間違っていないか、確認しながら、入力できるので、ユーザビリティの向上にはいいかも。

確かに、パスワードフィールドって、何を入れたかわからなくなるときがある。でも、これは、サイトの全体的なユーザビリティデザインを統一して考えないと、ここだけ凝っちゃってもな～という感は残る。

とりあえず、面白いので、あげとく。

ツカエル便利なjQueryプラグイン10選その２

http://www.queness.com/post/295/10-really-interesting-jquery-plugins

10 Really Interesting jQuery Plugins _ Queness

「本当に使える」と書いてある通り、こちらも結構パワフルな感じ。

スライドするパンくずリストなど、実用的なものも多い。

ツカエル便利なjQuaryプラグイン10選

http://www.ajaxline.com/10-useful-jquery-plugins

10+ Useful jQuery Plugins _ AjaxLine

キーボードやカラーピッカーなど。なんか面白い仕組みを、、、というときに、色々使えそう。

手軽にphpとJSを連携させるjQPie

http://projects.cyberlot.net/trac/jqpie/wiki

「jQPie」は、JavaScriptからPHPの関数を呼び出せるインタフェース提供ライブラリ。

軽量実装で、XML、HTML、json handlerをサポートしている。

サーバ側の全てのPHP関数を実行できるととんでもないことになってしまうので、あらかじめ使える関数を登録する。
こんな感じ。

$handler = new Pjq();
$handler->registerCallback(‘getarray’);
$handler->processIncoming();

ちょっと難しいけど、使いどころのありそうなライブラリ。

AJAXでLIGHTBOX的に美しく写真を表示するCOLORBOX

http://colorpowered.com/colorbox/

要は、LIGHTBOXなのだけど、おしゃれ。

バリエーションのサンプルが色々あって、使いやすいです。

colorbox-customizable-lightbox-plugin-for-jquery

jQuery lightBox plugin

http://leandrovieira.com/projects/jquery/lightbox/

jquery-lightbox-plugin

EC-CUBEでもレイアウト崩れなく、安全に使えるライトボックス。

便利です。

パンくずリスト実装色々

http://www.tomcoote.co.uk/JavaScriptCookieCrumbs.aspx

（http://coliss.com/articles/build-websites/operation/javascript/693.htmlで紹介されていた）

ユーザーが辿ってきたページの経路履歴をクッキーに保存して、その経路をパンくずリストとして書き出すタイプ

http://www.mtblue.org/pc/web/breadcrumbs.php

ディレクトリの構造を取得して、上の階層へ辿るリンクをパンくずリストとして書き出すタイプ

 

色々ありますな。

かっこいいjQueryコンテンツスライダー

http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

jquery-plugin-easy-image-or-content-slider-_-css-globe

動きがカッコイイ。

jQueryを利用していて、コンテンツがすす～っとスムーズにスライドしていく。

例えば商品ページで

プロフェッショナルなコーディングのための使えるAJAXライブラリ80選

http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/

80-ajax-solutions-for-professional-coding-_-developers-toolbox-_-smashing-magazine

jQueryでリッチなグリッドを実装する

http://www.jgari.com/?p=22

JQGRIDは、jqueryでリッチなグリッドが実装できる。

「Sigma Grid」-表組みのソートもページネーションもカバーすしてくれるオープンソース　（JSON使用）

http://www.sigmawidgets.com/products/sigma_grid2/index.html

Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェア。（データの表示に際してJSONでデータを渡す必要がある。）

参考サイト：http://www.moongift.jp/2008/11/sigma_grid/

まずカラムごとにソートができる。これは小数点や桁数をきちんと解釈した上でソートされる。セル内のデータを編集することはもちろん、ライブでバリデーションも行われる。編集されたカラムは色分けされて表示される。

テーブルについては大きさを変えることができる。さらにカラムの幅を変えることができ、長い文章の場合は「…」で省略してくれる。ページネーションにも対応し、簡易グラフ表示や印刷機能もある。

まだまだある。セルに画像やリンクを付けることができ、それはヘッダにも使える。ヘッダはグルーピングして多段にでき、ヘッダの下にテキストボックスやドロップダウンを配置（一括更新用！）もできる。フィルタリングを使ってテーブルデータを絞り込む機能があり、テキストのみならず数字に対しては以上以下といった条件指定ができる。

まだまだまだある。カラムはドラッグで移動させることができる。スキンに対応し、Vista風や中華風といったテーマが付属している。セル間における計算結果を表示する、イベント処理を感知する、メニューをつける、マウスオーバーでハイライトする、行の追加や削除処理にも対応するなどなど…とにかく多機能すぎて書ききれないほどだ。ああ、そうそう。左側のカラムを固定表示にすることもできるのだった。IDや会社名を固定に、横に長いデータをみる場合に絶賛の機能だ。

色々使えるAJAXのライブラリ集

http://www.ajaxdaddy.com/

AJAXライブラリがカテゴリごとに分類され、サンプルもあるので、比べたり吟味しながら、欲しいライブラリを探せる。

JavaScriptベースのWYSIWYGエディタ『FreeRichTextEditor』

http://www.freerichtexteditor.com/

 

【参考】その他のWYSIWYGエディタ色々
http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/

オススメ記事：jQueryを使ってAJAX/JavaScript開発を単純化

http://codezine.jp/article/detail/2907

『CodeZine』にて、「サンプルアプリケーションを作成してjQueryの概要を理解しよう」という趣旨の記事を見つけた。

jquairyは、最近WEB開発でリッチなインターフェイスを実装しようとすると、いつも出てくるけど、いざ、これって何よ？ってことになると、？だったりする。
この記事で一通りの知識を身につけておきたいところ。

jQuiryを使うと、

 $(“#sampleDiv”).css(“margin-top”, “35px;”);

なんてコードで、CSSをインタラクティブに書き換えたり。

ぜひ、お勉強して、カッチョイイページを作ってチョウダイ。

ポピュラーな10のJSフレームワーク集

http://sixrevisions.com/javascript/promising_javascript_frameworks/

jQuaryは既にみんな使ってますねぇ。
JSが好きな人やコーダーの人は、JSのフレームワークは色々面白いものを探して活用しているよう。
こういうのを集めておくと、何かインタラクティブな仕掛けをしたいサイトのときに、とても役立ちそう。（とか言いつつ、たまっていくだけのネタ帳；）

jQuiryを利用したホバーアニメーション効果色々

http://snook.ca/archives/javascript/jquery-bg-image-animations/

こちらは、デモページ。

http://snook.ca/archives/javascript/jquery-bg-image-animations/

滑らかな動作で面白い効果が色々ある。
ナビゲーションをちょっとデザインしたいときなんかに良いね。

その他のjQuiryとかCSSを使ったアニメーション効果色々。

LIGHTBOX2.0で、かっこよく画像をポップアップする！

LIGHTBOXというのはJAVASCRIPTで、要は画像のポップアップとかに使うわけだけども、クールなインターフェイスでなかなかカッコイイのですな。複数画像をグループ化して、フォトギャラリーみたいなスライドも出来る。

  1. 『ゼロからはじめるLightbox 2.0 – 簡単にWebで写真アルバム機能を
    http://journal.mycom.co.jp/articles/2007/06/14/lightbox/
    LIGHTBOXの概要と使い方が分かりやすくまとまっている。
  2. 『Lightboxスクリプトいろいろ』
    http://www.designwalker.com/2008/01/lightbox.html
    スクリプトサンプルとか。
  3. Ｌｉｇｈｔview
    http://www.nickstakenburg.com/projects/lightview/
    デザインが素敵なブランチ版
  4. 2.0をちょっと改造したひと。
    http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.html

こういうのが、色々あると、WEBのデザインインターフェイスもたのしいですね。

商品の詳細ミニイメージをメインイメージと入れ替えて拡大して見せるロールオーバー

よくわけが分からないタイトルになってしまったけど。

ECの商品の詳細ページで、メインの画像が1つあって、その他に詳細画像が3つあり、それらをマウスオーバーでメイン画像と入れ替えて大きく表示できるようにしたいとき使う。

【JavaScriptのソース】

「imagechange.js」（名前はなんでもいい）と名前をつけて、保存。

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

【HTMLのソース】

１）JavaScriptへのリンクを<head></head>に入れるか、<body></body>の一番上に入れる。

<script type=”text/JavaScript” src=”【JSへのパス/】imagechange.js”></script>

もしも、JavaScriptを別ファイルで保存することが出来ない場合は、

<script language=”JavaScript” type=”text/JavaScript”>【この間に上記のソースを入れる】</script>

として、同じようにロールオーバーを使用するページのHTMLの<head></head>に入れるか、<body></body>の一番上に入れる。

２）商品の詳細画像を並べるコードを利用したいところへ入れる。　

<!– 商品メイン画像 –>
<img src=”<【メインイメージへのパス】>” class=”mainimg” name=”mainimg” />
<!–// 商品メイン画像 –>
<!– 商品詳細画像 –>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【1つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【1つ目の小さい画像へのパス】” alt=”詳細イメージ１”  name=”img_s01″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【２つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【２つ目の小さい画像へのパス】” alt=”詳細イメージ２”  name=”img_s02″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【３つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【３つ目の小さい画像へのパス】” alt=”詳細イメージ３”  name=”img_s03″ /></a>
<!–// 商品詳細画像※3つ以上増やしたい場合は、<a></a>までを1組コピーして番号を変えればOK –>

 

作成したJavaScriptと画像ファイルを、コードで指定したディレクトリへFTPでアップロードする。

 

カラーミーショップなどのASPでは、商品の画像パスなどは、商品登録するときに自動的に生成されるため、パスを指定する際に、その画像やリンク箇所へのパスを変数で取得する必要がある。
また、テンプレートに制限があったり、FTPが使えなかったり、などで、JSを別ファイルにできないこともある。

以下、カラーミーショップの設置例。

管理メニューの『お店をつくる』→『デザイン設定をする』から、テンプレートを選び、『デザイン設定』ボタンをクリック。

１）1番目の共通テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
HTMLコードの一番上に、

<script language=”JavaScript” type=”text/JavaScript”>
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

を追加し、『更新」ボタンを押して、保存。

２）4番目の商品詳細テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
メイン画像とオプション画像のコードをロールオーバー用に書き換える。

例えば、プレーンの場合であれば、L13からL28までを下記のように変更して『更新』。

<div style=”margin-bottom:10px;”>
 <{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
</div>

<!– 商品画像その他 –>
<div>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１”  name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２”  name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３”  name=”img_s03″ /></a><{/if}>
</div>

例２。
その他、下記のようにDIVタグやSPANタグのクラスを使ってマーキングしておくと、画像の並びや背景のデザインをCSSで調整できる。

<div class=”detail_img clearFix”>
<!– 商品メイン画像 –>
 <{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
<!–// 商品メイン画像 –>
<{if $product.ot1_url != “”}>
<div class=”smallimg”>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１”  name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２”  name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３”  name=”img_s03″ /></a><{/if}>
</div>
<span class=”checkred”>＊マウスを重ねると拡大します。</span>
<{/if}>
</div>

大体こんな感じで。もし、マウスアウトしたときに、自動的に元の画像に戻って欲しくない場合は、onmauseoutの記述部分を削除すれば、OK。（onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>”　←この部分。）

インタラクティブでかっこいいフォームのインターフェイス

http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/

ｄｅｍｏ：http://web-tan.forum.impressrd.jp/e/2008/08/22/3516

普段隠れているフォームがクリックすると、びよ～んと展開するという楽しいインターフェイス。
なんかのコンバージョンは、下がりそうだけど、ログインとかしてもらうには、楽しくていいかな。

チュートリアルにもなっているので、勉強するのもいいかも。

JSでインタラクティブにグラフ表示『ProtoChart』

http://www.deensoft.com/lab/protochart/index.php

JavaScript（PROTOTYPE.JS）で図のようにグラフィカルでインタラクティブなグラフが描けます。

オープンソースのコードがダウンロードできます。

ツールチップのクールな実装サンプル色々prototip.js

http://www.nickstakenburg.com/projects/prototip2/

ツールチップは、リンクにマウスオーバーすると、ぽこっと小さく説明が出てくる、そう、あれです。
フォームの入力注意書きやヘルプなんかにも使えそうですね。
結構なバリエーションがあるので、見ているだけでも面白いです。

マウスオーバー、クリックでメニューが展開するアコーディオンUI色々

【その１】
NETTUTS – Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

AJAX＋CSSでメニューが縦に展開します。同一ウインドウでコンパクトにコンテンツを魅せたいときに。
デモあり。

【その２】
JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

こちらもAJAX＋CSSのアコーディオンメニューですが、横に展開します。＆うにゅーんとゴムを引っ張ったようなスムーススライドです。

【その３】
The CSS-Only Accordion Effect – CSSnewbie

こちらは、CSSのみで実装のアコーディオンUIです。解説も細かく（英語だけど）勉強にもなりますね。

【その他】

コンセプトは、同じですが、こんなに色々なデザインや動きがあるのね、ってくらい、色々あってどれも面白いです。

3Dイメージがくりくり回るJS　その２：VIRTUAL GADJO

http://www.virtual-gadjo.com/mooVRotatingMenu.php

マウスカーソルを合わせるとクルクル回転するメニューが作れます。
こちらの動きも洗練されていて美しいです。

くりくりイメージが回る&クリックで拡大3D Image Carousel

http://www.coswest.com/c/jquery/carousel3d/

ファイルツリー構造を表示するためのAJAX「jQuery File Tree」

http://abeautifulsite.net/notebook.php?article=58#overview

折りたたみが可能なツリー構造を表示できる。

jQueryプラグインとして動作。
IE6/7, FF2/3, Safari3, Opera9 で動作確認。

フォームのフリガナを自動入力させる 「フリガナ自動変換スクリプト／AutoRuby.js」

ホームページ制作・運営のヒント(http://ceo.sourcelab.jp/archives/97)

JavaScriptでフリガナを自動入力させることができます。
フォームの入力で漢字いれてフリガナ入れてって、結構面倒です。 

■設置の仕方
以下の2つのJavaScriptをダウンロードしてください。

prototype.js （ダウンロードページ）
auto_ruby.js　（ソースそのままダウンロード）

Head内に読み込みます。
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”auto_ruby.js”></script>

名前のフィールドのidを[name]に、フリガナのidを[ruby]にします。
ただし、フォームのあるページはUTF-8のみの対応です。
（読み込み時 charset=”Shift_JIS”で対応出来る？）

※auto_ruby.jsの上の方に、設定項目があります。
「ふりがな（ひらがな）」で表示したい場合は、var convFlag = 0;
「フリガナ（カタカナ）」で表示したい場合は、var convFlag = 1;
にして下さい。

サンプルファイル(ZIP)

ホーム > スクリプト系 > JavaScript

Pages
Recent Entries
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top