ChartThe Chart makes your data pop, and it is easy to use. It provides you with multiple charts like Bar, Column, Line, and more.
hierarchi-viewは上図のような家系図でよくある縦表示の階層を描けるCSSです。例では企業等での役職順が表現されています。こういうの作るの割と面倒なので地味に使いみちあるかもですね。 hierarchi-view
Result jQuery//参照元に準拠し、onclick処理はtable内に書いてます function show_hide_row(row) {$("#"+row).toggle();}css#table_detail tr:hover{ background-color:#ddd; cursor:pointer; } #table_detail .hidden_row{ display:none; }html<table border=1 id="table_detail" align=center cellpadding=10> <tr> <th>名前</th> <th>年齢</th> <th>給料</th> <th>仕事</th> </tr> <tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><
stickyTableColumnsは、データ量の多い表をページで表現する際にとても便利なjQueryプラグインです。表を「table」タグで作成したときに、その表の枠の幅を固定させ、表示可能領域以外の部分は水平(左右)にスライドすることで見ることができます。また、スライドバーも表の下部に表示されます。表をWEBページで表現すると、内容が分かりやすいうえに、単に目立たせる役割も果たしてくれます。それでは、このプラグインの詳細を見ていきましょう。 stickyTableColumnsの実際のデモは以下になります。 デモ まず、stickyTableColumnsの使用には、jQueryの読み込みが必要です。その上で、stickyTableColumnsのファイルを読み込みます。 HTMLの記述は通常どおり「table」タグを使用してください。CSSで表の幅や余白などの指定はしておきましょう。
Combodateは日付や時間の入力をドロップダウン式に置き換えてくれるjQueryプラグインです。オプションでフォーマットやテンプレートを指定することができます。 シンプルで見やすい日付・タイムピッカーです。日付や時間を入力するのがめんどくさい人にとってはとても助かりますね。 Combodateのダウンロードや詳細は以下になります。実際のデモも確認できます。 Combodate 年、月、日、時、分などといったものをドロップダウンから選べるようになります。 オプションでdata-formatやdata-templateを指定できます。また、minYearやmaxYearを設定することで、最小値と最大値の年を決めることも可能です。 valueに指定した値は最初に表示される初期値になります。そのほか、yearDescending、minuteStep、secondStep、firstItem、
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
スケジュール管理でオススメの軽量jqueryプラグイン「jq.schedule.js」 by ateliee · 公開済み 2014年6月15日 · 更新済み 2014年6月15日 スケジュールなどのタイムラインを表示するjqueryプラグインはいろいろありますが、 なかなかしっくりくるものがないので、自作してみました。 ダウンロードはこちらから スケジュール管理用jqueryプラグイン jq.schedule.js 使い方 プラグインをダウンロード後、/demo/ページをご覧いただくとどれだけシンプルなプラグインか確認できます。 jquery.jsとjquery.ui.jsに依存しておりますので、別途ご用意する必要があります。 機能 無制限でスケジュール管理する人数を増やすことができます。 ドラックアンドドロップでスケジュールを移動することが可能 時間を縮めたりのばしたりもドラックアンド
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通:要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く