フォームのlabel要素のテキストをjQueryでプレースホルダーにする - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 フォームのlavel要素をHTML5の placeholder属性にする、という 方法。jQueryを使用します。 フォームが固定されたCMSのスマ フォサイトを作成するにあたり、 省スペース化したいのでこの方法 を使いました。 フォームのマークアップが固定のCMSのスマフォサイトでフォーム省スペース化に迫られて、label要素をplaceholder属性にする事で落ち着きました。折角なのでメモ。 Sample label要素をplaceholder属性に当ててdisplay:none;しました。 $("input").each(function(){ $(this).attr("placeholder", $('label[for='+ $(this).attr(
シンプルデザインで使いやすい日付ピッカー実装jQueryプラグイン「glDatePicker」:phpspot開発日誌
glDatePicker - A simple, customizable, lightweight date picker calendar plugin for jQuery シンプルデザインで使いやすい日付ピッカー実装jQueryプラグイン「glDatePicker」。 次のような大きめでシンプルデザインの日付ピッカーを簡単に実装できるプラグイン。デザインがよくても小さくて押しづらいものよりもよさそうです。 白黒のバージョンがあります。CSSデザインなのでデザイン変更も簡単でしょう。 $("#date1").glDatePicker();と書くだけで<input>にフォーカスした際に表示されクリックだけで日付を入力できます。 シンプルイズベストですね。 関連エントリ Mac OS XのDateLine風1行カレンダーをWEBサイトにも簡単実装できるjQueryプラグイン「Dateli
jQueryでWebサイト内を無限にスクロール出来るようにする - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装にはjQuery を使います。 土曜日なのでちょっとネタ的な話題です。 数日前に「スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。 これを実装しよう、という誰得な話です。 Sample 以下サ
ページ上部までスクロールするAnimated Scroll to Top
ページを下に進むと現れて、クリックするとページ上部までスクロールするスクリプトを紹介します。結構ありがちですが、さりげなくCSS3を使っているところや、現れるタイミングやスクロールの早さなどカスタマイズしやすそうなところがおすすめポイントです。 Animated Scroll to Top - web designer wall ソースもダウンロードできるようになっているので、カスタマイズできそうなところを簡単に説明していきます。 次にjavascriptのところを。jQueryをGoogleから読み込んで、以下の部分を記述しています。 <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(win
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」:phpspot開発日誌
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
超カッコいい確認ダイアログをjQueryで実装するチュートリアル:phpspot開発日誌
How to Create a jQuery Confirm Dialog Replacement | Tutorialzine 超カッコいい確認ダイアログをjQueryで実装するチュートリアル 普通、ダイアログというと javascript の confirm とか、その他 jquery プラグインを使って実装されるものが多いですが、これまで見たなかでもかなりのカッコよさのダイアログ実装チュートリアルです。 サンプルのダウンロードも可能。 一見全て画像のようにも見えますが、CSS3を使って綺麗にデザインされています。 ここら辺もこだわりたいという方は参考にしてみるとよさそう。 関連エントリ 効果音付きでアニメーションするクールなダイアログ実装jQueryプラグイン「Float Dialog」 その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAc
テキストボックスの残り入力文字数をシンプルに表示するjQueryプラグイン m5simpleTextCount :: 5509
テキスト入力エリアなどの残り入力文字数をシンプルに表示するjQueryプラグインです。使い方も簡単で、指定要素に入力文字数と一緒に実行するだけです。 動作サンプル 必要なファイルを読み込む jQueryとm5simpleTextCount.jsを読み込みます。 任意の要素に対して実行する 任意のinput, textareaに対して実行します。 HTML JS jQuery(function($) { $('.simpleTextCount').simpleTextCount({ maxLength: 12 }); }); ちなみにm5simpleTextCountを実行したinput要素はpaddingRight、textarea要素はpaddingRight, paddingBottomに適当な数値を当てたほうがいいと思いますよ！(そこは手動やねんで・・・ オプション オプションを指定
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」:phpspot開発日誌
iPhone UI iPhone用サイトを作成する際に便利なjQueryプラグイン「iPhone UI」。 iPhoneアプリケーションのようなUIパーツが揃っており、PCのブラウザで見ると、iPhone枠が次のように表示され、iPhoneで見ると枠なしでそのまま動作するというものです。 PCで見ても、iPhoneで見ても同じように見れるサイトを作る際に役立ちそうです。 まだバグがそれなりにあるっぽいですが、面白い仕組みですね。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 iPhoneにインスタントメッセージをPHPからpushme.to経由で送るサンプル
テキストボックス入力時に正規表現にしたがってヒントを出せるjQueryプラグイン「InputNotes」:phpspot開発日誌
テキストボックス入力時に正規表現にしたがってヒントを出せるjQueryプラグイン「InputNotes」 2010年08月02日- InputNotes jQuery Plugin テキストボックス入力時に正規表現にしたがってヒントを出せるjQueryプラグイン「InputNotes」。 テキスト入力を行うとリアルタイムにヒントが反映されます。 NGワードの入力チェック、入力形式のエラーチェックに使えそうです。地味にアニメーションする点もナイスです。 こうした機能は手間は増えますが、送信してからエラーを表示するよりもベターなので使いやすさを考えると入れておきたいですね。 こうしたライブラリで、できるだけ簡単に実装できますね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ Java
[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip
Poshy Tip - jQuery Plugin for Stylish Tooltips デモページ ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。 まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024x768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。 また、画像を変更することで、好みの背景に簡単に変更できます。
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」:phpspot開発日誌
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」 2010年06月23日- slideLock Demo iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」。 UIとしては次のような感じで、スライダーを右にドラッグ＆ドロップするとsubmitボタンがactiveになってフォームの送信が可能になります。 フォームの送信を厳重にしたい場合と、隠しパラメータを受け取って照合することでスパムの防止に使えるっぽいです。 ロック解除しないと送信できないので、送信前に確認の意味を込めたUIとして使うと実用的に利用できそうですね。 初期化は次のように行います。 $("#contact").slideLock({ labelText: "Slide to Unlock:", // ラベル
iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT
jQuery iPhone UIはHTML/JavaScript製のオープンソース・ソフトウェア。iPhone用のWebサイトを構築するニーズが増えてきている。既に幾つかテンプレートもリリースされており、それらを使えば最適化されたインタフェースのサイトが作りやすくなる。 アイコンリスト そうしたライブラリを使う時に重要なのが、どれくらいの機能に対応しているかだ。単純なリストはもちろん、プロフィールページ、画像付きリスト、フォームなど多数のニーズがある。その一つ、JavaScriptを使ったパターンに適合できそうなのがjQuery iPhone UIだ。 jQuery iPhone UIの特徴は名前の通りjQueryを使っていることだろう。同種のライブラリとしてjQTouchがあるが、あちらはがちがちに固まっている雰囲気があるがjQuery iPhone UIは切り離して使えそうだ。HTML
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」:phpspot開発日誌
現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 2010年04月12日- prettyLoader | Stphane Caron ? No Margin For Errors 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 通常、ローディング中というと、ボックス要素の中身にローディングするGIFアニメーションなんかがはいっていたりしますが、prettyLoaderはマウス追従型のローディング表示実装用ライブラリです。 Windowsでいう砂時計みたいな扱いですが、どんなページにも違和感ない実装が可能で、応用範囲が広そうです。 次のような、比較的古いブラウザにも対応しているようです。 Firefox 2.0+ Safari 3.1.1+ Opera 9+ Internet Explo
jQueryを使ったWYSIWYGなエディタ·elRTE MOONGIFT
elRTEはJavaScript製/jQueryプラグインなオープンソース・ソフトウェア。Webベースでコンテンツを作成したり、編集する際に取り得る手法は幾つかある。例えば一定の記法に沿って書くことでHTMLにコンバートして表示するもの。もう一つはWYSIWYGなエディタを用意してその場で編集するというものだ。 jQuery UIを使っている WYSIWYGエディタであればリテラシーが高くないユーザであっても、リッチなコンテンツの編集が可能になる。CKEditorをはじめとして幾つか有名なソフトウェアはあるが、ここで紹介したいのはelRTEになる。 elRTEはテキストエリアの上にツールバーを表示するタイプのWYSIWYGエディタで、jQuery UIを使って作られているのが特徴になる。jQueryを使っているので、カスタマイズが容易に行えそうなのが魅力だ。ベースのままでは提供されない機能
iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」:phpspot開発日誌
Plugins | jQuery Plugins iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」。 iCheckboxを使えば次のようなiPhoneのON/OFFを簡単に実装できるみたいです。 次のようなコードで実装することが出来ます。オプションを各種指定でカスタマイズも出来るみたい。 var options = { switch_container_src: 'images/bpm-frame.gif', class_container: 'iCheckbox_two_container', class_switch: 'iCheckbox_two_switch', class_checkbox: 'iCheckbox_two_checkbox', switch_speed: 450, switch_swing: -18, checkbox_hide:
ラベル入りのフォーム要素を実装する方法2つ – creamu
最近のフォーム要素にはラベル（透かしテキスト）を入れているものが多いですが、通常の実装方法は以下のソースで可能ですね。JavaScriptのonfocus、onblurイベントハンドラでvalueを切り替えています。 XHTML, JavaScript <input type="text" value="メールアドレス" id="email" onfocus="if (this.value == 'メールアドレス') {this.value = '';}" onblur="if (this.value == '') {this.value = 'メールアドレス';}" /> これは使いやすいんですが、ソースが綺麗じゃないのと、これからはよりリッチなインターフェースが求められるので、もう少し自然な動きだといいですよね。 そこで、jQuery In-Field Label Pluginを使えば
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid