[模仿] CSSDesk 实时代码效果显示
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; width: 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 {\n font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n padding: 100px;\n font-size: 13px;\n}\n\ndiv {\n background: #fff;\n margin: 0 auto;\n width: 200px;\n padding: 100px;\n text-align: center;\n /* border-radius */\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n border-radius: 5px;\n /* box-shadow */\n -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;\n -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;\n box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;\n}" 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下载地址：（可单机运行）
