Posts Tagged ‘ jQuery関連

スタイリッシュなjQueryの日付指定プラグイン『Date Range Picker』


いつか使うかも、という意味でエントリー。「JavaScriptでカレンダーを実現するための38のスクリプト」の続きということで。

filament groupというところがリリースしたDate Pickerです。かなり柔軟な指定ができていい感じ。日付指定というか、範囲指定ですね。

date

↑ いろいろオプションがありますね。

もちろんオプションも豊富なので見た目や動作を細かく制御できますよ。ダウンロード&詳細は以下からどうぞ。

» Date Range Picker using jQuery UI 1.6 and jQuery UI CSS Framework | Filament Group, Inc. (via Ajaxian)

ブラウザ間の差異を気にせず、自由自在にレイアウトできるようになるjQueryのプラグイン『jQuery UI.Layout Plug-in』


ページのレイアウトが複雑になるといろいろな問題が出てきて悩みが尽きないですよね。そこで登場したのが『jQuery UI.Layout Plug-in』です。あっと驚くレイアウトがさくっと作れてしまいます。

しかもjQueryらしく、展開できたり、ドラッグできたり、リサイズできたりしますよ。なんというか、至れり尽くせりですね。

layout-example_1232021998134

↑ まずは基本的なレイアウト。

complex-layout-demo_1232022014279

↑ こんなのもさくっと。左側は展開可能なメニューですね。

nested-layouts_1232022035618

↑ こういう複雑なものも可能です。

多少用語や文法を覚える必要がありますが、jQueryらしくシンプルかつ論理的なのでそれほど難しくないかと。JavaScriptもライブラリを使ってブラウザ間の差異を吸収できるようになりましたよね。こうしたライブラリでレイアウトもそうなって欲しいものです。

詳細&ダウンロードは以下からどうぞ。

» UI.Layout Plug-in – Home

ページの右側から別コンテンツがスライドしてくる『jQuery pageSlide』


いつか使ってみたいかもしれないjQueryのプラグインのご紹介。ページの右側から別のコンテンツがスライドしてくれる、という効果を実現することができます。

page

↑ 右側の黒い部分がスライドしてきます。左側のどこかをクリックすれば元に戻ります。

マークアップも簡単ですね。

<script type="text/javascript">
    $(document).ready(function() {
        $('a.pageslide').pageSlide({
            width: "300px"
        });
    });
</script>

としたあとに、リンクのaタグにclass=”pageslide”をつければOKです。

ちょっとした説明書きや、キャンペーン情報なんかにいいかもしれませんね。詳細&ダウンロードは以下からどうぞ。

» jQuery pageSlide – Halobrite