Examples - wheel tab, pie menu, sub menu, classic tab.
Examples - wheel tab, pie menu, sub menu, classic tab.
世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。 そういったデータを表現できるライブラリがTimesheet.jsです。特徴的なのはCSS3で作成されている点にあるでしょう。 Timesheet.jsの使い方 こちらが表示例になります。細いバーでスタイリッシュですよね。 JavaScriptは次のようになります。 new Timesheet('timesheet', 2002, 2013, [ ['2002', '09/2002', 'A freaking awesome time', 'lorem'], ['06/2002', '09/2003', 'Some great memories', 'ipsum'], : ['09/2
jQRangeSlider: jQuery plugin for range sliders 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」。 範囲をドラッグ＆ドロップで狭めたり、範囲の幅はそのままにドラッグ＆ドロップで移動して値を調整できるUIが作れます 日付の範囲や、20〜50といった数値の範囲を入力してもらうよりも持って手軽に入れてもらえるUIを提供できますね。 関連エントリ カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 リアルなWindows風ツ
前回の記事で、JavaベースのプロダクトのモニタリングはJolokiaが良い感じかも、って記事を書いた。んで、jolokiaで取得したデータをGrowthForecastに突っ込んでグラフを描画させてたんだけど、あんましっくりこなかった。んで、ここは自作しかねーやと思って、いろいろグラフ描画のライブラリ探してたらCubism.jsってのを見つけた。どうやらd3.jsのプラグインみたい。同僚はrickshaw.jsを推してたんだけど、俺はCubism.jsの方が見栄え的にシンプルで好きだったので、CubismでCassandraの自作モニタリングツールを作ってみた。 1. Cubism.js ↓が公式サイト Cubism.js. A Time Series Visualization. http://square.github.com/cubism/ 2. こんな感じです ↓が画像です。Ca
jQRangeSliderは日付や数値を範囲で絞り込む際に便利なスライダーライブラリです。 情報を絞り込んだり、データを登録する際には様々な入力方式が考えられます。今回はjQRangeSlider、範囲指定のスライダー入力コンポーネントを紹介します。 例です。 ドラッグして範囲を変更できます。 ぐぐっと移動。 左右の矢印で範囲は固定のまま移動させられます。 値を入力して変更もできます。 一気に逆まで。 細かなカスタマイズもできます。 jQRangeSliderはフローティング部分をドラッグして範囲を指定して、左右の矢印を使って範囲全体を移動できます。ホイールでの範囲指定もできます。iOSやAndroidでのタッチ操作もサポートしています。日付や数値の範囲指定に使うと便利そうです。 jQRangeSliderはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT
jQuery emojiareaはテキストエリアの内部に絵文字を表示できるようにするjQueryプラグインです。 日本製で、iPhoneで採用されたあたりから一気に普及が進んでいるのが絵文字です。元々アイコンを表示するレベルであれば多数ありましたが、よりバリエーションが増えたように思います。Webサービスにおいて絵文字を利用する場合に使ってみたいのがjQuery emojiareaです。 上が素の表示。下が絵文字表示版です。 絵文字は色々用意されています。 選択することもできます。 ダイレクト入力においても選択すると該当する絵文字が文字として入力されます。 こんな感じで。 jQuery emojiareaを使えばテキストエリアの中にダイレクトに絵文字が差し込めるようになります。絵文字は絵文字チートシートに記述されている指定が利用できます。例えば:smile:と打てばスマイルアイコンが表示さ
envision - demos 拡大可能なGoogleAnalytics風のグラフを描画するJSライブラリ「envision」。 グラフの特定期間をドラッグ＆ドロップで指定して拡大したり、データのビジュアライズに便利に使えそうなライブラリです。 横に長いグラフだとデータを見るのが大変になりますが、期間をインタラクティブに限定することで見やすくすることが出来ます FlashによるフォールバックでIE6+にも対応しているようです 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル faviconを円グラフにしてアニメーションできる「Piecon」
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
はいどうも～。Japanese Schoolgirlsが好きなエンジニアの吉田です。 以前「jQuery.tmpl() で HTML の View と Model を分離してみるよ」という 記事を書きましたが、引き続きJavaScriptによるMVCシリーズ第二弾！ 今回は、Backbone.jsでViewとModelを分離させてみるという試みです。 ここ最近、JavaScriptのMVCライブラリだと「JavaScriptMVC」や「Knockout.js」 「Backbone.js」などがぼちぼちと知名度を挙げてきているような印象です。 (※注)正確にはKnockout.jsはMVCではなくMVVM(Model-View-ViewModel)ですね。 そんな中SoundCloudなどでも使用されているBackbone.jsがとても気になって いたので、どのような感じで利用できるのか試し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
