tableのデータを元に、棒グラフを生成するjQueryプラグイン・TableBarChart
tableのデータから棒グラフを自動生成するスクリプトのご紹介です。jQueryに依存します。手軽で良かったので備忘録として。 tableに記入されたデータを元にアニメーションエフェクト付きの棒グラフを自動生成する、というもの。以下、動作サンプルです。 tableはマークアップで、棒グラフはそのtableのデータを元に生成されています。 <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script> <script type="text/javascript" src="TableBarChart.js"></script>本体とプラグインを読み込みます。 $('#foo').tableBarChart('#bar', '', false);tableとグラフを表示する要素を指定し
Tilted Content Slideshow
This slider, as seen on the landing page of the FWA, plays with 3D perspective and performs some interesting animations on the right-hand side images. CSS Animations We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called data-effect-in and data-effect-out for every slide. Tilted Items The perspective vi
通知メッセージを実装する為のシンプルなjQueryプラグイン・notifIt!
シンプルで使いやすそうだったので備忘録。アニメーションしながら表示される通知メッセージを実装するシンプルなスクリプト・notifIt!です。jQueryに依存します。 シンプルな通知メッセージ実装スクリプトです。 普通のメッセージ実装スクリプトです。軽量で設定も簡単なので導入しやすそうですね。 notif({ msg: "<b>送信成功:</b> あなたのメッセージは送信されました", type: "success" });メッセージ等のセッティングはオプションで設定します。HHTMLタグも利用可能なのでスタイリングも楽ですね。 軽量なのでスマフォサイトでも気軽に使えるかも。覚えておいて損は無さそうです。 notifIt!
Home | RazorFlow PHP Dashboard Framework - HTML5 Dashboards for web and mobile
RazorFlow PHP is a PHP Framework to easily build interactive, cross-device HTML5 dashboards with a fraction of the effort.Business Demos These demos simulate real-life business usage of RazorFlow PHP. We have built industry and function-specific demos like Sales Dashboard, Retail Inventory Dashboard, and an Executive Overview Dashboard that depict real-life scenarios. View these examples to get in
GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」:phpspot開発日誌
sDashboard GoogleAnalyticsみたいなダッシュボードが作れるフレームワーク「sDashboard」。 次のように、ページ内にドラッグ＆ドロップで移動できるウィジェットを配置し、各種グラフやリストで表示できるダッシュボード作成フレームワーク。 １画面でサイトやアプリの重要な指標をまとめたい場合に使えそうです。 関連エントリ HTML5＆レスポンシブなPHPダッシュボード作成フレームワーク「RazorFlow」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 Windows8スタイルのダッシュボードUIが作れる「Dashing」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」
Accessible Mega Menu
1. Perceivable Information and user interface components must be presentable to users in ways they can perceive. 1.1 Text Alternatives Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.1.1 Non-text Content 1.2 Time-based Media Provide alternatives for time-based media. 1.2.
Animated Opening Type | Codrops
A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters. In this tutorial I’m going to explain how to achieve an interesting 3D opening type effect with CSS based on the one I previously created. My experimen
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
Industrial.js
Industrial.js -- A JavaScript-driven library of CSS3 gauges, tanks, and more.
jQuery Cheat Sheet
Copying .clone() DOM Insertion, Around .wrap() .wrapAll() .wrapInner() DOM Insertion, Inside .append() .appendTo() .html() .prepend() .prependTo() .text() DOM Insertion, Outside .after() .before() .insertAfter() .insertBefore() DOM Removal .detach() .empty() .remove() .unwrap() DOM Replacement .replaceAll() .replaceWith()
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
Learning jQuery - Tutorial Roundup for Beginners
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software and also one of the most popular Javascript libraries, used by designers and developers to enhance a website design beyond the confines of CSS and to easily create complex JavaScript effects with just a few lines of code. The popular JavaScript library, jQuery, wil
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT
jQuery iPhone UIはHTML/JavaScript製のオープンソース・ソフトウェア。iPhone用のWebサイトを構築するニーズが増えてきている。既に幾つかテンプレートもリリースされており、それらを使えば最適化されたインタフェースのサイトが作りやすくなる。 アイコンリスト そうしたライブラリを使う時に重要なのが、どれくらいの機能に対応しているかだ。単純なリストはもちろん、プロフィールページ、画像付きリスト、フォームなど多数のニーズがある。その一つ、JavaScriptを使ったパターンに適合できそうなのがjQuery iPhone UIだ。 jQuery iPhone UIの特徴は名前の通りjQueryを使っていることだろう。同種のライブラリとしてjQTouchがあるが、あちらはがちがちに固まっている雰囲気があるがjQuery iPhone UIは切り離して使えそうだ。HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Notification Styles Inspiration | Growl-Style Scale
ドラッグ＆ドロップで画像をUPできるようにするjQueryプラグイン「JQuery File Uploader」:phpspot開発日誌
iHover CSS3 hover effects pack
MixItUp | KunkaLabs
3D Effect for a Mobile App Showcase | Demo 3
http://moto-mono.net/2010/02/09/jquery-with-animation.html