comparison js/bt/DEMO/demofiles/demo.js @ 18:0d557e6e73f7

Added beautytips and some additional event handling code to the library.
author David Eads <eads@chicagotech.org>
date Fri, 06 Mar 2009 14:11:46 -0600
parents
children
comparison
equal deleted inserted replaced
17:1a77f87927dd 18:0d557e6e73f7
1 /**
2 * Fancy script sets up the page and runs the code in the div.js elements
3 */
4 $(function(){
5 $('div.example').each(function() {
6 var target = $('.target, .alt-target', this);
7 var htmlSource = $('<div />').append(target.clone()).html();
8 htmlSource = $('<div class="html-source">' + escapeHTMLEncode(htmlSource) + '</div>');
9 var html = $('<div class="html-link"><a href="#">html</a></div>').click(function(){
10 if ($.browser.msie) {
11 // ugh!!! effing IE
12 $(this).parent().find('.html-source').toggle();
13 }
14 else {
15 $(this).parent().find('.html-source').slideToggle();
16 }
17 return false;
18 });
19 var jsLink = $('<div class="html-link"><a href="#">javascript</a></div>').click(function(){
20 if ($.browser.msie) {
21 $(this).parent().find('.js').toggle();
22 }
23 else {
24 $(this).parent().find('.js').slideToggle();
25 }
26 return false;
27 });
28
29 var cssSource = $('style', this);
30 if (cssSource.length) {
31 cssSource = $('<div class="css-source">' + cssSource.html() + '</div>');
32 var css = $('<div class="css-link"><a href="#">css</a></div>').click(function(){
33 if ($.browser.msie) {
34 $(this).parent().find('.css-source').toggle();
35 }
36 else {
37 $(this).parent().find('.css-source').slideToggle();
38 }
39 return false;
40 });
41 }
42
43 var jsSource = $('.js', this);
44 $(jsSource).before(html);
45 $(jsSource).before(htmlSource);
46 textareaWrap(htmlSource);
47 $('textarea', htmlSource).data('target', target[0]).change(function(){
48 var newTarg = $($(this).val()).get(0);
49 $($(this).data('target')).replaceWith(newTarg);
50 $(this).data('target', newTarg);
51 });
52 htmlSource.hide();
53
54 if (typeof css != 'undefined') {
55 $(jsSource).before(css);
56 $(jsSource).before(cssSource);
57 textareaWrap(cssSource);
58 cssSource.hide();
59 }
60
61 $(jsSource).before(jsLink);
62 //eval the source!
63 eval(jsSource.html());
64 textareaWrap(jsSource, true);
65 $('textarea', jsSource).change(function(){
66 eval($(this).val());
67 });
68 jsSource.hide();
69 });
70
71 // add BeautyTip to js and html-source textareas
72 $('div.js textarea, div.html-source textarea').bt('This is live code. Feel free to edit and try out new options. Click (or tab) out of the textarea to see the results of your edits. If things go awry, reload the page.', {positions: 'right', trigger: ['focus', 'blur'], overlap: 8, width: 150, cssStyles: {fontSize: '11px'}});
73 });
74
75 function textareaWrap(obj, escape) {
76 var html = $(obj).html();
77 if (escape) {
78 html = escapeHTMLEncode(html);
79 }
80 $(obj).empty().append($('<textarea />').append(html));
81 var $textarea = $('textarea', obj);
82 $textarea.width('100%');
83 var scrollHeight = $textarea.get(0).scrollHeight || 50;
84 $('textarea', obj).css({height: scrollHeight});
85 }
86
87 function escapeHTMLEncode(str) {
88 var div = document.createElement('div');
89 var text = document.createTextNode(str);
90 div.appendChild(text);
91 return div.innerHTML;
92 }