実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
花王 ソフィーナ ソフィーナボーテ TOP
SOFINA beaute（ソフィーナ ボーテ）公式サイト。美白も保湿も大切にしたい、30～40代の肌のためのスキンケア。あなたのきれいが、生まれ変わる。
IEやiPhoneでも問題なく動作・ドラッグやスクロール等、多方面で応用出来るjsライブラリ・Dragdealer JS - かちびと.net
なかなか使い勝手が良さそう だったのでメモ。スクロールバー や、コンテンツスライダーなど、 多方面で応用の効くjsライブラリ、 Dragdealer JSのご紹介。 IE6、7、8や、iPhoneでも動作を確認しましたが、何の問題も無く動いてくれますよ。 ↑ 上図はスクロールバーに使用した例です。動作も凄くスムーズです。Flashでよく見かけますね。 ↑ 文字の拡大をドラッグで実装。 ↑ 斜めに移動するコンテンツスライダーにも応用できる。 ↑ こちらではコメント送信に使っています。ユニークですね。 iPhoneでは全てフリックで動作します。 IE6とか7がだいたいネックになるのでどのブラウザでも実装できるjsはいくつ覚えておいても損なさそうですね。加えてiPhoneなどでもスムーズに動いてくれるのでなかなか使えそうです。以下で動作をご確認下さい。 Dragdealer JS
smartdialog.js - 画面全体にレイヤーを重ねてダイアログを表示する JavaScript ライブラリ
「Yahoo!画像検索」や「Lightbox」のように、画面全体にレイヤーを重ねてダイアログを表示する JavaScript のライブラリです。 他のライブラリと比較して、任意の色を背景色に選ぶことができ、CSS ファイルや透過画像が不要だという長所があります。 別途、「prototype.js」と「scriptaculous.js(effects.js)」のライブラリが必要です。 サンプル デフォルトの動作（ホワイトアウト） グレーアウト・待ち時間なし・閉じるボタンなし・枠線なし・200px × 50px 縦長・待ち時間なし・緑二重枠線 薄いピンク(不透明度 0.5)・待ち時間 3 秒・ダイアログなし ブルースクリーン・待ち時間なし・同色ダイアログ・背景クリック無効・ボタンのラベル変更 画像を表示・枠線 1px・500px × 400px ダウンロード smartdialog.js v1
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
cabel.name: FancyZoom 1.1
Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility! ...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorry it took so long! But hey, two years later, it's finally done! Smooth Javasc
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
JavaScriptツール&ライブラリ50選 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Editoria氏がSmashing Magazineにおいて50 Fresh JavaScript Tools That Will Improve Your Workflowのタイトルで50のJavaScriptに関連したツールやライブラリを紹介している(実際には51)。RIA開発においてJavaScriptは重要な地位を占めつつあり、適切な開発ツールやライブラリ、フレームワーク、プラグインを選択することは、迅速で効果的な開発を実現するために欠かせない。紹介されているツールやライブラリは次のとおり。 JavaScriptツール FireUnit (Firebug向けJavaScrip
[JS]設置が簡単なパネルをスライド表示させるスクリプト -Slide box
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
http://slideshowjs.com/
Slideshow JS Cross-browser compatible, supports custom styles and images, and won’t conflict with other frameworks. Slideshow JS is a free JavaScript library that makes it easy to showcase your images. It requires no scripting, is completely configurable via markup, and, although it ships with default styles out of the box, it supports custom stylesheets and images. It’s 100% unobtrusive and tak
jQueryのサンプルTOP10 – creamu
MyPHPDuniaというサイトで、jQueryのサンプルTOP10がまとまっています。 かなり使えるものばかりな感じですね。 » スライドタブボックス » Appleのサイトで使われているようなメニュー » 画像をズーム » 画像の上にスライドするキャプション » メニューの背景にスライドする画像 » タブで画像を切り替える » メニューにフェード効果 » アコーディオンメニュー » タブによるコンテンツ切り替え » タブメニュー 詳しくは以下からどうぞ。ソースコードもダウンロードできますね。 » Top 10 Jquery Examples with Live Demos わいわいと飲み会。超たのしかったぞ。
[JS]セレクトボックスにアイコンを配置してグラフィカルにするスクリプト -image combobox
セレクトボックスの各アイテムにアイコンを配置して、グラフィカルに認識しやすくするスクリプトをMarghoob Sulemanから紹介します。
[JS]ブラウザのサイズに合わせて画像サイズを最適化するスクリプト
maxImage demo 上記のデモでは、右側の画像がブラウザのサイズに合わせて、はみでないようにリサイズされて表示されます。 デモは他にも多数あり、下記は背景画像をブラウザのサイズに合わせて最適化します。
ajaxというかjavascriptで ＜div id="strmsg"＞あああああ＜/div＞ のdiv要素をクリックするとdiv要素内がvalue="あああああ"のテキストボックスに変わり、フォ…
ajaxというかjavascriptで ＜div id="strmsg"＞あああああ＜/div＞ のdiv要素をクリックするとdiv要素内がvalue="あああああ"のテキストボックスに変わり、フォーカスをはずすとdiv要素内には編集後の文字が表示され＜div id="strmsg"＞ああいいい＜/div＞のようになる、という処理を行いたいのですがうまくいきません。どう書いたら良いのでしょうか。もしくはサンプルとなるようなサイトをご存知ですか。 はてなブックマークのコメントを記述する箇所はこれに近い処理を行っていますが、はてなブックマークの場合左横のアイコンをクリックするとコメント欄が入力ボックスになり「変更」ボタンを押すと文字表示に戻るので、似ていますが処理は別もので参考になりませんでした。 あくまでdiv要素内をクリックすると入力ボックスになり、そこからフォーカスをはずすと文字表示に戻
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
[JS]既存のテーブルにソート、ハイライト、分割機能などを追加できるスクリプト
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
[JS]配置済みのリンクにドロップダウンを簡単に追加できるスクリプト
ページ内に配置したリンクに、リストで作成したドロップダウン型のナビゲーションを簡単に追加できるスクリプトをDynamic Driveから紹介します。 ナビゲーションに追加したデモ 配置できるナビゲーションは、オプションで不透明度、ディレイ時間、表示位置を調整することができます。 スクリプトの設置方法は、「anylinkcssmenu.js」「anylinkcssmenu.css」を外部ファイルで指定し、リンク要素のclassに「anchorclass」を記述します。 配置するナビゲーションは、divで括りclassに「anylinkcss」を記述し、任意のid（例：submenu1）を記述します。そのidと同じものをリンク要素のrelに記述します。 <textarea name="code" class="html" cols="60" rows="5"> <p><a href="http
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobile