// 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; });
<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 type="checkbox" id="check1" value="option1"> チェック1 </label> <label class="checkbox-inline"> <input type="checkbox" id="check2" value="option2" checked> チェック2 </label> <label class="checkbox-inline"> <input type="checkbox" id="check3" value="option3"> チェック3 </label> </div> <div class="form-group label-indent"> <label class="radio-inline"> <input type="radio" name="radio" id="radio1" value="option1"> ラジオ1 </label> <label class="radio-inline"> <input type="radio" name="radio" id="radio2" value="option2" checked> ラジオ2 </label> <label class="radio-inline"> <input type="radio" name="radio" id="radio3" value="option3"> ラジオ3 </label> </div> <div class="form-group"> <label for="flexGrid">グリッド</label> <div id="flexGrid"></div> </div> <div class="form-group"> <label for="inputDate">日付入力</label> <div id="inputDate"></div> </div> <div class="form-group"> <label for="inputMask">マスク入力</label> <div id="inputMask"></div> </div> <div class="form-group"> <label for="inputNumber">数値入力</label> <div id="inputNumber"></div> </div> <div class="form-group"> <label for="comboBox">コンボボックス</label> <div id="comboBox"></div> </div> <div class="form-group"> <label for="multiSelect">複数選択</label> <div id="multiSelect"></div> </div> <div class="form-group"> <label for="linearGauge">ゲージ</label> <div id="linearGauge"></div> </div> </form> </div>