Как я могу динамически воссоздать следующую форму jQuery Mobile в jQuery? Я в основном хочу попробовать и взять как можно меньше строк кода. Все, что Ive пробовало до сих пор, заканчивается примерно такой же длины. Любые предложения и советы приветствуются!
<div data-role="page" id="create-person-dialog">
<div data-role="header" data-theme="c" >
<h1></h1>
</div>
<div data-role="content">
<form id="create-person-dialog">
<fieldset data-role="fieldcontain">
<textarea data-theme="b" type="input" id="editFirstName" placeholder="First Name"></textarea>
</fieldset>
<fieldset data-role="fieldcontain">
<textarea type="input" id="editLastName" placeholder="Last Name *"></textarea>
</fieldset>
<fieldset data-role="fieldcontain">
<select id="editSalutation" data-native-menu="false">
<option> </option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select>
</fieldset>
<button href="#" id="edit" data-theme="b" data-role="button">Save</button>
<div id="delete">
<button data-icon="delete" data-iconpos="right" data-theme="a" type="button">Delete</button>
</div>
</form>
</div>
</div>
Вот начало моей первой попытки, я просто создаю пустой div и начинаю добавлять...
JQuery:
$('#create-contact-dialog').append("<div id='dataRole' data-role='content'></div>");
$('#create-contact-dialog #dataRole').append("<form id='create-contact-dialog'></form>");
$('#create-contact-dialog form').append("<fieldset data-role='fieldcontain'></fieldset>");
$('#create-contact-dialog fieldset').append("<textarea data-theme='b' type='input' id='firstName' placeholder='First Name'></textarea>");
Просто решил взломать все это в обычном jQuery и скрыть его в нижней части страницы.
Для тех, кто когда-либо нуждается в большой старой форме...
jQuery('#create-contact-dialog')
.append("<div id='dataRole' data-role='content'></div>");
jQuery('#create-contact-dialog #dataRole')
.append("<form id='create-contact-dialog'></form>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='fnFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #fnFeild')
.append("<textarea data-theme='b' type='input' class='reg' id='firstName' placeholder='First Name'></textarea>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='lnFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #lnFeild')
.append("<textarea data-theme='b' type='input' class='reg' id='lastName' placeholder='Last Name *'></textarea>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='sFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #sFeild')
.append("<select id='salutation' placeholder='Salutation'></select>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='tFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #tFeild')
.append("<textarea data-theme='b' type='input' class='reg' id='title' placeholder='Title'></textarea>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='dFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #dFeild')
.append("<textarea data-theme='b' type='input' class='reg' id='department' placeholder='Department'></textarea>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='accFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #accFeild')
.append("<textarea data-theme='b' type='input' class='reg' id='account' placeholder='Account'></textarea>");
jQuery('#create-contact-dialog form')
.append("<fieldset id='btnFeild' data-role='fieldcontain'></fieldset>");
jQuery('#create-contact-dialog #btnFeild')
.append("<button href='#' data-theme='b' data-role='button' id='save'>Save</button>");
Я заполняю select с помощью функции, вызываемой при вызове диалога:
function populateSel(){
jQuery("#salutation")
.append('<option value=""></option>')
.append('<option value="Mr.">bar</option>')
.append('<option value="Ms."></option>')
.append('<option value="Mrs."></option>')
.append('<option value="Dr."></option>')
.append('<option value="Prof."></option>')
}