현재 포함 된 필드의 유형이 다른 많은 수의 양식이있는 사이트를 만들고 있습니다. 다른 사람들이 양식 "생성자"의 양을 유지하기 위해 어떤 작업을하는지 궁금합니다. 코드를 최소로 재사용 할 수 있습니다. 여기 Javascript/Jquery로 복잡한 양식을 작성하기위한 제안
내 현재 코드의 일부의 예 :에function editForm() {
function saveButton() {
return $('<tr/>')
.append(
$('<th/>')
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("new-button")
.addClass("submit-button")
.attr("type", "button")
.attr("value", "Save")
)
.append(" or ")
.append(
$('<a/>')
.attr("href", "#")
.text("Cancel")
)
);
};
this.section = function() {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "title")
.text("Title")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("title")
.addClass("text")
.attr("name", "title")
.attr("value", title)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
saveButton()
)
)
);
};
this.menuItem = function() {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "name")
.text("Item Name")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("name")
.addClass("text")
.attr("name", "name")
.attr("value", menu_item.name)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "price")
.text("Price")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("price")
.addClass("text")
.attr("name", "price")
.attr("value", menu_item.price)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "description")
.text("Description")
)
)
.append(
$('<td/>')
.append(
$('<textarea/>')
.addClass("description")
.addClass("text")
.attr("name", "description")
.attr("required", "false")
.attr("rows", "2")
.attr("cols", "50")
.text(menu_item.description)
)
)
)
.append(
saveButton()
)
)
);
};
return this;
};
는 여기에 몇 가지 추가 정보를 원하시면 무엇 나는 현재하고 있어요 그리고 내가 무엇을 달성하기 위해 노력하고있어 :
양식을 내 사이트에 는 테이블 레이아웃을 사용하여 레이아웃 한 유일한 객체이므로 양식 레이블을 입력 필드에 맞춰 정렬 할 수 있습니다. 나의 이해에서 레이블과 필드 사이의이 거터는 사용자가 쉽게 grok을 만들 수있는 가장 좋은 방법입니다. 가능하다면 테이블을 사용하지 않고 다른 방법으로 동일한 효과를 얻는 방법에 대한 제안을드립니다.
내 javascript는 현재 요소별로을 만들고 나서 모두 .append()과 같은 자바 스크립트 함수를 사용하여 JQuery 선택기를 사용하여 요소를 구성합니다. 이 방법으로 당신을 많이 볼 수 있기 때문에
<tr>
<th>
<label for="fieldname">Field</label>
</th>
<td>
<input name="fieldname" type="text">
</td>
</tr>
:
나는 테이블 레이아웃 양식을 짓고 있어요 때문에, 그것은 반복되는 코드의 많은의 기본 행 구조를 만들 수 있다는 것을 의미 직관적으로 위 코드를 반복하면 사이트 전체를 사용할 수있는 폼 빌더를 없애고 아마도 만들 수 있어야한다고 생각합니다. 내 코드에서
내가 좋아하는 많은 요소를 반복하고 위,,,,, 등 내가 할 수 있도록하고 싶습니다 무엇은과 같이 훨씬 더 간결 형식의 양식을 만들 수 있습니다 :
menu_item = {
name: "",
price: "",
description: ""
}
createForm()
.addField(menu_item.name, "Nome", "text-input", required)
.addField(menu_item.price, "Preço", "text-input", required)
.addField(menu_item.description, "Descrição", "textarea")
.addField("Salvar item", "submit-button");
또는 더 나은 아직, 같은 :
addField 기능을 사용하면 처음 포르투갈어 될 것입니다 사용자에게 표시 라벨을 (필드의 이름을 정의 할 수있는 형식을 가지고createForm()
.addField({
value: menu_item.name,
label_text: "Nome",
input_type: "text-input",
required: true })
.addField({
value: menu_item.price,
label_text: "Preço",
input_type: "text-input",
required: true })
.addField({
value: menu_item.description,
label_text: "Descrição",
input_type: "textarea" })
.addField({
value: "Salvar item",
input_type: "submit-button" });
하지만 w 미래에 다국어 지원을 원합니다) 및 입력 요소의 유형 및 required = "true"또는 placeholder = "ie와 같은 입력 요소에 대한 옵션이 있습니다. 시리얼, 와플, 토스트 등 "
누구나이 문제 또는 프로덕션 준비가 된 JQuery 플러그인 (즉, 현재 유지 관리되고 단순히 실험이나 포기 제품이 아닌 플러그인)을 해결하는 방법에 대한 제안 사항이 있습니다. ?. 이런 종류의 일에 나를
사람들은 몇 가지 큰 수익 문입니다! – Anders