개발 공부 - w2ui form fields

용어 뜻:

w2form.fields

필드 오브젝트의 배열이다.

object, default = []

필드는 이러한 구조를 가진다

field : {

name: '', //필드명이다, input이나 select명과 일치해야 한다.

type: null, //타입 종류이다. (w2field 객체와 같은 타입이다)

options: {}, //필드의 추가 옵션이 필요하면 적어준다.

required: false, //required 하든 not이든 

html: { // auto generation의 정보이다. (generateHtml을 보면 되나 봄)

caption: '', //필드의 caption이다.

attr: '', //input이나 select 컨트롤의 어트리뷰트(속성)이다.

text: '', //컨트롤 오른쪽에 나오는 텍스트이다.

span: undefined, //span의 개수이다. class="w2ui-span{span}"이라고 추가되어져야 한다.

page: undefined //폼 안에 tab가 있으면 페이지 넘버를 표시해준다.

}

}

$().w2field({}) 에서 사용되는 타입들이다.

text

textarea

email

pass

password

int

float

money

currency (alias for money)

percent

hex

alphanumeric

color

date

time

list

combo

enum

file

select

radio

checkbox

toggle

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

If your HTML template is defined as :     <div class="w2ui-page page-0">       <div class="w2ui-field w2ui-required">          <label>First Name</label>          <div><input name="first_name" type="text" /></div>       </div>       <div class="w2ui-field w2ui-required">          <label>Last Name</label>          <div><input name="last_name" type="text" /></div>       </div>       <div class="w2ui-field">          <label>Comments</label>          <div><input name="field_textarea" type="text" /></div>       </div>     </div>     <div class="w2ui-buttons">         <button name="reset" class="btn ">reset</button>         <button name="save" class="btn btn-green">save</button>     </div>        And you have a container:      <div id="form" style="width: 500px; height; 300px"></div>       The form definition will be:     $('#form').w2form({          name   : 'form',         fields : [             { name: 'first_name', type: 'text' },             { name: 'last_name', type: 'text' },             { name: 'field_textarea', type: 'text' }             ],         actions : {             "reset": function () {                 this.clear();             },             "save": function () {                 this.save();             }         }     });         Colored by Color Scripter

cs

출처:

w2ui, 2016-11-02, http://w2ui.com/web/docs/w2form.fields