jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 2011年03月22日- jQuery File Upload Demo デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 ファイルアップロード用のプラグインはよくありますが、このプラグインでは、デスクトップにあるファイルをブラウザにそのままドラッグ＆ドロップでファイルアップロードが完結します。 ダイアログからいちいちファイルを選択して、というUIは使いづらいですが、これなら直感的に、初心者でも簡単にファイルをアップロードすることが可能になります。 尚、Firefox、Chromeで動作。IEでは動きませんでした。 デスクトップからファイルをドラッグすると枠がニュイーンと広まって、ドロッ
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
Google Chromeのタブのように、繊細なハイライトのエリアをマウスに合わせて移動させるスクリプトを紹介します。 タブの実装 まずは、タブの実装から。 タブの実装はシンプルです。 HTML タブはリスト要素で実装します。 <ul class="nav clearfix"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> CSS CSSもシンプルに実装します。 .nav { list-style: none; border-bottom: 1px solid #a0a0a0; padding: 10px 10px 0 10px; } .
Wijmo - jQuery UI Widgets 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」。 jQueryといえばプラグインによって様々なことが出来るのはご存じだと思いますが、Wijmoはこれ1個で30ものウィジェットが実装できるパックです。 UIのデザインをそろえたいような場合に使えそうです。 アコーディオン カレンダー 各種グラフ コンボボックス オーバーレイ 独自フォームデザイン グリッド リスト まだまだあります・・・。 よくここまでそろえたなという品ぞろえですね。 関連エントリ YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」 jQueryでYoutube埋め込みビデオをブロックの幅に合わせるコード 再生ボタン等も変更できちゃうYoutube操作jQueryプラ
TOP > WebDesign > CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」 数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。 Sweet Tabbed Navigation Bar using CSS3 デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Sweet
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類ありま
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 2010年03月31日- AjaxScroll ? Ajax Scroll jQuery Plugin | blogfreakz.com スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 「MSN Image Search」は画面遷移なしに画像をガンガンよんでくれて、スクロールすれば次の画像を見れるためストレスが少なく、画像を探せます。 これと同様の機能を実現するためのjQueryプラグインのご紹介です。 デモページはこちら。スクロールすると次の画像を読んでいっているのが分かると思います。 Ajaxで次の内容を読むので、一回における転送量を少なくした上で、利用者には画面遷移なしの利便性を提供出来ると言うわけですね。 垂直方向だけでなく
豊富なコンテンツを設置できるメガドロップダウンを実装するスクリプトをGeek Tantraから紹介します。 jQuery Mega Menu デモページ デモでは四種類メガドロップダウンがあり、データ量によってドロップダウンするパネルの幅が成り行きのもの、指定した幅のもの、表示位置が成り行きのもの、右寄せのものがあります。 実装は簡単で、スクリプトを外部ファイルとし、下記のようなスクリプトを記述します。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".MegaMenuLink").megamenu(".MegaMenuContent", { width: "900px" });
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
jQueryでシンプルな動きのメニューを作りたい。 そんなときにおすすめなのが、『7 Vertical Menus With jQuery Effects』。jQueryで作る垂直メニュー集です。 メニューにマウスオーバーすると、 中のテキストがすっと右にずれたり、背景がびよーんと伸びたりするメニューの実装方法になっています。 jQuery Easing Pluginを使っていて動きが滑らかなので、気持ちいいですね。 デモは以下から。 View Demo 一度見てみてください。 7 Vertical Menus With jQuery Effects ふぅ、やっと少し落ち着いた。今週はずっと集中しっぱなしでした。昨日ブログ書けなかった分を挽回挽回！ Web Designingの方にお声がけいただいて、「サイトを彩るパーツのアイデア集」という特集で、見出しやテーブル、検索ボックスやTwitt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
