• [模仿] 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

  • 相关阅读:
    java8新特性→方法和构造函数引用:替代Lambda表达式
    java8新特性→Stream流:用于解决已有集合类库既有的弊端
    java8新特性→函数式接口
    java8新特新→Lambda表达式
    子查询
    Vue之监听数据变化watch、computed、methods
    Vue路由-使用命名视图实现经典布局
    Vue路由-使用children属性实现路由
    Vue之路由传参
    Vue路由之touter-link、router-direct的使用
  • 原文地址:https://www.cnblogs.com/wangxinsheng/p/3809063.html
Copyright © 2020-2023  润新知