綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」:phpspot開発日誌
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ
Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」:phpspot開発日誌
Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」 2011年12月15日- Sisyphus Gmail風に書き途中のフォーム内容をlocalStorageに定期的に保存してくれる「Sisyphus」 せっかく大量に埋めたフォームが、ブラウザを間違って閉じてしまったり、ブラウザの不具合で落ちちゃったりして拳を握りしめた方もいるのではないでしょうか。 Sisyphusを使えば、$('#form').sisyphus() のような簡単な操作で、フォームのデータを自動保存できるようになります。 localStorageを使うのでサーバへの負担はないのでとても扱いやすそうです。 入力しているとほどよいタイミングで保存しましたメッセージが流れます。 試しにリロードしてみても、ブラウザを閉じて開き直してみても残っています。リストアメッセージも表
スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」:phpspot開発日誌
Slidorion, A jQuery Plugin | jQuery Image Slider and jQuery Accordion | Random Demo スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」。 左側をスライダー、右側をテキストを入れたアコーディオンな感じのウィジェットが実装できます。 ほどよくアニメーションして良い感じです。 マークアップも綺麗に記述可能。 関連エントリ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 ファイルアップロード関連のjQueryプラグイン１０ 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」 jQue
javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 : 404 Blog Not Found
2011年12月14日15:34 カテゴリTipsLightweight Languages javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 いいえ、使いません。 めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ 僕たちプログラマーは、ちょっとしたHTML生成にDHTMLを使います。 DEMO TSV JSON JSON to HTML function (json){ var tbody = $('<tbody>'); $.map(json, function(row){ var tr = $('<tr>'); $.map(row, function(c
レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」:phpspot開発日誌
ResponsiveSlides.js Responsive jQuery slideshow レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 画面サイズが変わっても問題なく動作するレスポンシブなスライドショー実装が可能です サイズは１KBぐらいでマークアップも超シンプルに記述できます ブラウザサイズを変更しても問題なし 今後はこうしたライブラリもレスポンシブ対応必須となっていきそうですね 関連エントリ ３ステップではじめるレスポンシブWEBデザイン 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 ファイルアップロード関連のjQueryプラグイン１０
[JS]複数の表示サイズごとに異なるイベントが設定できるResponsive Web Design用のスクリプト -Breakpoints.js
Responsive Web Design用に表示サイズの複数のブレイクポイントを定義し、異なるイベントを設定できるjQueryのプラグインを紹介します。 デモページ：幅640pxで表示 デモページで設定されているブレイクポイントは下記の4つです。 1024px 768px 480px 320px [ad#ad-2] Breakpoints.jsの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://xoxco.com/projects/code/b
ベストオブ2011年ランキング 総まとめ レストラン、jQuery、人気記事、iPhoneアプリ、検索ワードetc
今年もあとわずかですね。 そんなわけで年末にどっとでてくるまとめをウォッチャーしてみようかと思い立ちまして。 この記事は年末までリアルタイムで更新していければ「なるべく」していこうと企んでいます。というかまだ書きかけです。もしも他に「こんなランキングがありました」と言うのがあれば、教えていただけると嬉しいです。 ベストオブ2011を追いかけよう ベストレストラン2011[食べログ] 色々あった食べログでしたが、今年の人気レストランの総合発表です。 ベストスイーツ2011[食べログ] こちらはスイーツ。地域別にありますん。 ベストラーメン2011[食べログ] ラーメンのキングオブ2011。おなかすいてきますよね。 Google 年間検索ランキング 2011 Google 年間検索ランキング 地域別ユーザーの検索 Googleの年間検索ランキング。 1位 Yahoo 2位 YouTube 3位
超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」:phpspot開発日誌
Craftyslide - A tiny jQuery slideshow plugin 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 スライダーといえば多機能なものも多いですが、逆にそんな機能いらないよという場合も多かったりします 機能に比例してスクリプトサイズは上がるのでできるだけ軽いものがいいという場合にこちらはよいかもしれません。 マークアップは単にul li リストに画像を並べているだけでシンプルで綺麗 あとは1行jQueryプラグインで初期化するだけです。 アニメーションが気に入らない場合も自分でちょこっとカスタマイズすればよさそうですね 関連エントリ jQueryベースの画像スライダー３０まとめ 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 Apple.comの新スライダーエフェクトを
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
ファイルアップロード関連のjQueryプラグイン１０:phpspot開発日誌
10 jQuery File Uploading Plugins | 3D Models, Website Templates and Illustrations blog | Templates.com ファイルアップロード関連のjQueryプラグイン１０ ファイルアップロードといってもSWFを使ったりAJAXを使ったりと方法が色々あって、いろんなやり方ができるjQueryプラグインです。 望みの挙動に近いものを選んでカスタマイズすれば作りたいものが最速で作れそうですね 関連エントリ facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」
インラインサジェストを実現するjQueryプラグイン「jQuery.suggest」:phpspot開発日誌
jQuery.suggest plugin インラインサジェストを実現するjQueryプラグイン「jQuery.suggest」 サジェストといえば、ドロップダウンが現れて表示されるのがよく見るサジェスト方式ですが、今回紹介するプラグインを使えば、次のようにインラインでオシャレに内容を補完することができます 入力途中にEnterキーを押せばそのまま補完されます 配列でデータを定義しておいて、次のように suggest メソッドにオプションとして渡すだけです。 ドロップダウンの方が選択肢が沢山あらわれて便利ですが、こっちの方がシンプルで、適している場合もありそうなので覚えておいてもよさそうですね 関連エントリ facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Me
様々なドロップダウンメニューを実装するスクリプト集:phpspot開発日誌
Useful jQuery Drop Down Menu Scripts - DesignModo 様々なドロップダウンメニューを実装するスクリプト集 ページをシンプルに見せつつ、機能性も損なわないようにできるドロップダウンメニューも色々な実装がありますね。 様々なタイプのドロップダウンと、それを実現するためのスクリプトが公開されていていざ自分がドロップダウンを実装するという時に参考にできます 最近はやってるサイトはナビゲーションなんかもシンプルになるように、それでいて十分な機能を提供している気がしますが、ドロップダウンなどをうまく活用していますね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSS3単体でアニメーションするドロップダウンメニューを実装 CSS3だけで実現する幅広で使えそうなドロップダウン実装チュ
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」:phpspot開発日誌
stickyFloat | jQuery Plugins ページスクロールでついてくるメニューを実装＆色々カスタマイズできるjQueryプラグイン「stickyFloat」 ページをスクロールするとメニューもスクロールしてくれて別ページに移動しやすいあのUIのアニメーションや遅延のカスタマイズが可能なjQueryプラグインです。 アニメーションの仕方によっては気分が悪くなるというようなケースもあってカスタマイズには注意したいこのUIですが、アニメーションなどを使って利用者の負担にならないものが簡単に実現できそうです デモサイト上で１０種類のアニメーションや遅延、アニメーション時間の設定が可能で、動作を確認しながらカスタマイズ可能です。 Delay・Durationを多めにして適度なタイミングで横に来ているというようなものがベストですかね 実装コードは次のように超簡単です jQuery('#
facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」:phpspot開発日誌
fcbkListSelection v 1.1 ? like facebook friends selector - Emposha facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」 ul > li のリストで定義して初期化するだけで次のような、選択すると色がつくようなチェックリストを作ることができます。 HTMLは次のようにシンプル JavaScriptも実装部分はほぼ一行 デモページはこちら 使ってみるとその便利さがわかります。 関連エントリ Google＋風の円形リストを作成できるjQueryプラグイン「CircleList」 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 画像のリストを面白い見せ方で表示できるjQueryプラグイン「imageCloud」
値段をスクロールバーで一気に決めるインタフェースを提供するサンプルプログラム:phpspot開発日誌
Free Dynamic Price Scrollbar (jQuery, HTML, CSS) - DesignModo 値段をスクロールバーで一気に決めるインタフェースを提供するサンプルプログラム。 次のようなUIで、スクロールバーを移動させるとスペック・値段等がレベルに応じて変化するというようなUIを提供するものです。 スペックが色々あってよくわからないというようなケースで、予め用意したものをレベルに分けておいて選択してもらう、的な場面で使えそう（結構ニッチかもですが・・） jQueryを使って実現されています。 あまり使うことのないUIかもしれませんが、便利な場面もあるかもしれません。 デモページはこちら 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 Twitter OAuth認証をポップアップで行うjQu
階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」:phpspot開発日誌
階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」 2011年12月02日- Arborescence.js | jQuery Plugins 階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」 divで複数階層化したデータをこのプラグインで初期化するとクリックで開閉できるツリービューに仕立て上げられます トップ項目の表示を減らし場合によってはコンテンツを見やすくすることが可能です ↓↓↓ １行でツリービューに。 CSSできれいにスタイリングしたほうがよさそうですが、便利なプラグインですね 関連エントリ 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 ピュアCSSなのに折りたたみ可能なツリーメニュー実装例 WindowsアプリのツリービューっぽいUIをWEB上で簡単
１枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル:phpspot開発日誌
jQuery Stylish Background Image Sliding effect | image slideshow １枚の画像をタイル状に並べてそれぞれアニメーションさせて切り替えるクールなjQueryサンプル 説明が難しいのでデモを御覧ください。写真もいいのですが、タイル毎に切り替わるエフェクトはなかなかクールですね。 ファッションやアパレル関連のサイトで使うことができそうです 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 CSS3で実装された画像スライドショーサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」
Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」:phpspot開発日誌
Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 2011年12月01日- Sharrre - A plugin for sharing buttons Facebook,Twitter,Google＋の独自デザインのソーシャルボタン作成用jQueryプラグイン「Sharrre」 どれだけシェアされたか、といった数値を表示しつつすべてのボタンのデザインし統一感をもたせることができます。 デザイナーさんならこうしたボタン部分もきっちりデザインしたい気になる人も多いのではないでしょうか。 テンプレートを独自に定義して引数として渡すことで独自デザインにすることができたりするようです。 以下、本プラグインを使って作られたサンプル集です。それぞれの具体コードもサイト上に掲載されているのでカスタマイズしちゃってもよさそうです
Windows8のMetro風UIを実現できるjQueryプラグイン:phpspot開発日誌
dennisdegryse/jQuery-Metro-Plugin - GitHub Windows8のMetro風UIを実現できるjQueryプラグインです。 タイル状に並べられたアイコンが印象的なMetroデザインですが、このUIをブラウザ上で実現できます。 デモページ - ページのはじをクリックすれば画面が切り替わります。 ちょっと変わったことをやってみよう、という場合に使ってみるとインパクトがありそうです CSSなんかを当てはめればそれなりにかっこ良くできそうですね 関連エントリ ブラウザ上で複雑なレイアウトが作れる「Layzilla.com」 プロレベルのWEBサイトレイアウト作成チュートリアル３０ フリーの高品質WEBデザインレイアウトテンプレートPSD７０
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
