HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

クリックするとサンプルを表示します。

  1. select optgroup グループ内オプション選択サンプル

    select optgroup のグループ内のオプションをすべて選択します。

  2. jqPlot 折れ線グラフ 簡単サンプル

    jqPlot の折れ線グラフを作成する簡単なサンプルです。

  3. jqGrid セル中リンクを表示するサンプル

    jqGrid セル中リンクをクリックして表示するサンプル

  4. jqGrid の行をグループ化(grouping)して1行おきに背景色を変えて表示するサンプル

    jqGrid の行をグループ化して1行おきに背景色を変えて表示するサンプルです。

  5. jqGrid 行グループ化(grouping)の簡単サンプル

    jqGrid の行をグループ化して表示するサンプルです。

  6. jqPlot 棒グラフ 簡単サンプル

    jqPlot の棒グラフを作成する簡単なサンプルです。カスタム色の使用やマウスのクリックを処理を行っています。

  7. jQuery UI カスタムコンボボックス(オートコンプリート) サンプル

    オートコンプリート(autocomplete, 入力補完機能)を応用したコンボボックス。コンボボックスのテキストボックスに文字を入力すると、選択項目一覧から一致する項目を絞り込み表示します。

  8. jQuery UI Datepicker(カレンダー)を不特定多数のフィールドに動的に表示するサンプル

    日付フィールドに DatePicker を動的に生成または消滅させることができます。フィールド数が不特定多数の場合に役立ちます。

  9. jqGrid グリッド内データをサーバーに送信 サンプル

    jqGrid はグリッド内のデータをサーバーへ送信する方法をご紹介します。

  10. jqGrid ナビゲーションバー(naviGrid) サンプル

    jqGrid はグリッドの下部、ナビゲーションバー(naviGrid)に行の追加、編集、削除、検索を行うためにボタンを配置しデータ編集をします。

  11. jqGrid マスターグリッドと詳細グリッドの連携サンプル

    親レコードと子レコードの関係を持つテーブルを2つの jqGrid グリッドで表示させ、マスターグリッドと詳細グリッドの連携をします。

  12. jqGrid のデータをCSV形式で出力(クライアント側)サンプル

    jqGrid の選択したデータをCSV形式でダウンロードできるようにします。

  13. jQuery UI タブで指定したタブを無効にする

    jQuery UI タブで指定したインデックスのタブを無効にして選択出来なくします。

  14. jqGrid インライン編集データ送信 サンプル

    jqGrid グリッドのセルの内容を編集して確定した時点でサーバーへポストする方法をご紹介します。

  15. jQuery UI タブで選択されたタブを判定するサンプル

    jQuery UI タブの選択イベント発生時に選択されたタブのインデックスでどのタブが選択されたかを判定します。

  16. jQuery UI Datepicker(カレンダー)サイズの変更 サンプル

    jQuery UI Datepicker(カレンダー)サイズを変更する方法をご紹介します。フォントサイズを小さくすることでカレンダーが小さくなります。

  17. jQuery UI Datepicker(カレンダー)表示位置の変更 サンプル

    jQuery UI Datepicker(カレンダー)表示位置を jQuery Position を使って変更する方法をご紹介します。

  18. jqGrid セル内のテキスト折り返し・改行 サンプル

    jqGrid のグリッド列幅にあわせてテキストを折り返し表示する方法と、区切り文字で改行させる方法を紹介します。

  19. jqGrid データ編集時に列を読み込み専用 サンプル

    グリッドのデータを編集するときだけ列を読み込み専用にします。データを新規に追加する時は入力可能にしておいて、編集時は読み込み専用にしたい場合などに使えます。

  20. jqGrid 非表示列を編集時のみ表示 サンプル

    非表示になっているグリッド列のデータを編集するときだけ表示します。

  21. jqGrid 列の表示・非表示 サンプル

    グリッドの列を表示・非表示にします。

  22. jqGrid XML/JSON 形式データ出力サンプル

    jqGrid に表示するデータをデータベースから取得して、XML形式かJSON形式で出力します。

  23. jqGrid XML データ サンプル

    jqGrid に XML データを取得して表示します。

  24. jqGrid JSON データ サンプル

    jqGrid に JSON データを取得して表示します。

  25. jqGrid の行を一行おきに背景色を変える

    jqGrid の行を見やすくするために一行おきに背景色を変える方法をご紹介します。

  26. jqGrid 横幅のサイズをパーセント指定と同等方法

    jqGrid の横幅(width)はピクセル単位となっています。横幅をパーセントで指定する方法と同等の方法をご紹介します。

  27. jQuery UI Datepicker(カレンダー)指定日の選択を無効

    jQuery UI Datepicker で水曜日、日曜日、祝日など指定日をカレンダーで選択できなくする方法をご紹介します。

  28. jQuery UI Datepicker(カレンダー)土・日・祝日の表示色の変更

    jQuery UI Datepicker で土曜日、日曜日、祝日など指定日の色を変える方法をご紹介します。

  29. jQuery UI Datepicker(カレンダー)土・日の表示色の変更

    jQuery UI Datepicker で土曜日・日曜日の色を変える簡単な方法をご紹介します。

  30. PHPでWebサービス(GETリクエスト)の呼び出し

    PHPで Webサービス(GETリクエスト)を呼び出す例として、「Yahoo ディベロッパーネットワーク」が提供している「テキスト解析 キーフレーズ抽出」APIを使用してみます。

  31. jqGrid 横スクロール サンプル

    jqGrid で横幅を固定して内容を横スクロールで表示できるようにします。

  32. jqGrid に jQuery UI Datepicker(カレンダー)を表示するサンプル

    jqGrid のセルに日付データを入力または編集する際に jQuery UI Datepicker(カレンダー)を表示します。

  33. PHP 年間カレンダー サンプル2

    前回、PHPで作成したカレンダーを元に土日を考慮して作成しなおしました。

  34. PHP 年間カレンダー サンプル

    スケジュールや日別集計などに使えるようにPHPでカレンダーのようなものを作成しました。

  35. jQuery UI Datepicker(カレンダー)日付の初期値の表示

    Datepicker に関連付けされたテキストフィールドに日付を初期値として設定する方法を実験してみました。

  36. jQuery UI タブ サンプル

    jQuery UI の タブの追加、削除、タブへコンテンツの読み込みをやってみました。

  37. jqGrid 行データフォーム編集・サーバー送信 サンプル

    jqGrid グリッド内のデータ編集を入力フォーム(ポップアップ)を表示して行います。また編集結果をサーバーへポストします。

  38. jQuery UI ダイアログ サンプル

    入力フォームをダイアログ(ポップアップ)表示します。jQuery UI の Dialog を応用してみました。

  39. jQuery UI ハイライト・エラー サンプル

    画面上にメッセージを目立たせて表示するために、メッセージ領域を設けてテキストを表示する場合があると思いますが、 jQuery UI の Hightlight / Error を応用してみました。

  40. jQuery UI Button(ラジオボタン) ツールバー サンプル

    本サイトのメニューに使用している jQuery UI Button ウィジェットのサンプル表示です。 ラジオボタンをボタンセット(buttonset)として、ツールバーのように表示してくれます。

  41. ajax を利用した簡単サンプル

    jQuery の ajax を利用して、入力した郵便番号をから住所を「郵便番号住所検索サービス」を利用して住所を取得し表示します。

  42. jQuery UI Datepicker(カレンダー)インライン表示

    jQuery UI Datepicker のインライン表示でカレンダーを常時表示します。

  43. jQuery UI Datepicker(カレンダー)簡単サンプル2

    jQuery UI Datepicker で [...] ボタンをクリックすると2ヶ月分のカレンダーを表示します。

  44. jQuery UI Datepicker(カレンダー)簡単サンプル

    jQuery UI Datepicker で テキストボックスか[...] ボタンをクリックするとカレンダーを表示します。

  45. jqGrid グリッド行の追加・削除サンプル

    jqGrid のグリッドに行を追加したり、削除するサンプルです。

  46. jqGrid 行データ編集サンプル

    jqGrid のセルのデータを直接編集できるようにします。

  47. jqGrid コンボボックス サンプル

    jqGrid のセルに値を入力するのにコンボボックスを表示させて、選択出来るようにします。

  48. jqGrid 選択ラジオボタンサンプル - カスタムフォーマット版

    jqGrid の行頭にカスタムフォーマットを利用してラジオボタンを表示します。

  49. jqGrid 選択ラジオボタンサンプル

    jqGrid の行頭にラジオボタンを表示します。

  50. jqGrid 複数行選択サンプル

    jqGrid は複数選択を許可する multiselect オプションを true にセットすると、行頭にチェックボックスを表示して、グリッド内のデータ行を複数選択できます。

  51. jqGrid ソートサンプル

    jqGrid はデータの並べ替えに sorttype というオプションを指定することで順序を変えることができます。

  52. jqGrid 簡単サンプル

    jqGrid の基本ということで mydata という配列に あらかじめデータをセットして、jqGrid にその配列を渡すだけで表示する簡単サンプル。

  53. ファイル参照を使用してファイル名を取得するサンプル

    テーブルの各行にファイル参照を付加して行の追加・削除を行います。

  54. テーブルに行を追加・削除・行の内容を編集するサンプル

    テーブルに行を追加・削除・行の内容を編集する機能を実装します。