В настоящее время я создаю сайт с достаточным количеством форм, которые различаются по типам включенных полей, и мне было интересно, что делают другие люди, чтобы свести к минимуму количество кода "конструктора" форм и использовать его повторно.
Вот пример моего текущего кода:
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 для создания элемента $("<element/>"), а затем использует функции javascript, такие как .append(), чтобы объединить их все вместе.
Поскольку я создаю формы с помощью макета таблицы, это означает, что в создании базовой структуры строк много повторяющегося кода:
<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 имеет формат, в котором вы можете назвать поле, определить метку, отображаемую для пользователя (которая первоначально будет португальской, но в будущем мы хотели бы быть многоязычной), а также тип элемента ввода и параметры для этого элемента ввода, такого как required = "true" или placeholder = "т.е. зерновые, вафли, тосты и т. д."
У кого-нибудь есть какие-либо предложения о том, как они решают эту проблему, или о любых готовых к работе плагинах JQuery (то есть плагинах, которые поддерживаются в настоящее время, а не просто об экспериментах или отказе от ПО), к которым я должен обратиться, чтобы помочь мне с такими вещами?