Demo: added guide text and change input type in list vi

Add guide text and change input type from "text" to "number" in list vi demo
N_SE-22346

Change-Id: I7190f771e810e16c6ca56c93421d2912a8918154

diff --git a/demos/tizen-winsets/widgets/list/list-vi.html b/demos/tizen-winsets/widgets/list/list-vi.html
index 8b4a104..6a0c87d 100644 (file)
--- a/demos/tizen-winsets/widgets/list/list-vi.html
+++ b/demos/tizen-winsets/widgets/list/list-vi.html
@@ -1,19 +1,30 @@
 <div data-role="page" data-add-back-btn="true">
-
        <script type="text/javascript">
                var add = function() {
-                       $("#listvi").listview( 'addItem', '<li>Test<div data-role="button" data-inline="true">TEST</div></li>', $("#idx").val() );
+                       var val = $("#idx").val();
+                       if( isNaN( val ) ) {
+                               alert( "invalid value" );
+                               return;
+                       }
+                       $("#listvi").listview( 'addItem', '<li>Test<div data-role="button" data-inline="true">TEST</div></li>', val );
                }
                var del = function() {
-                       $("#listvi").listview( 'removeItem' , $("#idx").val() );
+                       var val = $("#idx").val();
+                       if( isNaN( val ) ) {
+                               alert( "invalid value" );
+                               return;
+                       }
+                       $("#listvi").listview( 'removeItem' , val );
                }
        </script>
-
        <div data-role="header" data-position="fixed">
                <h1>List vi</h1>
        </div>
        <div class="content" data-role="content" data-scroll="y">
-               <input type="text" value="0" id="idx" />
+               <div>
+                       Only number in textbox, list index start at 0(zero)
+               </div>
+               <input type="number" value="0" id="idx" min="0" />
                <div data-role="button" onclick="add()" data-inline="true">Add</div>
                <div data-role="button" onclick="del()" data-inline="true">Del</div>
                <ul id="listvi" data-role="listview">
@@ -23,5 +34,4 @@
        </div>
        <div data-role="footer">
        </div>
-</div>
-
+</div>
\ No newline at end of file