forked from UIZE/UIZE-JavaScript-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-ipad-examples.html
112 lines (97 loc) · 6.35 KB
/
javascript-ipad-examples.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Ipad Examples | UIZE JavaScript Framework</title>
<meta name="keywords" content="UIZE JavaScript Framework"/>
<meta name="description" content="The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 13 JavaScript ipad examples."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.simpledoc.css"/>
<link rel="stylesheet" href="css/page.index.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="index.html" title="UIZE JavaScript Framework home"></a>
JavaScript Ipad Examples
</h1>
<div class="main">
<div class="preamble">
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 13 JavaScript ipad examples.
<div class="tourPromo">
<div class="tourPromoHeading">TAKE A STEP-BY-STEP TOUR...</div>
<div class="tourPromoText">
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
</div>
<div>
<a href="javascript-feature-tours.html?tour=ipad" class="buttonLink">START THE TOUR<span class="arrow"> </span></a>
<br style="line-height:6px;"/>
<br style="clear:right;"/>
</div>
</div>
</div>
<ul id="page-index">
<li>
<div class="itemTitle"><a href="examples/3d-rotation-viewer.html">3D Rotation Viewer</a><span class="arrow"> </span></div>
<div class="itemBody">Easily create a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee.html">Basic Marquee</a><span class="arrow"> </span></div>
<div class="itemBody">See a basic example of the marquee widget in action. Some test links provided let you change some of the widget's configuration options dynamically.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-cube-with-pickers.html">Color Cube With Color Pickers</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a color grid, with RGB color pickers for editing corner colors, and the ability to click-and-drag in the grid to "smear" its colors.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/color-picker.html">Color Picker</a><span class="arrow"> </span></div>
<div class="itemBody">See how three RGB color picker widgets - with sliders for red, green, and blue - can be used to tweak text color, background color, and border color.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee-modes.html">Different Marquee Modes</a><span class="arrow"> </span></div>
<div class="itemBody">See how to configure the marquee widget. Learn how to contrain to area, have a fixed aspect ratio, minimum dimensions, non-resizable sides, and more.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/drag-to-move.html">Drag-to-move</a><span class="arrow"> </span></div>
<div class="itemBody">Learn about drag-and-drop in this basic example where you'll see how to wire up a bunch of image thumbnails so they can be dragged around a workspace.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-drag.html">Draggable Image Port</a><span class="arrow"> </span></div>
<div class="itemBody">See how a draggable image port is wired up to a set of sliders. Use the image port and the sliders update. Use the sliders and the image port updates.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/collection-dynamic.html">Dynamic Collection</a><span class="arrow"> </span></div>
<div class="itemBody">See an example of a dynamic grid of images, where you can select one or more, drag-and-drop to rearrange, remove, select all, clear selection, etc.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/image-port-with-marquee.html">Image Port Inside a Marquee</a><span class="arrow"> </span></div>
<div class="itemBody">See this demo, where an image port is resizable by a marquee, to better understand how the logical sizing and positiong of the image port widget work.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/marquee-and-image-port.html">Marquee and Image Port</a><span class="arrow"> </span></div>
<div class="itemBody">See this demo for a drag-and-drop image crop interface, with an enlarged display of the cropped region. Drag to move it, or drag its edges to resize.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-from-template.html">Multiple Sliders From a Template</a><span class="arrow"> </span></div>
<div class="itemBody">See how to supply your own HTML template for widgets. Seven sliders in a row - all using the same HTML, but each with its own unique configuration.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/sliders-in-color-blender.html">Sliders in a Color Blender</a><span class="arrow"> </span></div>
<div class="itemBody">Three sliders for one RGB color selector. Three sliders for another. One slider to blend between the colors. Three sliders to show the blended color.</div>
</li>
<li>
<div class="itemTitle"><a href="examples/transferring-state.html">Transferring State</a><span class="arrow"> </span></div>
<div class="itemBody">UIZE makes it easy to transfer state from one widget to another. See how to copy state from one marquee to another - or even how to keep them coupled.</div>
</li>
</ul>
</div>
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Doc.library',
'UizeDotCom.Page.Index'
],
builder:function () {(window.page = new UizeDotCom.Page.Index).wireUi ()}
});
</script>
</body></html>