フリーのjQueryコンテンツスライダー15 – creamu
VISIONWIDGETというサイトで、フリーのjQueryコンテンツスライダーがまとまっています。 ざっといくつかご紹介。 » jFlow かわいいフォトスライダー » Create Featured Content Slider Using jQuery UI サイドバーにナビゲーションのあるスライダー。自動で切り替わる » A Basic Content Slider With jQuery 左右にボタンを配置したシンプルなスライダー » JC Play List xmlからリストを取得できるFlashコンポーネント » Creating a Slick Auto-Playing Featured Content Slider CSS-Tricks.comによる、Coda Sliderのようなとてもクールなスライダー かっこいいものがそろっているので実装したくなりますね。 その他のリ
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」:phpspot開発日誌
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ１つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
[JS]ソートだけでなく、検索も可能な多機能なデータテーブルを実装するスクリプト
セルのハイライト表示、データのソート、特定文字列の検索などに対応したデータテーブルを実装するスクリプトを紹介します。
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル:phpspot開発日誌
Select Cuts Off Options In IE (Fix) IEでSelectボックスの幅を狭めつつ、内容もちゃんと見れる有用サンプル IEでSelectの幅を指定してしまうと、内容もその幅に伴い、次のように縮小されてしまいますが、中身はちゃんと見せるサンプルが公開されています 次のように、ちゃんと中身は表示できるようになります。 派手なテクニックではないですが、色々なところで使えるテクニックかもしれませんね。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル 斬新なコメントフォームデザイン集 CSSでデザインされたテーブルレスでクールなフォームサンプル CSSでフォームデザインをする際のチュートリアル
[JS]高機能なインターフェイスを実装できるスクリプト -UI.Layout
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プラグインいろいろ:phpspot開発日誌
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で雑誌のような美しい段組みレ
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
マウスオーバーをデザインする | DesignWalker
IDEA * IDEA
リッチインターネットアプリケーションの実装時に検討したい30のUI
IDEA * IDEA
[JS]シンプルなタブを実装する超軽量（5KB）のスクリプト -SimpleTabs