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.
172 lines (163 loc) • 9.18 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>Accordion</title>
<link href="../themes/common/dijit/dijit.css" rel="stylesheet"/>
<link href="../themes/common/domButtons/DomButtonBlackRightArrow16.css" rel="stylesheet"/>
<link href="../themes/common/domButtons/DomButtonWhiteDownArrow16.css" rel="stylesheet"/>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Accordion','TabBar','dijit.Calendar']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
<script type="text/javascript">
require([
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/Accordion",
"dojox/mobile/ContentPane",
"dojox/mobile/TabBar",
"dojox/mobile/ScrollableView"
]);
</script>
<style type="text/css">
html,body{
height: 100%;
}
html:not(.windows_theme) .myPane {
background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#FFFFFF));
font-family: Times New Roman, Helvetica;
color: black;
}
.windows_theme .mblAccordionPane {
background-color: transparent ;
}
.windows_theme .mblScrollableViewContainer > div {
color: white ;
}
</style>
</head>
<body style="visibility:hidden;">
<div id="group1" data-dojo-type="dojox.mobile.View">
<ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:"segmentedControl", fixed:"top"'>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"view1"'>Fixed</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"view2", selected:true'>Multi</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"view3"'>Single</li>
</ul>
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='fixedHeight:true, roundRect:true' style="height:380px;">
<div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
data-dojo-props='label:"ScrollableView", height:"inherit", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16", propagatable:false, appBars:false'>
<div style="padding:10px;color:black;">
A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
</div>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16", href:"data/fragment1.html"'>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16"'>
<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
u1space
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
u2space
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
Wi-Fi
</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16"' class="myPane">
<div style="padding:10px">
<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
<div style="border-top: 1px dashed gray;margin: 20px"></div>
<img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
<p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
</div>
</div>
</div>
</div>
<div id="view2" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='selected:true'>
<div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='iconBase:"images/icons16.png"'>
<div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
data-dojo-props='label:"ScrollableView", iconPos1:"16,16,16,16", height:"100px", propagatable:false, appBars:false'>
<div style="padding:10px;color:black;">
A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
</div>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content", iconPos1:"16,32,16,16", href:"data/fragment1.html"'>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList", iconPos1:"16,48,16,16"'>
<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
u1space
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
u2space
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
Wi-Fi
</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo", iconPos1:"32,16,16,16"' class="myPane">
<div style="padding:10px">
<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
<div style="border-top: 1px dashed gray;margin: 20px"></div>
<img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
<p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
<p>Dojo's powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.</p>
</div>
</div>
</div>
</div>
<div id="view3" data-dojo-type="dojox.mobile.ScrollableView">
<div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='singleOpen:true'>
<div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
data-dojo-props='label:"ScrollableView", height:"100px", propagatable:false, appBars:false'>
<div style="padding:10px;color:black;">
A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
</div>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content", href:"data/fragment1.html"'>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList"'>
<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
u1space
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
u2space
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
Wi-Fi
</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo"' class="myPane">
<div style="padding:10px">
<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
<div style="border-top: 1px dashed gray;margin: 20px"></div>
<img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
<p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
<p>Dojo's powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Calendar (Lazy)", lazy:true' height="304px">
<div style="padding:10px">
<div data-dojo-type="dijit.CalendarLite"></div>
</div>
</div>
</div>
</div>
</div>
<div id="group2" data-dojo-type="dojox.mobile.ScrollableView">
group2
</div>
<ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"bottom"' style="border-bottom:none;">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", selected:true, moveTo:"group1"'>Group1</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"group2"'>Group2</li>
</ul>
</body>
</html>