jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch - かちびと.net
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。 これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 Draggable Droppable Resizable Selectable Sortable Accordion Autocomplete Dialog Progressbar Slider 実機でテ
画像の任意の箇所にツールチップを配置出来るjQueryプラグイン・iPicture
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
[JS]jQueryのプラグイン33+1選 -2012年2・3月
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」:phpspot開発日誌
ALAJAX - a jQuery plugin for ajax auto form sending | Freelancer ID 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームなんかを作る場合はAjax前提で作ったりしますが、このプラグインで $('#form').alajax(); のように初期化すれば一瞬でajax化が完了します。 もちろん、サーバ側のプログラムの調整は必要ですが、簡単にajax化できるというのはよいかもしれませんね。 やっぱりajaxフォームの速度ってはやくて利用者としては速いほうがいいわけなので、こういう風にマークアップの作り手側は簡単に対応できると作り手としては嬉しいですね。 関連エントリ Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ 画面遷移なしのAjaxでファイルアップロードするjQuer
フォームの入力項目に入力例を表示する | ユーザビリティ・EFOマニア!!
前回のエントリーで「お客様に優しいユーザビリティフォーム設計」についての話をしましたが、その実践例の一つをご紹介します。 これはformnotifierというJQueryで出来ている非常に軽いライブラリなんですが、テキスト入力ボックスにヒント表示することができます。 動作デモ 使い方は <script> $(document).ready(function(){ $(‘:input’).formNotifier(); }); </script> というコードを入力フォームページに追加するだけ。 これで「inputタグ」の「title属性」がヒント表示されます。 デフォルトだと表示がいまいちなので見た目を変える場合は、CSSで「formnotifier」クラスを変更してあげれば表示変更は可能です。 オススメはこんな感じ。 <style type=text/css> .form
3D効果を使って迫力あるスライドショーを作れる「Slicebox」:phpspot開発日誌
Slicebox - A fresh 3D image slider with graceful fallback | Codrops 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 一見普通の画像のスライドショーかとおもいきや、画像切替の際に超かっこよく3D効果を使って切り替わるスライドショーの実装ができます。 画像が立体的にぐるりと切り替わる感じは超クール エフェクトが色々と用意されています。 jQueryプラグイン形式なので、<div>のなかに画像をつらつらと並べて初期化するだけでOKの簡単実装。 3D transformを使っているみたいですが、フルに活用するとこういうこともできるんですね 関連エントリ 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 次の画
長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
jQueryプラグイン「jPlayer」の使い方｜HTML5プレーヤーのWeb埋め込み｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room
$('#要素ID').jPlayer({ /* イベントハンドラ */ ready: function(){ /* 再生するメディアの定義(URLは相対・絶対パスどちらでも) */ $(this).jPlayer('setMedia', { mp3: '/content/media/audio/Q701.mp3', m4a: '/content/media/audio/Q701.m4a', oga: '/content/media/audio/Q701.ogg', /* サムネイル画像 */ poster: 'http://phpjavascriptroom.com/content/media/thumb/poster1.png' }).jPlayer('play'); /* 自動再生 */ }, /* プレロード（デフォルトは'metadata'、プレロードする場合は'auto'） */
とてもとても簡単な、jQueryプラグインのつくりかた。 | Ginpen.com
こんなに短いコードですが、jQueryプラグインを作る上で忘れられない、5つのポイントがあります。 $がjQueryである事を期待しない。 jQuery.fnにメソッドを定義する。 実行コンテキストthisはjQueryオブジェクト。 .each()を使って処理する。 thisをreturnする。 他のプラグインと併用し、$がjQueryを指していない場合も考慮して、直接$は使いません。全体を無名関数にして、その引数としてjQueryを$という名前で受け取るようにしましょう。 jQuery.fnのプロパティとして関数を設置しておくと、それが$(elem)のメソッドとして呼び出せるようになります。またその際の「実行コンテキスト」つまりthisは、当然ですがメソッドを呼び出しているjQueryオブジェクトになります。このときに複数の要素を内包している場合がある（$('.hoge')を想像してく
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
CeeBox – a Thickbox/Videobox mashup | CatCubed
Improved Functionality Minor Release [12/03/2009]: CeeBox 2.1 jQuery Plugin: Now uses event bubbling via jQuery live function. Also detects flash plugin displaying message instead of embedding video. iPhone users are automatically redirected if it’s a video link. Major Upgrade [11/11/2009]: CeeBox 2.0 jQuery Plugin: Completely rewritten from the ground up. New functionality: auto-gallery creation
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
もうFLASHはいらない！？画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」
もうFLASHはいらない！？画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」 FLASHを使用して画像を印象的に切り替える手法がWEBマガジンなどでは多く見られます。 でもそれFLASHじゃなくてもよくない？ JavaScriptライブラリのjQueryを利用した「jQuery "Feature Carousel" plug-in 」なら、いちいちフラッシャーに直させたり、よくわからないxmlを書き換える必要もありません。 sponsors 使用方法 jQuery "Feature Carousel" plug-in からファイル一式をダウンロードします。 <link rel="stylesheet" type="text/css" href="featureCarousel.css"> <script type="text/javas
スマートフォンも対応！本をめくるような表現ができるJavaScript「FlipPage」
本をめくるような表現を付けられるJavaScriptです。 FlipPage: Tournez les pages sur votre iPad !では、iPhoneをはじめ、Androidなどでもタップでめくることが可能です。 sponsors 使用方法 FlipPage: Tournez les pages sur votre iPad !からファイルをダウンロード。 <link rel="stylesheet" href="jquery.flippage.css" type="text/css"> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.flippage.js"></script> <script type
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryサンプル集 | DesignWalker
