<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
/>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"editable-listview.css"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
"editable-listview.js"
></
script
>
</
head
>
<
body
style
=
"padding: 20px;"
>
<
h2
>jQuery Mobile editable listview</
h2
>
<
div
style
=
"padding: 20px;"
>
<
p
><
strong
>Complex Editable Listview</
strong
></
p
>
<
ul
id
=
"list"
data-role
=
"listview"
data-editable
=
"true"
data-editable-type
=
"complex"
data-editable-form
=
"editing-formID"
data-title
=
"Vegetables"
data-empty-title
=
"No Veggies"
>
<
li
>
<
a
>
<
h3
>
<
span
id
=
"veggieName"
>
Potato
</
span
>
</
h3
>
<
p
>
<
em
>Shape:</
em
>
<
strong
>
<
span
id
=
"veggieShape"
>
round
</
span
>
</
strong
>
</
p
>
<
p
>
<
em
>Color:</
em
>
<
strong
>
<
span
id
=
"veggieColor"
>
brown
</
span
>
</
strong
>
</
p
>
</
a
>
</
li
>
<
li
>
<
a
>
<
h3
><
span
id
=
"veggieName"
>
Brinjal
</
span
>
</
h3
>
<
p
>
<
em
>Shape:</
em
>
<
strong
>
<
span
id
=
"veggieShape"
>
oval
</
span
>
</
strong
>
</
p
>
<
p
>
<
em
>Color:</
em
>
<
strong
>
<
span
id
=
"veggieColor"
>
purple
</
span
>
</
strong
>
</
p
>
</
a
>
</
li
>
<
li
>
<
a
>
<
h3
><
span
id
=
"veggieName"
>
Tomato
</
span
>
</
h3
>
<
p
>
<
em
>Shape:</
em
>
<
strong
>
<
span
id
=
"veggieShape"
>
round
</
span
>
</
strong
>
</
p
>
<
p
>
<
em
>Color:</
em
>
<
strong
>
<
span
id
=
"veggieColor"
>
red
</
span
>
</
strong
>
</
p
>
</
a
>
</
li
>
</
ul
>
<
form
id
=
"editing-formID"
data-editable-form
=
"true"
>
<
input
type
=
"text"
data-item-name
=
"veggieName"
data-item-template="<h3>
<
span
id
=
'veggieName'
>%%</
span
>
</
h3
>"/>
<
input
type
=
"text"
data-item-name
=
"veggieShape"
data-item-template="<p><
em
>Shape:</
em
>
<
strong
><
span
id
=
'veggieShape'
>%%</
span
>
</
strong
></
p
>"/>
<
input
type
=
"text"
data-item-name
=
"veggieColor"
data-item-template="<p><
em
>Color:</
em
>
<
strong
><
span
id
=
'veggieColor'
>%%</
span
>
</
strong
></
p
>"/>
<
button
class
=
"ui-btn ui-corner-all"
data-add-button
=
"true"
>
Add
</
button
>
<
button
class
=
"ui-btn ui-corner-all"
data-clear-button
=
"true"
>
Clear
</
button
>
</
form
>
</
div
>
<
script
>
var $list = $("#list").listview({
editable: true,
editableType: "simple",
title: "Veggies",
emptyTitle: "No Veggies",
});
</
script
>
</
body
>
</
html
>