mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
Removed style properties for ui-scrollview-clip and ui-scrollview-view from the stylesheet. We now set them progrmatically since they are required.
Added a multi-direction, horizontal and vertical example to the sample page.
This commit is contained in:
Kin Blas
parent
84f5325ad2
commit
655e98647c
3 changed files with 540 additions and 31 deletions
|
|
@ -1,21 +1,9 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.ui-scrollview-clip {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-scrollview-view {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/*
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
*/
|
||||
}
|
||||
|
||||
.ui-scrolllistview .ui-li-divider {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,12 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
|
|||
showScrollBars: true
|
||||
},
|
||||
|
||||
_makePositioned: function($ele)
|
||||
{
|
||||
if ($ele.css("position") == "static")
|
||||
$ele.css("position", "relative");
|
||||
},
|
||||
|
||||
_create: function()
|
||||
{
|
||||
this._$clip = $(this.element).addClass("ui-scrollview-clip");
|
||||
|
|
@ -37,7 +43,18 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
|
|||
$child = this._$clip.wrapInner("<div></div>").children();
|
||||
}
|
||||
this._$view = $child.addClass("ui-scrollview-view");
|
||||
|
||||
|
||||
this._$clip.css("overflow", "hidden");
|
||||
this._makePositioned(this._$clip);
|
||||
|
||||
this._$view.css("overflow", "hidden");
|
||||
|
||||
if (!this.options.useCSSTransform)
|
||||
{
|
||||
this._makePositioned(this._$view);
|
||||
this._$view.css({ left: 0, top: 0 });
|
||||
}
|
||||
|
||||
this._sx = 0;
|
||||
this._sy = 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -18,25 +18,42 @@
|
|||
margin: 0;
|
||||
}
|
||||
.square {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
border: solid 1px #333;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
#sv1 {
|
||||
.ui-scrollview-clip .ui-scrollview-clip .square {
|
||||
background-color: #3CF;
|
||||
}
|
||||
|
||||
.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
|
||||
background-color: #F39;
|
||||
}
|
||||
|
||||
.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
|
||||
background-color: #0F6;
|
||||
}
|
||||
|
||||
.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
|
||||
background-color: #FF6;
|
||||
}
|
||||
|
||||
.threeByThree {
|
||||
border: solid 1px black;
|
||||
background-color: #999;
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
#sv1 .view {
|
||||
width: 500px;
|
||||
.threeByThree > .ui-scrollview-view {
|
||||
width: 1300px;
|
||||
background-color: white;
|
||||
}
|
||||
#sv1 .square {
|
||||
.threeByThree .square {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -50,8 +67,8 @@
|
|||
$("[data-role=page]").live("pageshow", function(event) {
|
||||
var $page = $(event.target);
|
||||
$page.find(".ui-scrollview:not(.ui-scrollview-clip)").scrollview();
|
||||
$page.find(".ui-scrollview-h:not(.ui-scrollview-clip)").scrollview({ direction: "horizontal" });
|
||||
$page.find(".ui-scrollview-v:not(.ui-scrollview-clip)").scrollview({ direction: "vertical" });
|
||||
$page.find(".ui-scrollview-horizontal:not(.ui-scrollview-clip)").scrollview({ direction: "horizontal" });
|
||||
$page.find(".ui-scrollview-vertical:not(.ui-scrollview-clip)").scrollview({ direction: "vertical" });
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -65,12 +82,500 @@ $("[data-role=page]").live("pageshow", function(event) {
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<h4>Here is some text to make the page very long</h4>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<div id="sv1" class="ui-scrollview">
|
||||
<div class="view">
|
||||
<h4>Scrollview</h4>
|
||||
<p>To turn an element into a scrollview, simply add a data-scroll="true" to the element. By default, a scrollview can scroll in both the horizontal and vertical directions. If the user drags the view horizontally (left or right), or vertically (up or down), scrolling will be locked so that it only scrolls in that one dimension. If the user drags the view diagonally, he will be able to scroll in both directions at the same time.</p>
|
||||
<div class="ui-scrollview threeByThree">
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
</div>
|
||||
<p>When there are nested scrollviews, if the user drags in a single dimension and hits either end of the view, the drag will be propagated up to the next outer scrollview that can handle a drag in that dimension. So for example, if you drag the scrollview above so that it reaches the top of its view, the entire page will start to scroll upward if you continue dragging. This is because the drag was propagated from the scrollview with the letters in it, out to the scrollview containing the entire content for the page.</p>
|
||||
<h4>Horizontal Scrollview</h4>
|
||||
<p>A scrollview can be set up so that it only scrolls in the horizontal direction. Simply place a data-scroll="horizontal" on the element you want to scroll:</p>
|
||||
<div class="ui-scrollview-horizontal threeByThree">
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
</div>
|
||||
<h4>Vertical Scrollview</h4>
|
||||
<p>A scrollview can be set up so that it only scrolls in the vertical direction. Simply place a data-scroll="vertical" on the element you want to scroll:</p>
|
||||
<div class="ui-scrollview-vertical threeByThree">
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
<div class="square">d</div>
|
||||
<div class="square">e</div>
|
||||
<div class="square">f</div>
|
||||
<div class="square">g</div>
|
||||
<div class="square">h</div>
|
||||
<div class="square">i</div>
|
||||
<div class="square">j</div>
|
||||
<div class="square">k</div>
|
||||
<div class="square">l</div>
|
||||
<div class="square">m</div>
|
||||
<div class="square">n</div>
|
||||
<div class="square">o</div>
|
||||
<div class="square">p</div>
|
||||
<div class="square">q</div>
|
||||
<div class="square">r</div>
|
||||
<div class="square">s</div>
|
||||
<div class="square">t</div>
|
||||
<div class="square">u</div>
|
||||
<div class="square">v</div>
|
||||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
<div class="square">z</div>
|
||||
<div class="square">0</div>
|
||||
<div class="square">1</div>
|
||||
<div class="square">2</div>
|
||||
<div class="square">3</div>
|
||||
<div class="square">4</div>
|
||||
<div class="square">5</div>
|
||||
<div class="square">6</div>
|
||||
<div class="square">7</div>
|
||||
<div class="square">8</div>
|
||||
<div class="square">9</div>
|
||||
<div class="square">a</div>
|
||||
<div class="square">b</div>
|
||||
<div class="square">c</div>
|
||||
|
|
@ -96,14 +601,13 @@ $("[data-role=page]").live("pageshow", function(event) {
|
|||
<div class="square">w</div>
|
||||
<div class="square">x</div>
|
||||
<div class="square">y</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<p> </p>
|
||||
<p></p>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue