source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-isa_clean.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-isa_clean.html@5259
Revision 5259, 4.9 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4<meta http-equiv="content-type" content="text/html; charset=utf-8">
5<title>Check Data Types with <code>Lang</code></title>
6
7<style type="text/css">
8/*margin and padding on body element
9  can introduce errors in determining
10  element position and are not recommended;
11  we turn them off as a foundation for YUI
12  CSS treatments. */
13body {
14        margin:0;
15        padding:0;
16}
17</style>
18
19<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
20<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
21
22
23<!--begin custom header content for this example-->
24<style type="text/css">
25    #demo {
26        border-collapse: collapse;
27    }
28    #demo th {
29        background: #E76300;
30        color: #fff;
31        padding: .2em 1em;
32        border: 1px solid #ccc;
33    }
34    #demo td {
35        padding: .2em 1ex;
36        border: 1px solid #ccc;
37        text-align: center;
38    }
39    #demo code {
40        background: #eee;
41        display: block;
42        text-align: left;
43    }
44</style>
45
46<!--end custom header content for this example-->
47
48</head>
49
50<body class=" yui-skin-sam">
51
52<h1>Check Data Types with <code>Lang</code></h1>
53
54<div class="exampleIntro">
55        <p>The <a href="http://developer.yahoo.com/yui/yui/">YUI Global Object</a>
56includes several useful type-checking methods in the <code>Lang</code>
57object.  Click the "Check" button in each row to evaluate the data.</p>
58                       
59</div>
60
61<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
62
63<table id="demo">
64    <thead>
65        <tr>
66            <th>Data</th>
67            <th>isObject</th>
68            <th>isArray</th>
69            <th>isFunction</th>
70        </tr>
71    </thead>
72    <tbody>
73        <tr>
74            <td><code>null<code></td>
75            <td colspan="3"><input type="button" name="demo-1" id="demo-1" value="check"/></td>
76        </tr>
77        <tr>
78            <td><code>[] or new Array()</code></td>
79            <td colspan="3"><input type="button" name="demo-2" id="demo-2" value="check"/></td>
80        </tr>
81        <tr>
82            <td><code>{} or new Object()</code></td>
83            <td colspan="3"><input type="button" name="demo-3" id="demo-3" value="check"/></td>
84        </tr>
85        <tr>
86            <td><code>function Foo() {}</code></td>
87            <td colspan="3"><input type="button" name="demo-4" id="demo-4" value="check"/></td>
88        </tr>
89        <tr>
90            <td><code>new Foo()</code></td>
91            <td colspan="3"><input type="button" name="demo-5" id="demo-5" value="check"/></td>
92        </tr>
93        <!--
94        <tr>
95            <td><code>elem.getElementsByTagName('p')</code></td>
96            <td colspan="3"><input type="button" name="demo-6" id="demo-6" value="check"/></td>
97        </tr>
98        <tr>
99            <td><code>Y.all('#demo td:foo')</code></td>
100            <td colspan="3"><input type="button" name="demo-7" id="demo-7" value="check"/></td>
101        </tr>
102        -->
103    <tbody>
104</table>
105<script type="text/javascript">
106YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {example:true}}).use("node",
107// This method is in the core of the library, so we don't have to use() any
108// additional modules to access it.  However, this example requires 'node'.
109function(Y) {
110
111    var checkType = function (val) {
112        return {
113            'object'  : Y.Lang.isObject(val),
114            'array'   : Y.Lang.isArray(val),
115            'function': Y.Lang.isFunction(val)
116        };
117    };
118
119    var populateRow = function (e, data) {
120        var target = e.target;
121            cell = target.get('parentNode'),
122            row  = cell.get('parentNode');
123
124        row.removeChild(cell);
125
126        var td0 = document.createElement('td'),
127            td1 = td0.cloneNode(false),
128            td2 = td0.cloneNode(false);
129
130        var results = checkType(data);
131
132        td0.appendChild(document.createTextNode(
133            results['object'] ?   'Y' : 'N'));
134        td1.appendChild(document.createTextNode(
135            results['array'] ?    'Y' : 'N'));
136        td2.appendChild(document.createTextNode(
137            results['function'] ? 'Y' : 'N'));
138
139        row.appendChild(td0);
140        row.appendChild(td1);
141        row.appendChild(td2);
142    };
143
144    var foo = function () {};
145    var f = Y.get('#demo');
146
147    Y.on('click',populateRow, '#demo-1', Y, null);
148    Y.on('click',populateRow, '#demo-2', Y, []);
149    Y.on('click',populateRow, '#demo-3', Y, {});
150    Y.on('click',populateRow, '#demo-4', Y, foo);
151    Y.on('click',populateRow, '#demo-5', Y, new foo());
152    /*
153    // We are working with Nodes and NodeLists now, so the results are not as interesting
154    Y.on('click',populateRow, '#demo-6', Y, f.getElementsByTagName('tr'));
155    Y.on('click',populateRow, '#demo-7', Y, Y.all('#demo td:foo'));
156    */
157});
158</script>
159
160<!--END SOURCE CODE FOR EXAMPLE =============================== -->
161
162</body>
163</html>
164<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:34 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.