2
我目前正在創建一個網站，其中包含的字段類型不盡相同，我想知道其他人如何保持「構造函數」代碼降到最低並且可重用。關於使用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;
};
這裏有更多的一些信息是什麼，我現在在做什麼，我想要實現：
的形式在我的網站是我使用表格佈局佈局的唯一對象，所以我可以將表單標籤與輸入字段對齊。根據我的理解，標籤和字段之間的溝槽是讓用戶更容易使用表單的最佳方式。我願意提供關於如何以其他方式實現相同效果的建議，特別是如果可能的話，不要使用表格。
我的JavaScript當前使用JQuery選擇器創建這些元素，然後使用像.append()這樣的javascript函數將它們鏈接在一起。
因爲我建設有一個表格佈局形式，這意味着有大量的重複的代碼創建基本排結構：
<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");
或更好，但像這樣：
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" });
其中激活addField函數的格式，你可以命名字段中，定義顯示給用戶的標籤（最初將是葡萄牙，但瓦特e希望在將來能夠使用多種語言）以及該輸入元素的輸入元素和選項的類型，例如required =「true」或placeholder =「即。穀物，華夫餅乾，烤麪包等「
任何人有任何建議他們如何解決這個問題或任何生產就緒的JQuery插件（即目前維護的插件，而不是簡單的實驗或放棄軟件）我應該尋求幫助？我有這種事情
這些都是一些大return語句！ – Anders 2010-11-25 18:13:29