mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-03 01:01:41 +00:00
139 lines
6.0 KiB
HTML
Executable File
139 lines
6.0 KiB
HTML
Executable File
<div data-role="view" id="two-drawer-home" data-title="Friends" data-use-native-scrolling="true">
|
|
<header data-role="header">
|
|
<div data-role="navbar">
|
|
<a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>
|
|
<span data-role="view-title"></span>
|
|
<a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
|
|
<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="drawer-icon" data-align="right" ></a>
|
|
</div>
|
|
</header>
|
|
<a class="left-btn" data-role="button" data-rel="drawer" href="#left-drawer" data-icon="comments"></a>
|
|
<div data-role="content">
|
|
<ul data-role="listview" data-type="group">
|
|
<li>
|
|
A
|
|
<ul>
|
|
<li><img src="content/mobile/overview/ann.jpg" class="km-thumbnail" /> Ann Devon</li>
|
|
<li><img src="content/mobile/overview/annette.jpg" class="km-thumbnail" /> Annette Roulet</li>
|
|
<li><img src="content/mobile/overview/antonio.jpg" class="km-thumbnail" /> Antonio Moreno</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
C
|
|
<ul>
|
|
<li><img src="content/mobile/overview/carine.jpg" class="km-thumbnail" /> Carine Schmitt</li>
|
|
<li><img src="content/mobile/overview/catherine.jpg" class="km-thumbnail" /> Catherine Dewey</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
D
|
|
<ul>
|
|
<li><img src="content/mobile/overview/daniel.jpg" class="km-thumbnail" /> Daniel Tonini</li>
|
|
<li><img src="content/mobile/overview/diego.jpg" class="km-thumbnail" /> Diego Roel</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
E
|
|
<ul>
|
|
<li><img src="content/mobile/overview/eduardo.jpg" class="km-thumbnail" /> Eduardo Saavedra</li>
|
|
<li><img src="content/mobile/overview/elizabeth.jpg" class="km-thumbnail" /> Elizabeth Brown</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
F
|
|
<ul>
|
|
<li><img src="content/mobile/overview/felipe.jpg" class="km-thumbnail" /> Felipe Izquierdo</li>
|
|
<li><img src="content/mobile/overview/fran.jpg" class="km-thumbnail" /> Fran Wilson</li>
|
|
<li><img src="content/mobile/overview/francisco.jpg" class="km-thumbnail" /> Francisco Chang</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-role="drawer" id="left-drawer" style="width: 20em;" data-title="Communities" data-views="['two-drawer-home']" data-use-native-scrolling="true">
|
|
<header data-role="header">
|
|
<div data-role="navbar">
|
|
<span data-role="view-title"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<ul data-role="listview" class="km-listview-icons">
|
|
<li data-icon="camera">Nature Photography</li>
|
|
<li data-icon="camera">Wildlife Photography</li>
|
|
<li data-icon="camera">Night Photography</li>
|
|
<li data-icon="camera">Fine Art Photography</li>
|
|
<li data-icon="camera">Portrait Photography</li>
|
|
<li data-icon="printer">3D Printing</li>
|
|
<li data-icon="comments">CSS3 Community</li>
|
|
<li data-icon="comments">HTML5 Community</li>
|
|
<li data-icon="comments">Java User Groups</li>
|
|
<li data-icon="comments">Graphic Design</li>
|
|
<li data-icon="comments">Bodybuilding</li>
|
|
<li data-icon="comments">JavaScript</li>
|
|
<li data-icon="comments">C#</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div data-role="drawer" id="right-drawer" style="width: 7em" data-title="Share" data-position="right" data-views="['two-drawer-home']">
|
|
<div data-role="tabstrip" class="km-vertical-tabstrip">
|
|
<a href="#drawer/two-way-drawers" data-icon="contacts">Contacts
|
|
</a><a href="#drawer/two-way-drawers" data-icon="history">History
|
|
</a><a href="#drawer/two-way-drawers" data-icon="favorites">Favorites
|
|
</a><a href="#drawer/two-way-drawers" data-icon="settings">Settings</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// reset global drawer instance, for demo purposes
|
|
kendo.mobile.ui.Drawer.current = null;
|
|
</script>
|
|
|
|
<style>
|
|
.km-root .left-btn
|
|
{
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 7em;
|
|
left: -1em;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
width: 5em;
|
|
line-height: 4em;
|
|
border-radius: 10em;
|
|
-webkit-border-radius: 10em;
|
|
border: 1px solid rgba(255,255,255,.8);
|
|
background: rgba(0,0,0,.8);
|
|
color: #fff;
|
|
box-shadow: 0 0 .5em #000;
|
|
-webkit-box-shadow: 0 0 .6em #222;
|
|
}
|
|
|
|
.mobileExample .km-wp-light .km-button.left-btn
|
|
{
|
|
background: rgba(0,0,0,.8);
|
|
text-align: center;
|
|
}
|
|
|
|
.km-root .left-btn .km-icon.km-notext
|
|
{
|
|
display: block;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.km-ios #left-drawer .km-content, .km-ios7 #left-drawer .km-content, .km-android #left-drawer .km-content, .km-blackberry #left-drawer .km-content,
|
|
.km-ios #left-drawer .km-list > li, .km-ios7 #left-drawer .km-list > li, .km-android #left-drawer .km-list > li, .km-blackberry #left-drawer .km-list > li,
|
|
.km-ios #left-drawer .km-listview-link > .km-icon, .km-ios7 #left-drawer .km-listview-link > .km-icon, .km-android #left-drawer .km-listview-link > .km-icon, .km-blackberry #left-drawer .km-listview-link > .km-icon,
|
|
.km-ios #left-drawer .km-list li > .km-icon, .km-ios7 #left-drawer .km-list li > .km-icon, .km-android #left-drawer .km-list li > .km-icon, .km-blackberry #left-drawer .km-list li > .km-icon,
|
|
#right-drawer .km-content
|
|
{
|
|
background-color: #4e4e4e;
|
|
color: #fff;
|
|
}
|
|
|
|
.km-camera:before, .km-camera:after { content: "\E0D0"; }
|
|
.km-printer:before, .km-printer:after { content: "\E07E"; }
|
|
.km-comments:before, .km-comments:after { content: "\E093"; }
|
|
|
|
</style>
|