perf demo

Author: ciaoca

css/demo.css

@@ -2,16 +2,15 @@ body{margin:0;background-color:#f0f0f0;}
 h1,h2,h3{margin:1em 0;font-size:2.25rem;line-height:1;}
 h2{font-size:1.5rem;}
 h3{font-size:1.25rem;}
-
 a{color:#006af9;text-decoration:none;}
 
 .wrap{box-sizing:border-box;max-width:800px;margin:0 auto;}
+.main .wrap{padding:20px 40px;background-color:#fff;}
 
 header{background-color:#2d2d2d;color:#fff;}
 header .wrap{padding:30px 0;}
 header h1{margin:0;}
 
-.main .wrap{padding:20px 40px;background-color:#fff;}
 fieldset{margin:1em 0;border-color:#ddd;}
 fieldset legend{color:#888;font-size:1rem;line-height:2;}
 fieldset input,
@@ -23,5 +22,13 @@ fieldset button{padding:0.5em;}
 .about section h2{margin-bottom:0;}
 .about a:hover{opacity:0.8;}
 
+.acts{font-size:0.875rem;}
+.acts a{display:inline-block;padding:0.5em 1em;border-radius:3px;background-color:#eee;color:#555;
+transition-property:background-color, color;
+transition-duration:0.2s;
+}
+.acts a:hover{color:#333;background-color:#ddd;}
+.acts .group + .group{margin-top:0.5em;}
+
 #prompt_box{display:none;margin:10px;padding:10px;border:2px solid #ccc;}
 #prompt_box label{display:block;margin-bottom:5px;}

index.html

@@ -13,10 +13,10 @@
     <h1>cxDialog 对话框</h1>
   </div>
 </header>
-
 <div class="main">
   <div class="wrap">
     <h2>示例</h2>
+
     <form id="example" action="javascript://" method="get">
       <fieldset>
         <legend>按钮</legend>
@@ -47,11 +47,15 @@ <h2>示例</h2>
 
       <fieldset>
         <legend>显示对话框</legend>
-        <button type="button" name="alert">模拟 alert</button>
-        <button type="button" name="confirm">模拟 confirm</button>
-        <button type="button" name="prompt">模拟 prompt</button>
-        <p id="result_confirm"></p>
-        <p id="result_prompt"></p>
+        <section id="acts" class="acts">
+          <a href="javascript://" rel="alert">模拟 alert</a>
+          <a href="javascript://" rel="confirm">模拟 confirm</a>
+          <a href="javascript://" rel="prompt">模拟 prompt</a>
+        </section>
+        <section>
+          <p id="result_confirm"></p>
+          <p id="result_prompt"></p>
+        </section>
       </fieldset>
     </form>
 
@@ -120,16 +124,17 @@ <h2>协议</h2>
     $.extend($.cxDialog.defaults, opts);
   };
 
-  form.on('click', 'button', function() {
+  $('#acts').on('click', 'a', function(){
+    event.preventDefault();
     var _this = this;
-    var _name = _this.name;
+    var _rel = _this.rel;
 
     setOptions();
 
-    if (_name === 'alert') {
+    if (_rel === 'alert') {
       $.cxDialog('Hello World<br>I am cxDialog');
 
-    } else if (_name === 'confirm') {
+    } else if (_rel === 'confirm') {
       $.cxDialog({
         title: 'cxDialog',
         info: '现在开始使用 <strong>cxDialog</strong>',
@@ -141,7 +146,7 @@ <h2>协议</h2>
         }
       });
 
-    } else if (_name === 'prompt') {
+    } else if (_rel === 'prompt') {
       $.cxDialog({
         title: 'cxDialog',
         info: document.getElementById('prompt_box'),