ホーム > タグ > AJAX

AJAX

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

webデザインイロイロ。マウスオーバー効果もイロイロ。

http://www.designwalker.com/2009/08/hover.html

moused

CSSやjQueryを使ったマウスオーバーの効果がイロイロ紹介されてた。

マウスオーバーってデザイン中には、忘れがち。最後のコーディングのところになって、う～ん、どうしよ？ってことが多いもの。。。

デザインのアイデアフラッシュとして◎デスネ。

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

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

idTabs

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

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

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

http://colorpowered.com/colorbox/

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

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

colorbox-customizable-lightbox-plugin-for-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

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

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

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

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

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

jQuiryを使うと、

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

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

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

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のデザインインターフェイスもたのしいですね。

MySqlのDBデータをエクセルのように書き換えるAjax＋PHP『DrasticGrid』

http://www.drasticdata.nl/DDDrasticGrid.php

データベース内の登録情報（例えば商品IDや価格など）をちょっと変更したいときに、ブラウザ上で、エクセルを編集するような操作で編集が出来るようにするツールコードです。

こちらのドラスティックシリーズ（？）には、GOOGLEMAPとのマッシュアップやタグ食らうどのツールもダウンロードできるようになっており、例えば、GOOGLEMAPで設定した位置情報に関するタグクラウドとDB情報を一緒に表示させて、その場で編集、などということも可能です。

詳しくは、サイト内のEXAMPLEを見ていただければ、なるほどな、と思っていただけるのではないでしょうか。

マウスオーバー、クリックでメニューが展開するアコーディオン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です。解説も細かく（英語だけど）勉強にもなりますね。

【その他】

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

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

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

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

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

Home > Tags > AJAX

Pages
Recent Entries
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top