jQuery plugin: ‘autoResize’ - James Padolsey
I remember googling for something of this nature a while ago but all I found were countless attempts using the cols and/or rows attribute of the textarea, thus making it pretty useless if you weren’t using a fixed-width font. Inspired by Jason Frame’s method, I’ve created an animating ‘autoResize’ jQuery plugin. Although it was inspired by his plugin it has a few slight differences, most notably t
【jQuery】 IE/Chrome-proofな、リストボックス用インクリメンタルサーチ機能を作ってみた: RemovableType
【jQuery】 IE/Chrome-proofな、リストボックス用インクリメンタルサーチ機能を作ってみた IEやChromeだと、リストボックスのOPTION要素をjQueryのshow()やhide()でオン／オフできないのがちょっとアレなので、最初に完全な子要素集合を取っておいて、keyup()イベントで毎回フィルターしたものに差し替えるようなロジックで実装してみた。子要素数が大きいと、メモリ使用量がちょっと心配かも。何かおかしいところがあったら指摘くだしあ(o^o^o)∩ なお、検索ボックスに全角文字を入力した際の挙動だが、以下のとおり、ブラウザによって微妙に異なる。 IE未確定の時点でも問題なく絞り込まれる。 Chrome未確定の時点でも問題なく絞り込まれる。 Firefox文字を確定させた時点で絞り込みが起きる。 Opera文字を確定させた後、IMEがキャプチャーしないキーを押
jQuery イベントを設定する
jQueryは非常にコンパクトで多機能なJavaScript/Ajaxライブラリです。サイズは16KB弱と非常にコンパクト。サイズが小さいだけでなく記述方法も短くすむのも利点の１つです。prototype.jsや他のライブラリでは繰り返し処理をしてイベントを設定したりするのですがjQueryは、その繰り返し処理を記述する必要が、ほとんどないため非常にコンパクトにスクリプトを記述することができるわけです。また、prototype.js同様に$()でオブジェクトにアクセスすることができます（$()によるアクセスはAdobe Spryでもサポートされています）。 まず、簡単なところでページが読み込まれたらアラートダイアログを表示させてみましょう。通常はwindow.onload = function() { alert(～); }のように記述しますが、jQueryではonloadイベントではなく
最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai （リクリ）
【2024年8月】レンタルサーバーおすすめ10社を徹底比較！ 人気ランキングも PR 最終更新日：2024年08月16日
jQuery.Event - jQuery 日本語リファレンス
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。（コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません） オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
jQueryでクリックされたエレメントの属性を取得する
どうも、俺＠仕事中です。 jQuery＋Ajaxを使ってインタラクティブなデザインのシステムを構築中なのですが、ちょっとハマったのでめも。 画面にテーブルとか使って、何かデータを一覧表示した場合に、クリックされた要素のvalue値やname属性の値やidの値とか取りたくて、取りたくて、、、取れなくて1時間悩みました。。。 例えば <td><a href="foo" id="foo_id" value="foo_value">FOO</a></td> <td><a href="bar" id="bar_id" value="bar_value">BAR</a></td>のようなテーブルがあるとします。 これでjQueryで'FOO'をクリックした時に、その<a>タグに指定してあるid値やvalue値を取得したい！場合は $("a").click(function() { id = $(thi
jQuery クリックイベントを追加する
jQueryを使って、クリックイベントを簡単に追加することができます。 aタグにクリックイベントを追加する。 $("a").click(function(){ alert("click a!"); } ); divでidがmessage2のものにクリックイベントを追加します。 $("div#message2").click(function(){ alert("click message2!"); } ); idがmessage3のものにクリックイベントを追加します。 $("#message3").click(function(){ alert("click message3!"); } ); click関数を使ったサンプルコード <html> <head> <title>jQuery</title> </head> <body> <div id="message1">div 1</div
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いツリーナビゲーション | バシャログ。
第 6 回 は「見栄えの良いツリーナビゲーション」です。 今回は CSS と言うよりも jquery の plugin「Treeview」を使ったツリーナビゲーションをご紹介したいと思います。 実装するとこのような感じになります。 ホーム 会社案内 会社概要 コンセプト 沿革 社長挨拶 交通アクセス 採用 中途採用 中途採用情報 エントリー 新卒者採用 新卒者採用情報 エントリー 先輩の声 プライバシーポリシー お問い合わせ 設置方法 上のサンプルの設定を例に説明します。 まずサイトから「Treeview」をダウンロードします。 解凍してフォルダを置く（解凍したフォルダ名を js に変更） <head>～</head>内に <link rel="stylesheet" href="js/jquery.treeview.css" /> <script type="text/javascrip
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いツリーナビゲーション | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法
ちょっとしたコードの解説 せっかくなので、どういうコードなのかというのを、さらっとみましょう。 jQuery(function($) { //data-hrefの属性を持つtrを選択しclassにclickableを付加 $('tbody tr[data-href]').addClass('clickable') //ata-hrefの属性を持つtrをクリックしたら動作 .click( function() { //data-href属性の値をattr()メソッドで取得し、ページを遷移させる window.location = $(this).attr('data-href'); //もしtr内にa要素があれば、a要素にホバーした時に以下動作させる }).find('a').hover( function() { //a要素の先祖要素trのクリックイベントを解除 $(this).paren
グラフィックデザイナーのためのCSSレイアウトメモ : Ajaxライブラリ使用サンプル集「手軽なツリービュー」
jquery.jsを読み込む まず、jQueryサイトからjquery.jsをダウンロードし、外部jsファイルとして読み込む。 または、Googleの「The AJAX Libraries API」経由でjQueryをダウンロードさせることもできる。 Google AJAX Libraries APIでは、jQueryのほかに、Prototype、script.aculo.us、MooTools、Dojoがサポートされている。 (関連記事) Google AJAX APIを使ってjQueryをgoogleからダウンロードさせるには、 <head>部に以下のように書く。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google
今さら聞けないjQuery実行パターンまとめ :: 5509
なんとなく使っているだろう.ready()メソッドについて詳細に見てみましょう。 .ready()メソッド .ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓ $(function(){ // .ready()が呼び出されたときに実行されるハンドラ }); jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時（Documentの読み込みが完了時）に実行してくれます。 何気なく使ってる人も多いと思いますが、実際のところこれは何？ということで、少し掘り下げてみましょう。 .ready()を使う際の形式 jQuery APIによれば、以下の3つが.ready()として同じように使えるようです。 $(document).ready(handler) $().ready(handler) (推奨されていな
橋本商会 » Sinatra+Haml+jQuery入門
研究室の後輩にSinatraとhamlとjQueryを教えるために作ったテンプレートについて、ここにも書いておく ソースコード https://github.com/shokai/sinatra-template 実際動いているもの http://masui.sfc.keio.ac.jp/sinatra-template/ git clone git://github.com/shokai/sinatra-template.git ■Sinatraを何に使うか Sinatra+haml+jQueryが便利。 Railsと似てるけど、ちょっと違う。 個人的には Rails → HTMLのページをいっぱい作るのに便利 Sinatra → 画面遷移あまりしなくて、同じURLのままjsonのAPIをjQueryのajaxで取得して動的に表示を変えるwebページを作るのには便利 に感じる。 でもSi
bassistance.de » jQuery plugin: Treeview
Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree. Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1. Transform an unordered list into an e
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bassistance.de » jQuery plugin: Validation
JavaScript Ajax 実践サンプル集 - サンプル
jQueryを使ってファイルツリーを表示できる『jQuery File Tree』