[模仿] CSSDesk 实时代码效果显示

准备再把css3好好回顾一下的时候，看到有CSSDesk实时代码效果显示的网站，就想去模仿一下，看看它的代码。。。这里就记录一下，下次想找还可以找到
CSSDesk网站： http://cssdesk.com/
-------
用到的东西
1. ACE jsPlugin
2. Jquery UI Resi
插件的使用方法
http://www.cnblogs.com/wangxinsheng/articles/3809048.html
-------
效果图：
------------------------
代码：
html
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <title>TestPlantform @ [TP] by WangXinsheng</title>
  6     <meta content="a Test Plantform which is used to Test CSS and JS and HTML" name="description">
  7     <script charset="utf-8" src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  8     <script src="js/jquery-ui-1.10.4.min.js"></script>
  9     <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
 10     <link rel="stylesheet" type="text/css" href="css/style.css" />
 11     <style>
 12     </style>
 13 </head>
 14 <body>
 15     <!--headerBar-->
 16     <header>
 17         <h1>
 18             <span>TEST </span>Plantform <em>ß</em>
 19         </h1>
 20         <nav>
 21             <ul>
 22                 <li class="reset"><a href="#" class="reset-link">Reset</a> <span class="tooltip">Resetthe
 23                     code to the default</span> </li>
 24                 <li class="downloader"><a href="#" id="download">Download</a> <span class="tooltip">
 25                     Download this code as a file</span> </li>
 26             </ul>
 27         </nav>
 28     </header>
 29     <div class="shadow">
 30     </div>
 31     <!--DeskTop-->
 32     <div id="desk">
 33     </div>
 34     <!--html and css box-->
 35     <section id="controls">
 36         <a class="toggleLink" href="#">« </a>
 37         <div id="htmlbox">
 38             <div class="title-bar">
 39                 <h3>
 40                     HTML
 41                 </h3>
 42             </div>
 43             <div class="content" id="html">
 44                 <!--<div id="html">
 45                 </div>-->
 46             </div>
 47         </div>
 48         <div id="cssbox" class="ui-resizable" style="position: absolute; left: 0px;  100%; height: auto;">
 49             <div class="title-bar">
 50                 <h3>
 51                     CSS
 52                 </h3>
 53             </div>
 54             <div class="content" id="css">
 55                 <!--<div id="css">
 56                 </div>-->
 57             </div>
 58         </div>
 59     </section>
 60     <footer>
 61     </footer>
 62     
 63     <!-- load ace -->
 64     <script src="js/ace/ace.js"></script>
 65     <!-- load ace language tools -->
 66     <script src="js/ace/ext-language_tools.js"></script>
 67 
 68     <script>
 69     var defaults = {
 70         html: "<div>Hello World!</div>",
 71         css: "body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

div {
  background: #fff;
  margin: 0 auto;
   200px;
  padding: 100px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}"
 72     };
 73     var doc,$body, $head, $style;
 74     var htmlEditor,cssEditor;
 75     var oldAllH;
 76     var oldHtmlboxH;
 77     var oldCssboxH;
 78     $(function(){
 79         $frame = $('<iframe id="frame">');
 80         $frame.addClass("blueprint");
 81         $("#desk").html($frame);
 82         setTimeout(function() {
 83             doc = $frame[0].contentWindow.document;
 84             $body = $("body", doc);
 85             $head = $("head", doc);
 86             $style = $("<style type='text/css'/>");
 87             $style[0].type = "text/css";
 88             $head.append($style);
 89             push();
 90         },
 91         1);
 92 
 93         enableHighlighting();
 94 
 95         oldAllH = $("#controls").height();
 96         $("#cssbox,#htmlbox").height($("#controls").height()/2);
 97         oldHtmlboxH = $("#htmlbox").height();
 98         oldCssboxH = $("#cssbox").height();
 99         $("#cssbox .content").css("height", $("#cssbox").height() - 22);
100         $("#htmlbox .content").css("height", $("#htmlbox").height() - 22);
101         
102         htmlEditor.resize();
103         cssEditor.resize();
104 
105         $("#cssbox").css("top", $("#htmlbox").height() + "px");
106         $("#controls").resizable({
107             handles: "e",
108             resize: function(d, c) {
109                 $("#desk").css("left", c.size.width + "px");
110                 $("#controls").width(c.size.width);
111                 
112                 cssEditor.resize();
113                 htmlEditor.resize();
114             },
115             alsoResize: "#cssbox, #htmlbox"
116         });
117         $("#cssbox").resizable({
118             handles: "n",
119             resize: function(d, c) {
120                 $("#htmlbox").css("bottom", c.size.height + "px");
121                 $("#cssbox, #htmlbox").css("height", "auto");
122                 $("#cssbox .content").css("height", $("#cssbox").height() - 22);
123                 $("#htmlbox .content").css("height", $("#htmlbox").height() - 22);
124                 
125                 $("#cssbox").css("top", $("#htmlbox").height() + "px");
126                 $("#cssbox").css("height", c.size.height);
127                 
128                 htmlEditor.resize();
129                 cssEditor.resize();
130                 
131                 oldHtmlboxH = $("#htmlbox").height();
132                 oldCssboxH = $("#cssbox").height();
133             },
134             containment: "#controls",
135             maxHeight: $("#controls").height() - 20,
136             minHeight: 22
137         });
138         $(window).resize(function() {
139             var newHtmlboxH = $("#controls").height() * (oldHtmlboxH / oldAllH);
140             var newCssboxH = $("#controls").height() * (oldCssboxH / oldAllH);
141             var newAllH = $("#controls").height();
142             newHtmlboxH    = (newHtmlboxH<20?20:(newCssboxH<20?newAllH - 20:newHtmlboxH));
143             newCssboxH = (newHtmlboxH<20?newAllH - 20:(newCssboxH<20?20:newCssboxH));
144             $("#controls").css("top","33px");
145             $("#cssbox, #htmlbox").css("height", "auto");
146             $("#htmlbox").css("height", newHtmlboxH);
147             $("#cssbox").css("height", newCssboxH);
148             
149             //console.log("old",oldAllH,oldCssboxH,oldHtmlboxH);
150             //console.log("new",newAllH,newCssboxH,newHtmlboxH);
151             $("#htmlbox").css("bottom", newCssboxH + "px");
152             $("#cssbox").css("top", newHtmlboxH + "px");
153             $("#cssbox .content").css("height", $("#cssbox").height() - 22);
154             $("#htmlbox .content").css("height", $("#htmlbox").height() - 22);
155             
156             htmlEditor.resize();
157             cssEditor.resize();
158 
159             $( "#cssbox" ).resizable( "option", "maxHeight", $("#controls").height() - 20 );
160             oldAllH = $("#controls").height();
161             oldHtmlboxH = $("#htmlbox").height();
162             oldCssboxH = $("#cssbox").height();
163         });
164         $(".toggleLink").data("state", "open").click(function() {
165             if ($(this).data("state") == "open") {
166                 hideCode()
167             } else {
168                 showCode()
169             }
170             return false
171         });
172         $(".reset-link").click(function(e){
173             resetCode();
174         });
175     });
176     
177     function hideCode() {
178         var c = $("#controls");
179         var b = $("#desk");
180         var a = c.width();
181         c.animate({
182             left: "-" + a + "px"
183         },
184         "easeOutQuad",
185         function() {
186             $(".toggleLink").data("state", "closed").text("»").toggleClass("collapsed")
187         });
188         b.animate({
189             left: 0
190         },
191         "easeOutQuad")
192     }
193     function showCode() {
194         var c = $("#controls"),
195         b = $("#desk"),
196         a = c.width();
197         c.animate({
198             left: 0
199         },
200         "easeInQuad",
201         function() {
202             $(".toggleLink").data("state", "open").text("«").toggleClass("collapsed")
203         });
204         b.animate({
205             left: a + "px"
206         },
207         "easeInQuad")
208     }
209 
210     function push() {
211         /*html = highlight ? htmlEditor.getSession().getValue() : $("#html").val();
212         style = highlight ? cssEditor.getSession().getValue() : $("#css").val();*/
213         html = htmlEditor.getValue();
214         style = cssEditor.getValue();
215         $body.html(html);
216         addCss(style);
217     }
218     function addCss(a) {
219         if ($style[0].styleSheet) {
220             $style[0].styleSheet.cssText = a;
221         } else {
222             $style.html(a);
223         }
224     }
225     function enableHighlighting() {
226         /*$(".editor").each(function() {
227             var c = $(this).val(),
228             e = $(this).attr("id"),
229             d = $("<div class='highlighted-editor' id=" + e + "></div>");
230             d.text(c);
231             $(this).replaceWith(d)
232         });*/
233         htmlEditor = ace.edit("html");
234         htmlEditor.session.setMode("ace/mode/html");
235         htmlEditor.setTheme("ace/theme/tomorrow");
236         htmlEditor.setOptions({
237             enableBasicAutocompletion: true,
238             enableSnippets: true,
239             enableLiveAutocompletion: false
240         });
241         
242         cssEditor = ace.edit("css");
243         cssEditor.session.setMode("ace/mode/css");
244         cssEditor.setTheme("ace/theme/tomorrow");
245         cssEditor.setOptions({
246             enableBasicAutocompletion: true,
247             enableSnippets: true,
248             enableLiveAutocompletion: false
249         });
250 
251         resetCode();
252 
253         htmlEditor.on("change",function(e){
254             setTimeout(
255                 function(){
256                     if($("#html").find(".ace_error").length<=0)push();
257                 },500);
258         });
259         cssEditor.on("change",function(e){
260             setTimeout(
261                 function(){
262                     if($("css").find(".ace_error").length<=0)push();
263                 },500);
264         });
265     }
266     function resetCode() {
267         htmlEditor.getSession().setValue(defaults.html);
268         cssEditor.getSession().setValue(defaults.css);
269     }
270     </script>
271 </body>
272 </html>
--------
CSDN下载地址：（可单机运行）
http://download.csdn.net/detail/wangxsh42/7552091