$('#form_id').submit(function(){ // // バリデーションチェックや、データの加工を行う。 // //バリデーションチェックの結果submitしない場合、return falseすることでsubmitを中止することができる。 return false; })
【jQuery】 IE/Chrome-proofな、リストボックス用インクリメンタルサーチ機能を作ってみた IEやChromeだと、リストボックスのOPTION要素をjQueryのshow()やhide()でオン/オフできないのがちょっとアレなので、最初に完全な子要素集合を取っておいて、keyup()イベントで毎回フィルターしたものに差し替えるようなロジックで実装してみた。子要素数が大きいと、メモリ使用量がちょっと心配かも。何かおかしいところがあったら指摘くだしあ(o^o^o)∩ なお、検索ボックスに全角文字を入力した際の挙動だが、以下のとおり、ブラウザによって微妙に異なる。 IE未確定の時点でも問題なく絞り込まれる。 Chrome未確定の時点でも問題なく絞り込まれる。 Firefox文字を確定させた時点で絞り込みが起きる。 Opera文字を確定させた後、IMEがキャプチャーしないキーを押
jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの 説明 たくさんのアイテムの中からひとつ選びたいというケース。 対象の名前は知ってる。でも検索するのもだるい。 単なるドロップダウンだとどこにあるかわからなくて困る。 というケースにどうぞ。 ユーザビリティメモ: jsが無効な人は恩恵を受けられないので代替手段を何とかしたほうがいいんじゃないっすかね。 ついでにmigemoっぽい検索する機能もつけてみた。 入力されたローマ字を元に正規表現作って読みデータ(ひらがな)を検索するだけ。 ちょっとかしこいハイライト機能つき。 操作: 上下キーで移動、Enterで確定、ESC or 検索窓がフォーカス失うとキャンセル。 Windows XP上のOpera 9.64、Firefox 3.0.10、IE 7.0で動作確認。
リクエストのログを記録していくときにjQueryのajax通信を使う場合は除外したかったので、サーバー側で判別する方法を調べたメモ。 環境変数のHTTP_X_REQUESTED_WITHを見れば分かるみたい。サーバーサイド(PHP)のサンプルコードは下のような感じ。 /** * Ajaxによるリクエストかどうか * * @return boolean True or False */ public function isAjax() { if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){ return true; } return false; } これで判断できるのはjQueryがajax通信をするときのリクエス
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前:CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう(たぬき暗号) アクションゲームを作ってみよう(ぬりかべ) 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで1ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り(ページング)を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
ボタンを触ったときに画像を変更させるロールオーバーは良く使いますよね。 jqueryを使っての簡単ロールオーバーする方法を紹介します。 $(function(){ $("img[src=’img/button.gif’]").mouseover(function(){ $(this).attr("src","img/button_on.gif"); }).mouseout(function(){ $(this).attr("src","img/button.gif"); }); }); 解説 $("img[src='img/button.gif']").mouseover 画像を$(“img[src=’img/button.gif’]”)で選択して、 mouseoverでマウスが画像の上にのったときに下記のイベントが実行されます。 (function(){ $(this).attr("sr
ドキュメント一覧 UIツールのドキュメント Tabs (タブ) └Slideshow plugin (タブ・スライドショー) Tooltip (ツールチップ) ├Slide effect (スライダ) └Dynamic plugin (動的エフェクト) Scrollable (スクロール) ├Autoscroll plugin (自動スクロール) └Navigator plugin (ナビゲータ) Overlay (オーバーレイ) └Apple effect (アップルエフェクト) Formツールのドキュメント Dateinput (日付入力) Rangeinput (レンジ入力) Validator (バリデータ) ツールボックスのドキュメント Flashembed (FLASH埋め込み) History (履歴) Expose (エクスポーズ処理) Mousewheel(マウスホイール
スピードのチェック方法 スピードをチェックしたい時に、使えるのがfirefoxのプラグインfirebugです。 例えば、 test()という関数のスピードを見たいときは <script type="text/javascript"> console.profile(); test(); console.profileEnd(); function test(){ $('div').css('color','#f00'); } </script> と書いてあげると、 画像の赤枠のように、 firebugのコンソール→全て→関数名(test)をみると、実行時の時間を見ることができます。 テスト結果 とあるプログラムでセレクタの違いでどう違うのか、そして、 1.3以降getElementsByClassNameが対応しているので、1.2のjqueryと1.5のjqueryの違いでテストしてみまし
毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、 「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。 分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。 困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。 最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。 テキストボックスの入力必須チェック このようなテキストボックスがある場合 <input type="text" name="hogehoge" value="" /> 以下のよう値が空かどうかを判定することで、必須チェックを行います。 if($('form input[name
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く