元に戻す／やり直し

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<script src="https://cdn.grapecity.com/samples/wijmo/jp/scripts/sample.js"></script>
<script src="https://cdn.grapecity.com/samples/wijmo/jp/scripts/UndoStack.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <button id="undo" type="button" class="btn btn-default" onclick="undoStack.undo()" disabled>元に戻す</button>
    <button id="redo" type="button" class="btn btn-default" onclick="undoStack.redo()" disabled>やり直し</button>
  </div>
</nav>

<div class="container">
  <form id="form">
    <div class="form-group">
      <label for="text">テキスト</label>
      <input id="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="select">選択</label>
      <select id="select" class="form-control">
        <option value="value1">選択1</option>
        <option value="value2" selected>選択2</option>
        <option value="value3">選択3</option>
      </select>
    </div>
    <div class="form-group">
      <label for="textarea">複数行テキスト</label>
      <textarea id="textarea" class="form-control"></textarea>
    </div>
    <div class="form-group">
      <label for="range">範囲</label>
      <input id="range" class="form-control" type="range" min="0" max="50" value="45">
    </div>
    <div class="form-group">
      <label class="checkbox-inline">
        <input...

CSS

body { padding-top: 70px; }

JavaScript

// Wijmoコントロールを生成
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders()
});
flexGrid.columns[1].width = 200;
var inputDate = new wijmo.input.InputDate('#inputDate');
var inputMask = new wijmo.input.InputMask('#inputMask', {
  mask: '☎000-0000-0000'
});
var inputNumber = new wijmo.input.InputNumber('#inputNumber', {
  step: 1
});
var comboBox = new wijmo.input.ComboBox('#comboBox', {
  itemsSource: sample.countryNames()
});
var multiSelect = new wijmo.input.MultiSelect('#multiSelect', {
  itemsSource: sample.countryNames()
});
var linearGauge = new wijmo.gauge.LinearGauge('#linearGauge', {
  isReadOnly: false
});

// UndoStackを生成
var undoStack = new wijmo.undo.UndoStack('#form');
undoStack.stateChanged.addHandler(function (s, e) {
  document.getElementById('undo').disabled = !undoStack.canUndo;
  document.getElementById('redo').disabled = !undoStack.canRedo;
});