POS+ LOGO

基本形

基本形反転

縦組み

ダウンロード

POS+ SERVICE LOGO

POS+food

POS+retail

POS+beauty

POS+lite

POS+connect

POS+pay

POS+timerecorder

POS+QSC

POS+engagement

FAVICON

各種サービス

icoデータ

管理画面

icoデータ

ICON

共通

f0d7

<i class="fas fa-caret-down"></i>

f0d8

<i class="fas fa-caret-up"></i>

f2f5

<i class="fas fa-sign-out-alt"></i>

f362

<i class="fas fa-exchange-alt"></i>

f0dc

<i class="fas fa-sort"></i>

f54e

<i class="fas fa-store"></i>

f142

<i class="fas fa-ellipsis-v"></i>

f002

<i class="fas fa-search"></i>

f0b1

<i class="fas fa-briefcase"></i>

f013

<i class="fas fa-cog"></i>

f35d

<i class="fas fa-external-link-alt"></i>

GRID

2 カラムレイアウト

col-6

3 カラムレイアウト

col-4

bootstrap4 - Grid system

COLOR

Primary Color

#xxx

Secondary Color

#xxx

Link

#xxx

Light gray

#xxx

Dark

#xxx

Success

#xxx

warn

#xxx

danger

#xxx

info

#xxx

TYPOGRAPHY

Header 1

color:#4a4a4a

Header 2

color:#4a4a4a

Section header

color:#4a4a4a/bg:#eeeee

This is text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

color:#4a4a4a

This is an inline link

color:#0099d5/hover color:darken(#0099d5,7.5%)

COMPONENTS

Alignment

中央よせ

左よせ

右よせ

Text Color

必要に応じて色味を適用しますが、意味なく多色を使用するのは避けてください。

基本的に色味は変更する必要はありません。bootstrapを上書きする場合は他ページとの統一感などに注意！

プライマリーカラー

セカンダリーカラー

デンジャーカラー

ワーニングカラー

ライトグレーカラー

ダークグレーカラー

Button

サイズ固定

Normal

Large

テキストに応じてサイズを可変（最小サイズを固定）

Normal

Large

非活性

SUB BUTTON

新規追加

メニューボタン

Form

Default Form group - search

地域

名前

フリーワード担当者名/店舗名

Default Form group - add

Form with help text/Required item

担当者コード

半角英数12桁まで

Text

disabled readonly

Select

disabled

Multiselect

disabled

Textarea

disabled readonly

Check

チェック選択済チェック未選択チェック済非活性チェック非活性チェック中間

Radio

ラジオ選択済ラジオ未選択ラジオ非活性

Swith

OFF

スイッチ切替

OFF

スイッチ切替

Segmented control

指名

フリー

未選択

電話予約

disabled

次回予約

直接来店

等幅にしたい場合はsegment__buttonに対してwidthを指定してください。

指名

フリー

未選択

電話予約

disabled

次回予約

直接来店

セグメントスイッチの初期化

common.setSegmentSwitch();

Datepicker

有効期間

有効期間:disabled

有効期間:readonly

有効期間:readonly 初期値あり

Timepicker

予約時間

予約時間:disabled

予約時間:readonly

予約時間:readonly 初期値あり

File Upload

ファイル単一選択

ファイルを選択して下さい

ファイル複数選択（サムネイル表示）

ファイルを選択して下さい

ファイル複数選択（リスト表示）

ファイルを選択して下さい

disabled

ファイルを選択して下さい

Nav with Tabs

幅広い業種の店舗管理を支援するクラウド型モバイルPOSレジ

「POS＋(ポスタス)」は、ポスレジ機能はもちろんのこと、店舗の経営改善を行うための様々なデータの利活用、分析が可能です。また、海外出店対応、数多くのシステムとの連携、免税対応など、多彩な機能を低価格でご提供しています。

飲食店向け「POS＋ food（ポスタスフード）」、理美容室向け「POS＋ beauty（ポスタスビューティ）」、小売店向け「POS＋ retail（ポスタスリテール）」の、それぞれの業界の特性に合わせたラインナップをご用意することで、幅広い業種の店舗管理をご支援しています。

Step1 title

Step2 title

Step3 title

Step4 title

Tables

Normal

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

複数列ヘッダー

Header1	Header2	Header3		Header4
Header1	Header2	Header3-1	Header3-2	Header4-1	Header4-2
Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell

Datatable

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Datatableのオプション指定

Normal

                          
$(document).ready(function () {
    common.table = $("#datatable-sample1").dataTable({
        // 件数切替機能 無効
        lengthChange: false,
        // 検索機能 無効
        searching: false,
        // ソート機能 無効
        ordering: true,
        // ソート機能 初期状態
        // 例：order: [ [ 1, "asc" ] ]
        // 情報表示 無効
        info: false,
        // ページング機能 無効
        paging: false,
        //縦方向のスクロール 有効
        scrollY: "20vh",
        //横方向のスクロール　無効
        scrollX: false,
        //特定のカラムのソート制御
        columnDefs: [{ targets: "no-sorting",orderable: false }],
        //件数が少ない時に縦サイズを省略する
        scrollCollapse: true
    });
});

Datatable複数列ヘッダー

Header1	Header2	Header3
Header1	Header2	Header3-1	Header3-2
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell

Datatableデータエクスポート

Header1	Header2	Header3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Datatableのオプション指定

データエクスポート

buttonsに指定する場合は、別途js/cssファイルの読み込みが必要です。

詳細はこちら

                            
$(document).ready(function () {
  common.table = $("#datatable-sample3").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //ファイル出力
    dom: 'Bfrtip',
    buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ]
  });
});

Datatable fixedcolumns

Header1	Header2	Header3	Header4	Header5	Header6	Header7	Header8	Header9	Header10	Header11	Header12
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Datatableのオプション指定・js

fixedcolumns

                              
$(document).ready(function () {
  common.table = $("#datatable-sample4").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //横方向のスクロール 有効
    scrollX: true,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //列固定：2列
    fixedColumns: {
      leftColumns: 2,
    },
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //特定のカラムの制御
    columnDefs: [{ targets: [0, 1], width: 100 },
    { targets: [2, 3, 4], width: 80 }]
  });
});
//hover対応
$(document).on({
  mouseenter: function () {
    trIndex = $(this).index() + 1;
    $("table.example-datatable-4").each(function (index) {
      $(this).find("tr:eq(" + trIndex + ")").each(function (index) {
        $(this).find("td").addClass("hover");
      });
    });
  },
  mouseleave: function () {
    trIndex = $(this).index() + 1;
    $("table.example-datatable-4").each(function (index) {
      $(this).find("tr:eq(" + trIndex + ")").each(function (index) {
        $(this).find("td").removeClass("hover");
      });
    });
  }
}, ".example-datatable-4 tr");
$(window).on("resize", function () {
  common.table.fnAdjustColumnSizing();
});

Datatable rowreorder

Seq.	Name	Age
1	Ben Affleck	47
2	Christian Bale	45
3	Adam West	88
4	Michael Keaton	68

Datatableのオプション指定

rowreorder

reorderに指定する場合は、別途jsファイルの読み込みが必要です。

詳細はこちら

                                                
$(document).ready(function () {
  common.table = $("#datatable-sample5").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //並び替え機能　有効
    rowReorder: true,
    rowReorder: {
      selector: 'td:last-child'
    },
    //特定カラムの制御
    columnDefs: [
      { orderable: true, className: 'reorder', targets: 0 },
      { orderable: false, targets: '_all' }
    ]
  });
});

Datatable empty

Header1	Header2	Header3

Datatableのオプション指定

empty

                              
$(document).ready(function () {
  common.table = $("#datatable-sample6").dataTable({
    // 件数切替機能 無効
    lengthChange: false,
    // 検索機能 無効
    searching: false,
    // ソート機能 無効
    ordering: true,
    // ソート機能 初期状態
    // 例：order: [ [ 1, "asc" ] ]
    // 情報表示 無効
    info: false,
    // ページング機能 無効
    paging: false,
    //縦方向のスクロール 有効
    scrollY: "20vh",
    //横方向のスクロール　無効
    scrollX: false,
    //特定のカラムのソート制御
    columnDefs: [{ targets: "no-sorting",orderable: false }],
    //件数が少ない時に縦サイズを省略する
    scrollCollapse: true,
    //0件表示の時の文言をカスタムする
    "language": {
      "emptyTable": "何もないよ"
    }
  });
});

その他Datatable操作についてはこちら：Datatable reference

Cards

Normal

タイトル

コンテンツ

List

タイトル

リストの項目
リストの項目

チェックボックスグループ

2列表記

001:チェック項目 002:チェック項目 003:チェック項目 004:チェック項目 005:チェック項目 006:チェック項目

1列表記

001:チェック項目 002:チェック項目 003:チェック項目

チェックボックス、セレクトボックスグループ

項目1

項目2

項目3

項目4

項目5

001:チェック項目 002:チェック項目 003:チェック項目 004:チェック項目 005:チェック項目 006:チェック項目

top

right

left

bottom

Badge

NEW NEW NEW NEW NEW NEW NEW

Modals

Collapse

一括選択

example

example text

Alerts

Default alert

Success alert

Info alert

Warning alert

Danger alert

Dismissible alert

注意!　このアラートはあなたの注意が必要です。

Breadcrumbs

Alerts

Confirm

Tabulator

tabulator v4.9.1

http://tabulator.info/docs/4.9

下記以外はサンプルページを参照してくださいサンプルページ

基本的な使い方

HTML

                          <div id="tabulator-table" class="tabulator"></div>
<script>
const columns = [
  { title: "名前", field: "name", width: 150 },
  { title: "年齢", field: "age", hozAlign: "left", formatter: "progress", variableHeight: false , formatterParams: {
    color: ["#057FE1"]
  }},
  { title: "好きな色", field: "col" },
  { title: "生年月日", field: "dob", sorter: "date", hozAlign: "center" },
]
var tabledata = [
  { id: 1, name: "山田　慎太郎", age: "12", col: "赤", dob: "" },
  { id: 2, name: "鈴木　隆氏", age: "1", col: "青", dob: "1982/05/14" },
  { id: 3, name: "佐藤　英一郎", age: "42", col: "緑", dob: "1982/05/22" },
  { id: 4, name: "中村　孝太郎", age: "125", col: "オレンジ", dob: "1980/08/01" },
  { id: 5, name: "森　雅弘", age: "16", col: "黄色", dob: "1999/01/31" },
];
var table = new Tabulator("#tabulator-table", {
  height: 200,
  data: tabledata,
  layout: "fitColumns",
  columns: columns,
  rowClick: function (e, row) {
    alert("Row " + row.getData().id + " Clicked!!!!");
  },
});
</script>

編集モード

編集した後はcellに対してdata_modifiedクラスを付与してください。
入力不可の列に対してはdisable_editクラスを付与してください。
方法はサンプルを参照ください。

HTML

                          <div id="edit-table" class="tabulator"></div>
<script>
var tabledata = [
  { id: 1, name: "山田　慎太郎", age: "12", col: "赤", dob: "" },
  { id: 2, name: "鈴木　隆氏", age: "1", col: "青", dob: "1982/05/14" },
  { id: 3, name: "佐藤　英一郎", age: "42", col: "緑", dob: "1982/05/22" },
  { id: 4, name: "中村　孝太郎", age: "125", col: "オレンジ", dob: "1980/08/01" },
  { id: 5, name: "森　雅弘", age: "16", col: "黄色", dob: "1999/01/31" },
];
var dateEditor = function (cell, onRendered, success, cancel) {
  const format = "YYYY/MM/DD";
  const unique_str = common.getUniqueStr();
  const cellValue = moment(cell.getValue()).format(format);

  input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("id", unique_str);
  input.classList.add("datepicker")
  input.classList.add("input-item-sm")
  input.classList.add("d-inline-block")
  if (cellValue == "Invalid date") {
    input.value = "";
  } else {
    input.value = cellValue;
  }
  onRendered(function () {
    input.style.height = "100%";
    input.style.width = "100%";
  });

  function onChange() {
    if (input.value != cellValue) {
      success(moment(input.value).format(format));
    } else {
      cancel();
    }
  }

  //inputの描画後にする処理
  setTimeout(() => {
    const selector = "#" + unique_str;
    $(
      selector
    ).bootstrapMaterialDatePicker(options).on("open",x=>{
      common.setDatepickerChecker(x,options)
    })
    .on("close", e => {
      onChange(e);
    });
    // focusによって起動させるためにblur>focus
    input.blur();
    input.focus();
  }, 10)

  return input;
};
const edit_params = {
  values: {
    "red": "赤",
    "blue": "青",
    "green": "緑",
    "orange": "オレンジ",
    "yellow": "黄色"
  }
};
const edit_columns = [
  { title: "名前", field: "name", width: 150, editor: true, cssClass: "disable_edit" },
  {
    title: "年齢", field: "age", hozAlign: "left", formatter: "progress", editor: true, formatterParams: {
      color: ["#057FE1"]
    }
  },
  { title: "好きな色", field: "col", editor: true },
  { title: "生年月日", field: "dob", sorter: "date", hozAlign: "center", editor: dateEditor },
]
var tableEdit = new Tabulator("#edit-table", {
  data: tabledata,
  layout: "fitColumns",
  columns: edit_columns,
  cellEdited:function(cell){
    cell.getElement().classList.add("data_modified");
  },
});
</script>

POS+ LOGO

基本形

ダウンロード

POS+ SERVICE LOGO

POS+food

POS+retail

POS+beauty

POS+lite

POS+connect

POS+pay

POS+timerecorder

POS+QSC

POS+engagement

FAVICON

各種サービス

管理画面

ICON

共通

GRID

2 カラムレイアウト

3 カラムレイアウト

COLOR

TYPOGRAPHY

Header 1

Header 2

COMPONENTS

Alignment

Text Color

Button

Form

Nav with Tabs

Step navigation

Tables

Cards

Tooltip

Badge

Modals

Collapse

Alerts

Breadcrumbs

Alerts

Alerts

Confirm

Tabulator

tabulator v4.9.1

基本的な使い方

編集モード