折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」:phpspot開発日誌
折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 2012年10月31日- Timeliner.js Demo 折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 Facebookのタイムラインみたいな感じで、歴史系のコンテンツを載せるのに適したプラグインです ルールに従ってHTMLを記述して、$.timeliner() で初期化する感じで使えます 会社の歴史、サービスの歴史といった感じで色々と歴史系のコンテンツはあるので、そういったものを作る際に使ってみてもよいかも。 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート facebookのタイムラインをjQueryとCSSで作るチュートリアル Facebookのデザインにも負けない超カッコいいタイムラインを
背景にmp4の動画を流せるjQueryプラグイン「BigVideo.js」
twitter facebook hatena google pocket 背景に動画を流せると印象的なサイトになります。 これを簡単に実現するのがBigVideo.js - The jQuery Plugin for Big Background Videoです。 インパクトのあるサイトにご利用ください。 sponsors 使用方法 BigVideo.js - The jQuery Plugin for Big Background Videoからファイル一式をダウンロード。 <link rel="stylesheet" href="bigvideo.css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1
テーブルをグラフに変換してくれるjQueryプラグイン:phpspot開発日誌
jQuery HighchartsTable plugin, from PMSIpilot テーブルをグラフに変換してくれるjQueryプラグイン。 CSVをダウンロードしてExcelでグラフ化、といった事は仕事でよく行う人も多いかと思いますが、jQueryを使ってテーブルをグラフにしちゃおうというプラグインです グラフはSVGで表現されるので非対応ブラウザでは表示ができない点に注意したほうがよさそうですが、管理画面やツールなんかで利用すると便利そうです。 棒グラフ。１つのチャートを比較 線グラフ ミックスバージョン 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル jQuery＋HTML5でカッコいいアニメーションす
Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」:phpspot開発日誌
BookBlock: A Content Flip Plugin | Codrops Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 safari等で見る必要がありますが、良い感じにページめくりを実現出来ます。 iOSデバイス用のサイトなんかで使えそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 円形の冊子ページをめくる風機能をCSS3とjQueryで実現するチュートリアル
HTML内にPDFを埋め込めるJSプラグイン集:phpspot開発日誌
7 Best jQuery & JavaScript PDF Viewer plugin with examples HTML内にPDFを埋め込めるJSプラグイン集。 通常PDFというとPDFページにリンクして直接開くというものが多いですが、こうしたプラグインを使うことで、HTMLの中にIFrameのようにPDFを埋めこんで表示が可能です。 ブラウザプラグインを使うものや、GoogleDocを使うもの、直接JSでレンダリングしてしまうものなど様々まとまっています。 リンク先PDF、というとちょっと躊躇してしまう時がありますが、こうしてHTML内に埋め込まれていると抵抗が個人的には少ないです。 関連エントリ ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
jQueryが要素検索に使うSizzleについて。 | Ginpen.com
jQueryの強力な機能のひとつに、 $('#the-target') のようにCSSのセレクターを用いて要素検索できるというものがあります。この要素検索を行うモジュールにはSizzleという名前が付けられています。 一方、近代的なブラウザーには .querySelectorAll() がネイティブで実装されています。こちらもCSSのセレクターで要素検索できるメソッドです。 セレクタを使用した DOM 要素の指定 | Mozilla Developer Network var $elems = $('elem#id.class, .and.more.selectors'); var elems = document.querySelectorAll('elem#id.class, .and.more.selectors'); JavaScriptで何かするよりも、ネイティブでやった方が高速
CDNでウェブサイトを高速化するためのまとめ
CDNでウェブサイトを高速化するためのまとめです。 「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。 認識誤り等ありましたらどこかでつぶやいてください。 １．CDNとは CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Contents Distribution Network（コンテンツディストリビューションネットワーク）」のことで（注）、コンテンツを配信するために最適化されたネットワークを指します。 Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス（企業）が著名な商用CDNサービスを提供しているようです。 Akamai Technologies Limelight Networks
ddSlick - a jQuery plugin for custom drop down with images
Design with PC Subscribe to this blogStarter. Entrepreneur. Web Developer. Co founded Mr Right and Kaaryaa Labs. BlogHovercardddSlick Ever wanted a drop down with images? Well, You now have a plugin for that! A free light weight jQuery plugin that allows you to create a custom drop down with images and description. What is so cool about this plugin! Adds images and description to otherwise boring
PCスマフォ両用できる階層メニューを実現するjQueryプラグイン「Simple Responsive jQuery Navigation Plugin」
twitter facebook hatena google pocket 昨今はレスポンシブデザインが流行している感じですが、Simple Responsive jQuery Navigation Pluginを利用すると、階層化されたメニューもいい感じで対応してくれます。 sponsors 使用方法 Simple Responsive jQuery Navigation Pluginからファイル一式をダウンロード。 メニューは下記のようなシンプルで3階層まであるもの。 <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Our Mission</a></li> <li><a href="#">General Info</a></li> <li><a href="#">Hist
E-mailを自動でリンクしてくれるjQueryプラグイン「jHyper」
twitter facebook hatena google pocket その名の通り、E-mailを自動でリンクしてくれます。 jQuery Hyperlink all email addressesはtest@example.comと書いたのはもちろん、test at example dot comと書いたものもmailtoにしてくれます。 sponsors 使用方法 jQuery Hyperlink all email addressesからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jHyper.js"></script> <script type="text/javascript"> $(do
[JS]ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
Twitter, Facebook, Google+, RSSなど、ソーシャルメディアの不揃いなデザインのボタンを統一した美しいデザインにしてブログやサイトに設置するjQueryのプラグインを紹介します。 Koottam Social jQuery Plugin [ad#ad-2] Koottamの主な特徴 Koottamのデモ Koottamの使い方 Koottamの主な特徴 Twitter, Facebook, Google+などのアカウントを設定するだけで設置できます。 7種類のテーマがあり、CSSベースでカスタマイズも可。 カウントの表示はスタティック・アニメーションに対応。 カラーは簡単に変更できます。 より大きいカウント用に省略表記も対応。 MITライセンスのため、あらゆるブログ・サイトに使用しても無料！ Koottamのデモ
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
jQuery Content Slider – 軽量なスライドショーを実装するjQueryプラグイン – creamu
jQuery Content Sliderは、軽量なスライドショーを実装するjQueryプラグインです。 jquery.easingを使用しているので、easingの具合はeaseOutElasticなどで調整できるようです。 jQuery Content Slider
FeedEk jQuery RSS/ATOM Feed Plugin
Usage Include jQuery and FeedEk plugin scripts into your page. <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="FeedEk.min.js"></script> Add a placeholder for the plugin to your page <div id="divFeed"></div> Call the plugin Basic $('#divFeed').FeedEk({ FeedUrl:'https://jquery-plugins.net/rss' }); Multiple Feed Url $('#divFeed').FeedEk({ FeedUr
Youtube動画をページ背景にするjQueryプラグイン「tubular」:phpspot開発日誌
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Youtube動画をページ背景にするjQueryプラグイン「tubular」 こんなことが出来ちゃうのかという感じですが、ページ背景全体をYoutube動画にできます。 実装は、$('body').tubular('_VKW_M_uVjw','wrapper'); のように、tubular にvideoIDの引数とラッパーのIDを渡せばOK。 背景をクリックで動画にとんじゃいますが、ホスティングしてもらってるわけなのでしょうがないですね。 コンテンツ領域は問題なくクリックできるところがナイスです。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 時間の入力を楽にすることが出来るjQuer
HTML5 で作る iPhone ローカル Web アプリ入門
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
[JS]jQueryのプラグイン33 1選 -2011年10・11月 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カレンダーやDateピッカー関連のjQueryプラグイン20:phpspot開発日誌
https://design-spice.com/2012/06/13/responsive-web-design-image/
Android風の日付ピッカー実装用jQueryMobileウィジェット「Mobi Pick」:phpspot開発日誌