レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル:phpspot開発日誌
Animated Scroll to Top ページを下にスクロールするにつれ表示する「TOPへ」ボタン実装チュートリアル。 ページの上の方にいる場合は必要ないかもしれないボタン。下に行くにつれ表示されることで上に戻れることが分かりやすく、上にいるときは邪魔にならないという使いやすいボタンが作れますね。 jQueryにて実装するチュートリアルとなっており、サンプルのダウンロードも出来るのでいざ実装する際に参考にできそう。 デモページ 最近WEBを巡回していると散見するUIですね。 関連エントリ 指定位置までスクロールするとヒントを表示させられる便利jQueryプラグイン「SlideNote」 スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery vScroll」
WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」:phpspot開発日誌
WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」 2011年05月09日- Awkward Showcase ? A jQuery Plugin | Awkward Group - A Digital Agency WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」。 divの中に複数のdivを並べて初期化することで簡単にコンテンツスライダーを作れます。 １つのコンテンツにはHTMLが入れられ、ツールチップ表示用の機能なんかも同梱されています。 初期化も次のように簡単。コンテンツのサイズ等をオプションとして渡せます。 $("#showcase").awShowcase({ content_width: 700, content_height: 470 }); デモページはこちら
アニメーション、エフェクト｜jQuery plugin｜Ajax｜PHP & JavaScript Room
要素のマウスオーバー時のhover効果をアニメーションさせるjQueryプラグイン。 リスト要素の各アイテムにマウスオーバーした時に、そのアイテムの背後にjQueryでhover用の要素を動的に生成して、アニメーション表示させています。 幅、高さ、オフセットなどオブジェクトの位置情報を取得するjQuery Dimensions Pluginを併用しています。 このプラグインを適用する要素には、CSS上のルールがあります。 マウスオーバーされたアイテムの親要素には、position:relativeあるいはposition:absoluteが指定されていること。 マウスオーバーされたアイテムには、z-indexが指定されていること。 動的に生成されたアイテムは、hoverされたアイテムのz-indexより小さいz-indexが指定されていること。 /* hoverされたアイテムの親要素 */
機種依存文字や半角カナを変換する jQuery プラグインを書いてみた - Cyokodog :: Diary
以下のような丸囲い数字や半角カナを、他の文字に変換する jQuery プラグインを書いてみました。 フォーム要素などでこれらの値が入力されるケースが良くあるのですが、環境によっては文字化けやトラブルの要因になるので、登録処理を行う前に代替の文字に強制変換するといった使い方をしています。 使い方 jquery.js 、jquery.exreplace.js を読み込み、変換対象の要素に対し exReplace() メソッドを実行すると、表のとおりの変換処理を行います。パラメータを指定することで、変換対象の文字を限定することができます。 Demo 保存ボタンを押した時点で変換したい場合は、保存ボタンの click イベント内で exReplace() メソッドを実行します。 jQuery(function($){ $('#save_btn').click(function(){ $('inpu
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
