source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-extend_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-extend_clean.html@5259
Revision 5259, 3.7 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>Create Class Hierarchies with <code>extend</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<!--there is no custom header content for this example-->
23
24</head>
25
26<body class=" yui-skin-sam">
27
28<h1>Create Class Hierarchies with <code>extend</code></h1>
29
30<div class="exampleIntro">
31        <p>JavaScript supports the notion of class hierarchies.  As in other
32object-oriented languages, you can create generic classes, then create
33specialized subclasses that add or override functionality of the
34superclass.</p>
35
36<p>Click the "Show Inheritance" button to do some evaluation of the created object.</p>
37                       
38</div>
39
40<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
41
42<pre style="margin-bottom: 1em">
43var chicken = new Chicken();
44</pre>
45<input type="button" name="demo_btn" id="demo_btn" value="Show Inheritance"/>
46<div id="demo">
47</div>
48<script type="text/javascript">
49
50YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {example:true}}).use("node",
51// This method is in the 'oop' module.  Since we require 'node'
52// for this example, and 'node' requires 'oop', the 'oop' module
53// will be loaded automatically.
54
55function(Y) {
56
57    var Bird = function (name) {
58        this.name = name;
59    };
60
61    Bird.prototype.flighted   = true;  // Default for all Birds
62    Bird.prototype.isFlighted = function () { return this.flighted };
63    Bird.prototype.getName    = function () { return this.name };
64
65    Chicken = function (name) {
66        // Chain the constructors
67        this.constructor.superclass.constructor.call(this, name);
68    };
69    // Chickens are birds
70    Y.extend(Chicken, Bird);
71   
72    // Define the Chicken prototype methods/members
73    Chicken.prototype.flighted = false; // Override default for all Chickens
74
75    showInheritance = function () {
76        var chicken = new Chicken('Little'),
77            results = Y.get('#demo');
78
79        results.set('innerHTML', results.get('innerHTML') + 
80            chicken instanceof Object ?
81                "<p>chicken IS an instance of Object.</p>" :
82                "<p>chicken IS NOT an instance of Object.</p>");
83
84        results.set('innerHTML', results.get('innerHTML') + 
85            chicken instanceof Bird ?
86                "<p>chicken IS an instance of Y.example.Bird.</p>" :
87                "<p>chicken IS NOT an instance of Y.example.Bird.</p>");
88
89        results.set('innerHTML', results.get('innerHTML') + 
90            chicken instanceof Chicken ?
91                "<p>chicken IS an instance of Y.example.Chicken.</p>" :
92                "<p>chicken IS NOT an instance of Y.example.Chicken.</p>");
93
94        // Chicken instances inherit Bird methods and members
95        results.set('innerHTML', results.get('innerHTML') + 
96            chicken.isFlighted() ?
97                "<p>chicken CAN fly.</p>" :
98                "<p>chicken CAN NOT fly.</p>");
99
100        results.set('innerHTML', results.get('innerHTML') + 
101            "<p>chicken's name is " + chicken.getName() + ".</p>");
102    }
103   
104    Y.on('click', showInheritance, '#demo_btn');
105});
106</script>
107
108<!--END SOURCE CODE FOR EXAMPLE =============================== -->
109
110</body>
111</html>
112<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:34 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.