Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【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 でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう（たぬき暗号） アクションゲームを作ってみよう（ぬりかべ） 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで１ラインオセロゲーム ブラウザ全体をブロックしてみる 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
スピードのチェック方法 スピードをチェックしたい時に、使えるのが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の違いでテストしてみまし
jQueryで指定ユーザーの最新のYoutube動画を表示する方法 最近では自社のWebサイトにYoutube動画を載せたいといったケースが増えていますね。動画単体だったら公式の埋め込みコードで簡単に表示させることができますが、更新が頻繁にあるとそのつどWebサイトの更新をしなくてはいけないので面倒です。 そこでこの記事ではjQueryで自動的に最新動画を取得する方法をご紹介します。 投稿日2012年01月19日 更新日2015年11月05日
毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、 「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。 分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。 困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。 最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。 テキストボックスの入力必須チェック このようなテキストボックスがある場合 <input type="text" name="hogehoge" value="" /> 以下のよう値が空かどうかを判定することで、必須チェックを行います。 if($('form input[name
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
