97 | Basic 98 | 基本 99 |
100 |108 | Please follow the naming convention below. 109 |
110 |
111 | 増減させる対象のエリア、追加ボタン、削除ボタンのCSSクラス名は、
112 | 命名規則に従うことでプラグインに渡すオプションの数を減らすことができます。
113 |
HTML
115 |116 | <ol id="list"> 117 | <li class="list_var"> 118 | <input type="text" size="40" name="list_0" id="list_0"> 119 | <button class="list_del">Delete</button> 120 | </li> 121 | </ol> 122 | <input type="button" value="Add" class="list_add"> 123 | 124 | <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 125 | <script src="jquery.add-input-area.min.js"></script> 126 |127 |
JavaScript
128 |
129 | $('#list').addInputArea();
130 |
131 | 136 | Change naming convention 137 | 命名規則を変更する 138 |
139 |
148 | You can change naming convention by setting options.
149 | Please look at "README" for details.
150 |
-
154 |
- Recommend:
data-id-format
,data-name-format
155 | - Deprecated:
id_format
,name_format
156 |
161 | 命名規則はオプションで変更できます。
162 | 詳しくは"README"をご覧ください。
163 |
-
167 |
- 推奨:
data-id-format
,data-name-format
168 | - 非推奨:
id_format
,name_format
169 |
173 | <ol id="list"> 174 | <li class="var_area02"> 175 | <label 176 | for="posts_0_mail" 177 | data-id-format="posts_%d_mail" 178 | >Mail</label> 179 | <textarea 180 | id="posts_0_mail" 181 | data-id-format="posts_%d_mail" 182 | name="data[posts][mail][0]" 183 | data-name-format="data[posts][mail][%d]" 184 | ></textarea> 185 | <button class="del_button02">Delete</button> 186 | </li> 187 | </ol> 188 | <input type="button" value="Add" class="add_button02"><br> 189 |190 |
JavaScript
191 |192 | $('#list').addInputArea({ 193 | area_var: '.var_area02', 194 | btn_add: '.add_button02', 195 | btn_del: '.del_button02' 196 | }); 197 |198 |
203 | CSS and images 204 | CSSや画像による装飾 205 |
206 |214 | You can use freely CSS and images. 215 |
216 |217 | 追加ボタン、削除ボタンはCSSや画像で自由に装飾できます。 218 |
219 |HTML
220 |221 | <ul id="list"> 222 | <li class="list_var"> 223 | <input type="text" size="40" name="list_0"> 224 | <img class="list_del" src="demo/img_del.png"> 225 | </li> 226 | </ul> 227 | <!-- Twitter Bootstrap --> 228 | <a href="javascript:void(0)" class="list_add btn btn-danger">Add</a><br> 229 |230 |
JavaScript
231 |232 | $('#list').addInputArea(); 233 |234 |
239 | Wrapper for del-button 240 | 削除ボタンのラッパー要素 241 |
242 |
250 | If ther wrapper for del-button exists, set area_del
option.
251 |
253 | 削除ボタンが裸でなくラッパーが存在する場合は、area_del
オプションを設定してください。
254 |
HTML
256 |
257 | <table id="list" class="table">
258 | <thead>
259 | <tr><th>Name</th><th>Mail</th><th></th></tr>
260 | </thead>
261 | <tbody>
262 | <tr class="list_var">
263 | <td><input type="text" name="list-name_0"></td>
264 | <td><input type="text" name="list-mail_0"></td>
265 | <td class="del-area"><button class="list_del">Delete</button></td>
266 | </tr>
267 | </tbody>
268 | </table>
269 |
270 | JavaScript
271 |
272 | $('#list').addInputArea({
273 | area_del: '.del-area'
274 | });
275 |
276 | 281 | Maximum number 282 | 追加に上限を設ける 283 |
284 |292 | You can set the maximum number of textbox. 293 |
294 |295 | 追加できるテキストボックスの数に上限を設けることができます。 296 |
297 |JavaScript
298 |299 | $('#list').addInputArea({ 300 | maximum : 4 301 | }); 302 |303 |
308 | All Form elements 309 | 全てのフォーム部品に対応 310 |
311 |319 | You can add or delete all of Form elements. 320 |
321 |322 | テキストボックスだけでなく、すべてのフォーム部品を増減できるようになりました。 323 |
324 |HTML
325 |326 | <div id="list"> 327 | <div class="list_var"> 328 | 329 | <input type="checkbox" name="list_checkbox_a_0" value="AAA"> 330 | <input type="checkbox" name="list_checkbox_b_0" value="BBB"> 331 | <input type="checkbox" name="list_checkbox_c_0" value="CCC"> 332 | 333 | <select name="list_select_0"> 334 | <option value="AAA">AAA</option> 335 | <option value="BBB">BBB</option> 336 | <option value="CCC">CCC</option> 337 | </select> 338 |339 |
344 | Not to initialize 345 | value値を初期化させない設定 346 |
347 |
355 | You can prevent initialization.
356 | Note: Since v4.9.0, empty_val
is deprecated. Use data-empty-val
.
357 |
359 | 入力欄を増やす際、初期化を阻止できます。
360 | 注意: v4.9.0以降、empty_val
は非推奨です。data-empty-val
を使ってください。
361 |
HTML
363 |364 | <li class="list_var"> 365 | <input type="text" name="list_a_0" > 366 | <input type="text" name="list_b_0" data-empty-val="false"> 367 | </li> 368 |369 |
374 | Initialize correctly 375 | 正しい初期化 376 |
377 |(since: v4.2)
385 |386 | The added item can be correctly initialized. 387 |
388 |389 | 追加された要素の初期化が、より正確に行われるようになりました。 390 |
391 |HTML
392 |393 | <li class="list_var"> 394 | <select name="list_mask_0"> 395 | <option value="enable">enable</option> 396 | <option value="disable">disable</option> 397 | </select> 398 | <input type="text" name="list_text_0"> 399 | </li> 400 |401 |
JavaScript
402 |
403 | $('#list')
404 | .addInputArea()
405 | .on('change', 'select', function() {
406 | $(this).next().prop('disabled', $(this).val() == 'disable');
407 | });
408 |
409 | 414 | Copy jQuery event handlers 415 | jQueryイベントハンドラの複製 416 |
417 |(since: v4.3)
425 |
426 | jQuery event handlers at each form elements can be correctly copied.
427 | But, you should set events before applying plugin.
428 |
430 | フォーム部品に対して設定したjQueryのイベントハンドラも複製されます。
431 | ただし、クローン元へのイベントは、プラグイン適用前に
432 | 設定しておかなければなりません。
433 |
JavaScript (1)
435 |436 | // Set events before apply plugin. 437 | $('#list_0') 438 | .focus(function() { 439 | $(this).next().text('Focus!'); 440 | }) 441 | .blur(function() { 442 | $(this).next().text('Blur!'); 443 | }); 444 | $('#list').addInputArea(); 445 |446 |
JavaScript (2)
447 |
448 | // You would better write like this.
449 | $('#list')
450 | .addInputArea()
451 | .on('focus', '[type=text]', function() {
452 | $(this).next().text('Focus!');
453 | })
454 | .on('blur', '[type=text]', function() {
455 | $(this).next().text('Blur!');
456 | });
457 |
458 | 463 | Run after add 464 | 追加後に処理を実行する 465 |
466 |(since v4.6)
474 |
475 | The event at each Form elements can be correctly copied.
476 | But it is uncertain in the case of the event which made in other jQuery plugin.
477 | You can reset other jQuery plugin to added item by this option.
478 |
480 | 初期状態でも通常イベントならばクローン先にもコピーされますが、他のjQueryプラグインなどを利用した複雑なイベントはコピーされないことがあります。
481 | その場合はこのオプションの中でjQueryプラグインを適用し直してください。
482 |
JavaScript
484 |
485 | $('#list').addInputArea({
486 | after_add: function () {
487 | alert('Added!');
488 | }
489 | });
490 |
491 | 496 | Not to copy events 497 | イベントを複製しないオプション 498 |
499 |(since: v4.8)
507 |
508 | You can set not to copy events.
509 | For example, to copy correctly an element which applied "tooltip()" of Bootstrap, you should use this and "after_add" options.
510 |
512 | オプションでイベントを複製させないようにできます。
513 | たとえば、Bootstrapの"tooltip()"を適用した要素を正常に複製するには、このオプションと"after_add"オプションを組み合わせて使います。
514 |
JavaScript
516 |517 | // Set Bootstrap tooltip before apply plugin. 518 | $('#list .test-tooltip').tooltip(); 519 | $('#list').addInputArea({ 520 | clone_event: false, 521 | after_add: function () { 522 | $('#list .test-tooltip').tooltip(); 523 | } 524 | }); 525 |526 |
531 | Not to copy elements 532 | HTML要素を複製しないオプション 533 |
534 |(since: v4.10)
542 |
543 | You can prevent to copy certain elements.
544 | Set dont_clone
option.
545 |
547 | 特定のHTML要素を複製させないようにできます。
548 | dont_clone
オプションを設定してください。
549 |
HTML
551 |
552 | <div>This will be cloned.</div>
553 | <div class="dont_clone">This will NOT be cloned.</div>
554 |
555 | JavaScript
556 |557 | $('#list').addInputArea({ 558 | dont_clone: '.dont_clone' 559 | }); 560 |561 |
566 | Validation 567 | バリデーション 568 |
569 |(since: v4.11)
577 |
578 | You can validate before adding.
579 | Set validate
option that returns boolean.
580 |
582 | 入力欄の追加の前にバリデーションを実行できます。
583 | 真偽値を返すvalidate
オプションを設定してください。
584 |
586 | The sample above uses checkValidity() method of HTML5.
587 | In this case, you must create <form>
and submit-button.
588 | You can use other validation method as well.
589 |
591 | 上のサンプルではHTML5のcheckValidity()メソッドを利用しています。
592 | この場合は、<form>
と送信ボタンが必要です。
593 | HTML5以外のバリデーションを利用することもできます。
594 |
JavaScript
596 |597 | $('#list').addInputArea({ 598 | validate: function () { // Should return boolean. 599 | // Call checkValidity() method of HTML5. 600 | if (!$('.form-serialize')[0].checkValidity()) { 601 | $('#submit').click(); 602 | return false; 603 | } 604 | return true; 605 | } 606 | }); 607 |608 |