Make a good demo page to sh...
Jeremy D authored 2 years ago
|
1) <!DOCTYPE html>
2) <html>
3) <head>
4) <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5) <title>JQuery Number Control with Virtual Keyboard</title>
6) <meta name="robots" content="noindex, nofollow">
7) <meta name="googlebot" content="noindex, nofollow">
8) <meta name="viewport" content="width=device-width, initial-scale=1">
9) <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
10) <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css">
11) <link rel="stylesheet" type="text/css" href="./jquery-numbercontrol.css">
12) </head>
13) <body>
14) <ul class="nav nav-tabs mb-5">
15) <li class="nav-item">
16) <a class="nav-link active" data-tab="default">Default</a>
17) </li>
18) <li class="nav-item">
19) <a class="nav-link" data-tab="decimal">Decimal</a>
20) </li>
21) <li class="nav-item">
22) <a class="nav-link" data-tab="setvalue">Set Value</a>
23) </li>
24) <li class="nav-item">
25) <a class="nav-link" data-tab="highlight">Highlight</a>
26) </li>
|
|
Fixed a bug where if inputP...
Jeremy D authored 2 years ago
|
27) <li class="nav-item">
28) <a class="nav-link" data-tab="noparent">No Parent</a>
29) </li>
|
|
Make a good demo page to sh...
Jeremy D authored 2 years ago
|
30) </ul>
31)
32) <div id="content_containers">
33) <!-- Default number contorls -->
34) <div id="viewbox_default">
35) <div class="col-sm-2">
36) <input type="text" id="numbercontrol_default" value="0" min="-500" max="500" />
37) </div>
38) </div>
39)
40) <!-- Decimal example -->
41) <div id="viewbox_decimal" style="display:none;">
42) <div class="col-sm-2">
43) <input type="text" id="numbercontrol_decimal" value="0" min="-10" max="10" step="0.01" />
44) </div>
45) </div>
46)
47) <!-- Save another field exmaple -->
48) <div id="viewbox_setvalue" style="display:none;">
49) <div class="row">
50) <div class="col-sm-2">
51) <input type="number" id="numbercontrol_setvalue" value="" min="-500" max="500" />
52) </div>
53) <div class="col-sm-2 offset-sm-2">
54) <span id="setvalue_setbox"></span>
55) </div>
56) </div>
57) </div>
58)
59) <!-- Highlight field exmaple -->
60) <div id="viewbox_highlight" style="display:none;">
61) <div class="col-sm-2">
62) <input type="text" id="numbercontrol_highlight" value="" />
63) <datalist id="datalist_highlight">
64) <option value="101A">101A</option>
65) <option value="102A">102A</option>
66) <option value="102B">102B</option>
67) <option value="103A">103A</option>
68) <option value="103B">103B</option>
69) <option value="201A">201A</option>
70) <option value="201B">201B</option>
71) <option value="202A">202A</option>
72) <option value="203A">203A</option>
73) <option value="204A">204A</option>
74) <option value="205A">205A</option>
75) <option value="207A">207A</option>
76) <option value="209B">209B</option>
77) </datalist>
78) </div>
79) </div>
|
|
Fixed a bug where if inputP...
Jeremy D authored 2 years ago
|
80)
81) <!-- No Parent -->
82) <div id="viewbox_noparent" style="display:none;">
83) <div class="col-sm-2">
84) <input type="numbere" id="numbercontrol_noparent" value="0" min="-1" max="1" />
85) </div>
86) </div>
|
|
Make a good demo page to sh...
Jeremy D authored 2 years ago
|
87) </div>
88)
89) <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
90) <script type="text/javascript" src="./jquery-numbercontrol.js"></script>
91) <script type="text/javascript">
92) $(document).ready(function() {
93) // Not apart of the Number controls, but does the tabs.
94) $('ul.nav a.nav-link').on('click', function(e) {
95) $('ul.nav a.nav-link').removeClass('active')
96) $(this).addClass('active');
97)
98) $('#content_containers > div').css('display', 'none');
99) $('#content_containers > div#viewbox_' + $(this).data('tab')).css('display', '');
100) });
101)
102) // The default number controls.
103) $('#numbercontrol_default').numbercontrol();
104)
105) // Fancy box for decimals.
106) $('#numbercontrol_decimal').numbercontrol({
107) 'type': 'float',
108) 'prependHtml': '',
109) 'appendHtml': '',
110) 'keyboardLayout': '<div class="modal-dialog modal-dialog-centered" style="width: 250px;">' +
111) '<div class="modal-content">' +
112) '<table>' +
113) '<tr>' +
114) '<td colspan="4">{INPUTBOX}</td>' +
115) '</tr><tr>' +
116) '<td>{7}</td>' +
117) '<td>{8}</td>' +
118) '<td>{9}</td>' +
119) '<td>{DELETE}</td>' +
120) '</tr><tr>' +
121) '<td>{4}</td>' +
122) '<td>{5}</td>' +
123) '<td>{6}</td>' +
124) '<td>{CLEAR}</td>' +
125) '</tr><tr>' +
126) '<td>{1}</td>' +
127) '<td>{2}</td>' +
128) '<td>{3}</td>' +
129) '<td>{DONE}</td>' +
130) '</tr><tr>' +
131) '<td colspan="2">{0}</td>' +
132) '<td>{SEP}</td>' +
133) '<td>{CANCEL}</td>' +
134) '</tr>' +
135) '</table>' +
136) '</div>' +
137) '</div>'
138) });
139)
140) // Save our value to another box/notify something else.
141) $('#numbercontrol_setvalue').numbercontrol({
142) 'onAfterSetNewvalue': function (that, event, container, value) {
143) $('#setvalue_setbox').html(value);
144) }
145) });
146)
|
|
Fixed a bug where if inputP...
Jeremy D authored 2 years ago
|
147) // The No parent number controls.
148) $('#numbercontrol_noparent').numbercontrol({
149) 'inputParent': ''
150) });
|
Make a good demo page to sh...