Button: custom button icon path, margin have been changed

[platform/framework/web/web-ui-fw.git] / demos / tizen-winsets / widgets / button / buttonNolist.html

diff --git a/demos/tizen-winsets/widgets/button/buttonNolist.html b/demos/tizen-winsets/widgets/button/buttonNolist.html
index 235f593..640eb69 100644 (file)
--- a/demos/tizen-winsets/widgets/button/buttonNolist.html
+++ b/demos/tizen-winsets/widgets/button/buttonNolist.html
@@ -19,63 +19,70 @@
                *Default Button
                <div data-role="button">Button</div>
                HTML Code:
-               <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button">Button</div></textarea>
+               <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button">Button</div></textarea>
                <br/><br/>
                *Inline Button, Inline Button With Icon<br/>
                <div data-role="button" data-inline="true">DataInline True</div>
                <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
                <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
                <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
-               <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div><br/>
+               <div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div><br/>
                 HTML Code:
-                <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true">DataInline True</div>
+                <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-inline="true">DataInline True</div>
 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
 <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
-<div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></textarea><br/><br/>
+<div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div></textarea><br/><br/>
                *Default Button (A tag)
                <a href="#buttonTest" data-role="button">A Tag Button</a>
                HTML Code:
-                <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><a href="#buttonTest" data-role="button">A Tag Button</a></textarea>
+                <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><a href="#buttonTest" data-role="button">A Tag Button</a></textarea>
                <br/><br/>
                *Button Icon Position top, bottom (with inline)
                <div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div><br/>
                <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div><br/>
-               <div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
-               <div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
+               <div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
+               <div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
                 HTML Code:
-               <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
+               <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
 <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
-<div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
-<div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
+<div data-role="button" data-icon="call" data-iconpos="top" data-inline="true">PositionTop</div>
+<div data-role="button" data-icon="call" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
                *Custom Button:<br/>
-               <div data-role="button" data-inline="true" data-icon="test">Custom</div>
-               <div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
-               <div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
-               <div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
-               <div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div><br/>
+               <div data-role="button" data-inline="true" data-icon="call">Custom</div>
+               <div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">Custom Top</div>
+               <div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">Custom Bottom</div>
+               <div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">Custom width,height</div>
+               <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div><br/>
                HTML Code:
-               <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true" data-icon="test">Custom</div>
-<div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
-<div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
-<div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
-<div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div></textarea>
+               <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><div data-role="button" data-inline="true" data-icon="call">Custom</div>
+<div data-role="button" data-inline="true" data-icon="call" data-iconpos="top">Custom Top</div>
+<div data-role="button" data-inline="true" data-icon="call" data-iconpos="bottom">Custom Bottom</div>
+<div data-role="button" data-inline="true" data-icon="call" style="width:150px;height:150px">Custom width,height</div></textarea>
                CSS Code:<br/>
-               <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset">.ui-icon-test{
+               <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset">.ui-icon-test{
         background-size: 100% 100%;
-        background-image: url(test.png);
+        background-image: url(00_button_call);
 }
 
 .ui-icon-test2{
         background-position:0% 0%;
         background-size:50% 50%;
-        background-image: url(test.png);
+        background-image: url(00_button_call);
 }</textarea>
                *Input Type = "Button"
                <input type="button" value="test button"/>
                HTML Code:
-                <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><input type="button" value="test button"/></textarea>
-
+                <textarea style="width:80%;padding:1em;background-color:whitesmoke;color:black;border-style:inset"><input type="button" value="test button"/></textarea>
+               <br/><br/>
+               Button No text
+               <div data-role="button" id="button1test" data-corners="false" data-inline="false" data-style="circle"></div>
+               <br/><br/>
+               <div data-role="button" id="button1test2" data-corners="false" data-inline="false" ></div>
+               <br/><br/>
+               <div data-role="button" id="button1test3" data-corners="false" data-inline="true" data-style="circle"></div>
+               <br/><br/>
+               <div data-role="button" id="button1test4" data-corners="false" data-inline="true" ></div>
        </div>
        <div data-role="footer">
        </div>