source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/yui/yui-compat_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-compat_clean.html@5259
Revision 5259, 2.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>YUI 2.x and 3.x</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" id="styleoverrides">
25#cal1Cont {
26    background-color:#004C6D;
27}
28
29#cal1Cont div.calheader {
30    cursor: move;
31}
32
33#cal1Cont .yui-calendar {
34    width:auto;
35    background-color:transparent;
36}
37
38#cal1Cont .yui-calendar tr, #cal1Cont .yui-calendar th {
39    background-color:transparent;
40    vertical-align:middle;
41    text-transform:none;
42    color:#fff;
43}
44
45#cal1Cont .yui-calendar a:hover {
46    text-decoration:none;
47}
48
49#results {
50    background-color:#8DD5E7;
51    border:1px solid black;
52    position: absolute;
53    top: 15px;
54    right: 5px;
55    width: 300px;
56}
57</style>
58
59<!--end custom header content for this example-->
60
61</head>
62
63<body class=" yui-skin-sam">
64
65<h1>YUI 2.x and 3.x</h1>
66
67<div class="exampleIntro">
68        <p>This example shows how to use YUI 2.x and 3.x at the same time as well as interacting with each other. We will make a 2.x Calendar Control draggable with 3.x Drag &amp; Drop and use 3.x's Node to handle the Calendar's Select Event.</p>
69                       
70</div>
71
72<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
73
74<!-- css --> 
75<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css"> 
76<!-- js --> 
77<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
78<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js"></script> 
79
80<div id="cal1Cont"></div>
81
82<div id="results">Click a date..</div>
83
84<script>
85
86YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {example:true}}).use("dd",
87
88function(Y) {
89    var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
90    cal1.renderEvent.subscribe(function() {
91        var dd = new Y.DD.Drag({
92            node: '#cal1Cont'
93        }).addHandle('div.calheader');
94    });
95    cal1.selectEvent.subscribe(function(e, dates) {
96        var d = dates[0][0];
97        var dateStr = d[1] + '/' + d[2] + '/' + d[0];
98        Y.Node.get('#results').set('innerHTML', 'You clicked on: ' + dateStr);
99    });
100    cal1.render();
101});
102</script>
103
104<!--END SOURCE CODE FOR EXAMPLE =============================== -->
105
106</body>
107</html>
108<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:34 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.