日本でも近日発売の「Designing Web Interfaces」から、リッチインターネットアプリケーションを作成するための30のユーザーインターフェイスを紹介します。 30 Essential Controls サンプルは、一部jQueryベースのものに変更しています。 01. Auto Suggest
10 Most Interesting Upload Widgets | AjaxLine ファイルアップロードの際に便利なFlash/JavaScriptウィジェット集。 通常のアップロード機能を実装すると使えないと言われないくらい、Flickrなどのアップローダなんかは便利になっていますよね。 実装すると便利になりそうなウィジェットが色々と紹介されていましたのでご紹介。 Flash Upload Widget Flashを使って、アップロードの進捗を表示してくれるウィジェット XUpload Perlで書かれたリアルタイムアップロードウィジェット Uber-Uploader Perl or PHP + JSで書かれた複数ファイルアップローダー。進捗表示つき jqUploader jQueryアップロード用プラグイン Ajax Style File Upload ASP.NET用リアルタ
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
Select Cuts Off Options In IE (Fix) IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル IEでSelectの幅を指定してしまうと、内容もその幅に伴い、次のように縮小されてしまいますが、中身はちゃんと見せるサンプルが公開されています 次のように、ちゃんと中身は表示できるようになります。 派手なテクニックではないですが、色々なところで使えるテクニックかもしれませんね。 関連エントリ クリーンなデザインでピュアCSSなフォームを作るサンプル 斬新なコメントフォームデザイン集 CSSでデザインされたテーブルレスでクールなフォームサンプル CSSでフォームデザインをする際のチュートリアル
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
UI.Layoutは、可変タイプのパネルをベースとした自由なインターフェイスを実装できるスクリプトです。 UI.Layout – The Ultimate Page Layout Manager demo(UI Accordion) 上記のデモでは、アコーディオン型のパネルをはじめ、サイズ変更や開閉できるパネルが実装されています。 デモは他にも多数あります。 デモ:ミニマム デモ:シンプル デモ:ネスト デモ:複雑なネスト デモ:アコーディオン デモ:ドロップパネル デモ:フレーム UI.LayoutはjQueryのプラグインのため、実装にはjquery.js、アコーディオンなどのエフェクトにはjQuery UIが必要です。 下記のページから全てのファイルがダウンロードできます。 UI.Layout Plug-in & Related Downloads
jQueryを良くする25のTIPS ネタ元:Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
Webページに掲載する面倒な表(テーブル)の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML(Tableタグ)に変換するExcelアドイン「XLS2HTMLTable」を紹介した(関連記事)。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル(カンマ区切りテキスト)を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 (一部jQueryではなく、DOMの仕様上の制限も含まれています) 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 (たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します) 確認する ちなみに、$().findや$().notはstring以外も渡せるた
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
10 Useful jQuery Plugins | AjaxLine 便利なjQueryプラグインが色々とあるみたいですね。 最近では、jQueryの人気が非常に高いように感じます。prototype.jsとかのシェアの状況は今はどうなってるんでしょうね。 Virtual jQuery Keyboar jQuery 3 State Switch Plugin jQuery Quick Search Date Range Picker Tooltips based on jQuery FaceBox ColorPicker 全部見る これだけjQueryプラグインがあるということは、JSフレームワークのシェアはここ数年でちょっと変わってきてるんでしょうね。 関連エントリ jQueryを速攻マスターしたい方におすすめの「jQuery Selectors」 HTMLで雑誌のような美しい段組みレ
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント/Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション/エフェクト処理を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く