top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_655

jQueryものにする計画:jQueryをもっと確実に使い生かすことができるための、まずひとつ ・・・ 【JavaScript】

 2009-01-26
 jQuery、もうたくさんの恩恵を受けていますね。
 最近
 ・jQuery:1.3 出ましたねぇ。驚いたことにこれまで2人でやってたんだって!?今後運営拡大するらしい。当たり前だよな ・・・ 【JavaScript】
  ということで、ますます「よろしく」なっているようで

 一度ちゃんと「使いこなす」ための学習が必要だ
 と考えておりました。

 そこで、私が見つけた方法・・・

海外の「jQuery」チュートリアルサイトを実践する

 ?なぜ海外、とお思いでしょうが
  ・国内にも優れたチュートリアルはあるのですが、
   国内のものであれば、そのまま
   ・読んで
   ・カット&ペーストして
   ・試して ・・・ 終わり なのが

  ・海外だと
   ・英語音痴が幸いして
    ・よくわからない
     > よく調べる
    ・不安な記述
     >> より詳細に調べる

  となるのです。

 では実践。

 ? あれ、まてよ。

 でも、その記録をここに詳細に載せたものは
 そういう意味では、みなさんの意味のあるものに
 なるのだろうか? 矛盾。

 ま、ここを見られている方には、釈迦説法な内容ではありますが・・・

Changing Form Input Styles on Focus with jQuery
Changing Form Input Styles on Focus with jQuery jQuery を利用して
 フォーム上のテキストボックスなど
 input オブジェクトに
 フォーカスしたときの見直し
 ・・・ですね


 ここのチュートリアルは
 ・とてもわかりやすく
 ・流れも追いやすいので お薦めです。

 ◎jQuery を利用してフォーム見直し:その1

  追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
jQuery を利用してフォーム見直し:その1
**************************************************

 ■最初に「完成形」を示してくれる
  最初に「完成形」を示してくれる

  ・通常はテキストが表示されていて
   この例では「Type sonmething here」
   > マウスでクリックし、
     フォーカスが移ると 入力状態になる
   というものですね。


 ■ステップ1 - 基礎(準備)
  ・最初に入力用のフォームを用意する ・・・ と。
<form>  
<input name="status" id="status" value="ここに何か入れてみてください" type="text"/>
<input value="Submit" type="submit"/>
</form>

 ・"ここに何か入れてみてください" という文字列を
  デフォルトの value として入れておく
 ・これが、フォーカスを持っていない場合に標準で表示される と。

 ■ステップ2 - CSS(の用意)
  ・動きを制御するCSS を用意する
<style type="text/css">
#status{
width:50%;
padding:10px;
outline:none;
height:36px;
}
.focusField{
border:solid 2px #73A6FF;
background:#EFF5FF;
color:#000;
}
.idleField{
background:#EEE;
color: #6F6F6F;
border: solid 2px #DFDFDF;
}
</style>

 ・ドキュメントの一部に利用するので、サンプルの
  * や body 部分は無し

  ・#status で id参照するスタイルを設定し
  ・フォーカス受けたときと
  ・デフォルト(フォーカス無い状態)の
   スタイルを class参照されるよう用意

 ■ステップ3 - jQueryを使う
  ・jQueryのライブラリを利用して
   ・フォーカスを受けている時とそうでない時を操作する。
  ・JavaScriptの記述はこんな感じ
<script type="text/javascript">
$(document).ready(function() {
$('input[type="text"]').addClass("idleField"); // *1
$('input[type="text"]').focus(function() { // *2
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() { // *3
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
</script>

 ※内容の解説がある

  ◇(*1)すべての「text」インプットオブジェクトに
    "idleField" というクラスを追加設定している。
  ◇(*2)フォーカスを与えるメソッド「focus」 と
   (*3)フォーカスをはずすメソッド「blur」 それぞれで
    状態を設定変更する(クラスを付け替える)


 ■完成
  ・こんな感じだ。簡単だなぁ。

 ■実用 へ
  ・このブログの右上
   「キーワード検索ボックス」にもこの
   仕組みを加える

   「キーワード検索ボックス」

    ▼(こうなった)

   仕組みを加える

  ※ちなみに この「創るmetaboy」ブログでは
   prototype.js も併用しているため、上記JavaScriptは
   $ の前に j を付けて j$ としえいます。
   ( >> 参照 )
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/655-98e87d6a
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。