dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
149 lines (139 loc) • 5.15 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Animation</title>
<link href="../../themes/common/domButtons/DomButtonSilverCircleRedCross.css" rel="stylesheet"/>
<script type="text/javascript" src="../../deviceTheme.js"
data-dojo-config="'dojo-bidi': true, mblThemeFiles: ['base','SimpleDialog','TextBox','Button']"></script>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true, has:{'dojo-bidi': true} "></script>
<script type="text/javascript">
require([
"dijit/registry",
"dojo/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/SimpleDialog",
"dojox/mobile/TextBox",
"dojox/mobile/Button"
], function(registry){
show = function(){
registry.byId("dlg1").show();
}
});
</script>
<style>
#dlg1 {
top: 25%;
left: 25%;
width: 700px;
height: 550px;
}
#dlg1 TABLE {
margin: 20px;
}
#dlg1 INPUT, #dlg1 TEXTAREA {
background-color: #000000;
color: #ffffff;
width: 90%;
font-size: 17px;
margin: 4px;
}
#dlg1 TEXTAREA {
height: 160px;
}
.dlgTitle {
font-family: Helvetica;
font-size: 17px;
margin: 14px 14px;
}
</style>
</head>
<body style="visibility:hidden;">
<div dir="rtl" id="dlg1" data-dojo-type="dojox.mobile.SimpleDialog" data-dojo-props='closeButton:true' dir="rtl">
<div class="dlgTitle">Account Information
<button id="btn1" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" style="width:60px;float:right;">
Edit
</button>
</div>
<hr/>
<table style="width:100%">
<tr>
<td style="width:250px"><img alt="" src="../images/pic1.jpg" width="230" height="230"></td>
<td style="vertical-align:top">
<input data-dojo-type="dojox.mobile.TextBox" value="Kirena Kobe" readOnly="readOnly"><br>
<input data-dojo-type="dojox.mobile.TextBox" value="123-456-7891"><br>
<input data-dojo-type="dojox.mobile.TextBox" value="kkobe@acme.com">
</td>
</tr>
<tr>
<td colspan="2"><textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis
velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque
quam. Nulla facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed
molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus.</textarea></td>
</tr>
</table>
</div>
<div id="view1" data-dojo-type="dojox.mobile.View" data-dojo-props='selected:true'>
<h1 data-dojo-type="dojox.mobile.Heading">Animations</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Transition Effects</h2>
<button onclick="show()">Show Dialog</button>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props='icon:"../images/i-icon-1.png", moveTo:"view2", transition:"slide"'>
Slide
</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props='icon:"../images/i-icon-2.png", moveTo:"view2", transition:"flip"'>
Flip
</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props='icon:"../images/i-icon-3.png", moveTo:"view2", transition:"fade"'>
Fade
</li>
</ul>
</div>
<div id="view2" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Home", moveTo:"view1"'>Search Result</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='variableHeight:true'>
<li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px">
1. <a href="#" class="lnk">Dojo: Traditional Karate-do Spirit</a><br>
Sarah Connor Hardcover<br>
Eligible for FREE Super Saver Shipping<br>
<span style="color:red">$14.50 (50%)</span> In Stock<br>
# (531)
</li>
<li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px">
2. <a href="#" class="lnk">Japanese Martial Arts Dojo</a><br>
Martin Parker Hardcover<br>
<span style="color:red">$14.00 (60%)</span> In Stock<br>
# (173)
</li>
<li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px">
3. <a href="#" class="lnk">Total Solar Eclipse</a><br>
Steven Young Hardcover<br>
Get it by Mar. 2 if you order in the next <span style="color:green"><b>16 hours</b></span><br>
Eligible for FREE Super Saver Shipping<br>
<span style="color:red">$9.50 (62%)</span> In Stock<br>
# (1199)
</li>
<li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px">
4. <a href="#" class="lnk">The History of Java Coffee</a><br>
Marco Rodriguez Hardcover<br>
<span style="color:blue">Not Available</span>
</li>
<li data-dojo-type="dojox.mobile.ListItem" style="font-size:10px">
5. <a href="#" class="lnk">The Principles of Spider's Web</a><br>
Melissa Morgan Hardcover<br>
Eligible for FREE Super Saver Shipping<br>
<span style="color:red">$12.00 (60%)</span> In Stock<br>
# (1847)
</li>
</ul>
</div>
</body>
</html>