generator-minxing

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>MxUI</title> <link rel="stylesheet" href="../../styles/mx.css"/> <link rel="stylesheet" href="../../styles/example.css"/> <style> .page{ opacity: 1; } .page.home .font{ font-size: 27px; } .reset{ width: 100%; text-align: left; resize: none; margin-top: 8px; background: #fff; outline: none; font-size: 14px; padding: 12px 0 0; font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace; } pre{ padding: 10px 20px; background: #fff; border-radius: 4px; border:1px solid #eee; margin:10px 0; font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace; white-space: pre-wrap; max-width: 100%; word-wrap : break-word; } code{ font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace; } /* .pre{ overflow-y: scroll; max-height: 10rem; }*/ .mx-parent{ position: relative; display: block; } .mx-copy{ position: absolute; right: 0; display: block; font-size: 12px; text-align: right; padding: 5px 8px; background-color: #fff; color: #767676; border-radius: 4px; border: 1px solid #elele8; top: 11px; left: 0px; } .mx-copy-t{ top: 0; } .mx-copy-t6{ top: 6px; } .mx-copy:hover{ background-color: #563d7c; } </style> </head> <body> <div class="page"> <div class="page__hd"> <h1 class="page__title">Input</h1> <p class="page__desc">表单输入</p> </div> <div class="page__bd"> <div class="mx-cells__title">单选列表项</div> <div class="mx-cells mx-cells_radio"> <label class="mx-cell mx-check__label" for="x11"> <div class="mx-cell__bd"> <p>cell standard</p> </div> <div class="mx-cell__ft"> <input type="radio" class="mx-check" name="radio1" id="x11"/> <span class="mx-icon-checked"></span> </div> </label> <label class="mx-cell mx-check__label" for="x12"> <div class="mx-cell__bd"> <p>cell standard</p> </div> <div class="mx-cell__ft"> <input type="radio" name="radio1" class="mx-check" id="x12" checked="checked"/> <span class="mx-icon-checked"></span> </div> </label> <a href="javascript:void(0);" class="mx-cell mx-cell_link"> <div class="mx-cell__bd">添加更多</div> </a> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">单选列表项</div> <div class="mx-cells mx-cells_radio"> <label class="mx-cell mx-check__label" for="x11"> <div class="mx-cell__bd"> <p>cell standard</p> </div> <div class="mx-cell__ft"> <input type="radio" class="mx-check" name="radio1" id="x11"/> <span class="mx-icon-checked"></span> </div> </label> <label class="mx-cell mx-check__label" for="x12"> <div class="mx-cell__bd"> <p>cell standard</p> </div> <div class="mx-cell__ft"> <input type="radio" name="radio1" class="mx-check" id="x12" checked="checked"/> <span class="mx-icon-checked"></span> </div> </label> <a href="javascript:void(0);" class="mx-cell mx-cell_link"> <div class="mx-cell__bd">添加更多</div> </a> </div> </pre> <div class="mx-cells__title">复选列表项</div> <div class="mx-cells mx-cells_checkbox"> <label class="mx-cell mx-check__label" for="s11"> <div class="mx-cell__hd"> <input type="checkbox" class="mx-check" name="checkbox1" id="s11" checked="checked"/> <i class="mx-icon-checked"></i> </div> <div class="mx-cell__bd"> <p>standard is dealt for u.</p> </div> </label> <label class="mx-cell mx-check__label" for="s12"> <div class="mx-cell__hd"> <input type="checkbox" name="checkbox1" class="mx-check" id="s12"/> <i class="mx-icon-checked"></i> </div> <div class="mx-cell__bd"> <p>standard is dealicient for u.</p> </div> </label> <a href="javascript:void(0);" class="mx-cell mx-cell_link"> <div class="mx-cell__bd">添加更多</div> </a> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">复选列表项</div> <div class="mx-cells mx-cells_checkbox"> <label class="mx-cell mx-check__label" for="s11"> <div class="mx-cell__hd"> <input type="checkbox" class="mx-check" name="checkbox1" id="s11" checked="checked"/> <i class="mx-icon-checked"></i> </div> <div class="mx-cell__bd"> <p>standard is dealt for u.</p> </div> </label> <label class="mx-cell mx-check__label" for="s12"> <div class="mx-cell__hd"> <input type="checkbox" name="checkbox1" class="mx-check" id="s12"/> <i class="mx-icon-checked"></i> </div> <div class="mx-cell__bd"> <p>standard is dealicient for u.</p> </div> </label> <a href="javascript:void(0);" class="mx-cell mx-cell_link"> <div class="mx-cell__bd">添加更多</div> </a> </div> </pre> <div class="mx-cells__title">表单</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell"> <div class="mx-cell__hd"><label class="mx-label">qq</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/> </div> </div> <div class="mx-cell mx-cell_vcode"> <div class="mx-cell__hd"> <label class="mx-label">手机号</label> </div> <div class="mx-cell__bd"> <input class="mx-input" type="tel" placeholder="请输入手机号"/> </div> <div class="mx-cell__ft"> <button class="mx-vcode-btn">获取验证码</button> </div> </div> <div class="mx-cell"> <div class="mx-cell__hd"><label for="" class="mx-label">日期</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="date" value=""/> </div> </div> <div class="mx-cell"> <div class="mx-cell__hd"><label for="" class="mx-label">时间</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="datetime-local" value="" placeholder=""/> </div> </div> <div class="mx-cell mx-cell_vcode"> <div class="mx-cell__hd"><label class="mx-label">验证码</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="number" placeholder="请输入验证码"/> </div> <div class="mx-cell__ft"> <img class="mx-vcode-img" src="../../images/vcode.jpg" /> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">表单</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell"> <div class="mx-cell__hd"><label class="mx-label">qq</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/> </div> </div> <div class="mx-cell mx-cell_vcode"> <div class="mx-cell__hd"> <label class="mx-label">手机号</label> </div> <div class="mx-cell__bd"> <input class="mx-input" type="tel" placeholder="请输入手机号"/> </div> <div class="mx-cell__ft"> <button class="mx-vcode-btn">获取验证码</button> </div> </div> <div class="mx-cell"> <div class="mx-cell__hd"><label for="" class="mx-label">日期</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="date" value=""/> </div> </div> <div class="mx-cell"> <div class="mx-cell__hd"><label for="" class="mx-label">时间</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="datetime-local" value="" placeholder=""/> </div> </div> <div class="mx-cell mx-cell_vcode"> <div class="mx-cell__hd"><label class="mx-label">验证码</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="number" placeholder="请输入验证码"/> </div> <div class="mx-cell__ft"> <img class="mx-vcode-img" src="../../images/vcode.jpg" /> </div> </div> </div> </pre> <div class="mx-cells__tips">底部说明文字底部说明文字</div> <div class="mx-cells__title">表单报错</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell mx-cell_warn"> <div class="mx-cell__hd"><label for="" class="mx-label">卡号</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="number" pattern="[0-9]*" value="mx input error" placeholder="请输入卡号"/> </div> <div class="mx-cell__ft"> <i class="mx-icon-warn"></i> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__tips">底部说明文字底部说明文字</div> <div class="mx-cells__title">表单报错</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell mx-cell_warn"> <div class="mx-cell__hd"><label for="" class="mx-label">卡号</label></div> <div class="mx-cell__bd"> <input class="mx-input" type="number" pattern="[0-9]*" value="mx input error" placeholder="请输入卡号"/> </div> <div class="mx-cell__ft"> <i class="mx-icon-warn"></i> </div> </div> </div> </pre> <div class="mx-cells__title">开关</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell mx-cell_switch"> <div class="mx-cell__bd">标题文字</div> <div class="mx-cell__ft"> <input class="mx-switch" type="checkbox"/> </div> </div> <div class="mx-cell mx-cell_switch"> <div class="mx-cell__bd">兼容IE Edge的版本</div> <div class="mx-cell__ft"> <label for="switchCP" class="mx-switch-cp"> <input id="switchCP" class="mx-switch-cp__input" type="checkbox" checked="checked"/> <div class="mx-switch-cp__box"></div> </label> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">开关</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell mx-cell_switch"> <div class="mx-cell__bd">标题文字</div> <div class="mx-cell__ft"> <input class="mx-switch" type="checkbox"/> </div> </div> <div class="mx-cell mx-cell_switch"> <div class="mx-cell__bd">兼容IE Edge的版本</div> <div class="mx-cell__ft"> <label for="switchCP" class="mx-switch-cp"> <input id="switchCP" class="mx-switch-cp__input" type="checkbox" checked="checked"/> <div class="mx-switch-cp__box"></div> </label> </div> </div> </div> </pre> <div class="mx-cells__title">文本框</div> <div class="mx-cells"> <div class="mx-cell"> <div class="mx-cell__bd"> <input class="mx-input" type="text" placeholder="请输入文本"/> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">文本框</div> <div class="mx-cells"> <div class="mx-cell"> <div class="mx-cell__bd"> <input class="mx-input" type="text" placeholder="请输入文本"/> </div> </div> </div> </pre> <div class="mx-cells__title">文本域</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell"> <div class="mx-cell__bd"> <textarea class="mx-textarea" placeholder="请输入文本" rows="3"></textarea> <div class="mx-textarea-counter"><span>0</span>/200</div> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">文本域</div> <div class="mx-cells mx-cells_form"> <div class="mx-cell"> <div class="mx-cell__bd"> <textarea class="mx-textarea" placeholder="请输入文本" rows="3"></textarea> <div class="mx-textarea-counter"><span>0</span>/200</div> </div> </div> </div> </pre> <div class="mx-cells__title">选择</div> <div class="mx-cells"> <div class="mx-cell mx-cell_select mx-cell_select-before"> <div class="mx-cell__hd"> <select class="mx-select" name="select2"> <option value="1">+86</option> <option value="2">+80</option> <option value="3">+84</option> <option value="4">+87</option> </select> </div> <div class="mx-cell__bd"> <input class="mx-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">选择</div> <div class="mx-cells"> <div class="mx-cell mx-cell_select mx-cell_select-before"> <div class="mx-cell__hd"> <select class="mx-select" name="select2"> <option value="1">+86</option> <option value="2">+80</option> <option value="3">+84</option> <option value="4">+87</option> </select> </div> <div class="mx-cell__bd"> <input class="mx-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/> </div> </div> </div> </pre> <div class="mx-cells__title">选择</div> <div class="mx-cells"> <div class="mx-cell mx-cell_select"> <div class="mx-cell__bd"> <select class="mx-select" name="select1"> <option selected="" value="1">微信号</option> <option value="2">QQ号</option> <option value="3">Email</option> </select> </div> </div> <div class="mx-cell mx-cell_select mx-cell_select-after"> <div class="mx-cell__hd"> <label for="" class="mx-label">国家/地区</label> </div> <div class="mx-cell__bd"> <select class="mx-select" name="select2"> <option value="1">中国</option> <option value="2">美国</option> <option value="3">英国</option> </select> </div> </div> </div> <div class="mx-parent"> <button class="mx-copy">copy</button> </div> <pre class="pre"> <div class="mx-cells__title">选择</div> <div class="mx-cells"> <div class="mx-cell mx-cell_select"> <div class="mx-cell__bd"> <select class="mx-select" name="select1"> <option selected="" value="1">微信号</option> <option value="2">QQ号</option> <option value="3">Email</option> </select> </div> </div> <div class="mx-cell mx-cell_select mx-cell_select-after"> <div class="mx-cell__hd"> <label for="" class="mx-label">国家/地区</label> </div> <div class="mx-cell__bd"> <select class="mx-select" name="select2"> <option value="1">中国</option> <option value="2">美国</option> <option value="3">英国</option> </select> </div> </div> </div> </pre> <label for="mxAgree" class="mx-agree"> <input id="mxAgree" type="checkbox" class="mx-agree__checkbox"/> <span class="mx-agree__text"> 阅读并同意<a href="javascript:void(0);">《相关条款》</a> </span> </label> <div class="mx-btn-area"> <a class="mx-btn mx-btn_primary" href="javascript:" id="showTooltips">确定</a> </div> <div class="mx-parent"> <button class="mx-copy mx-copy-t6">copy</button> </div> <pre class="pre"> <label for="mxAgree" class="mx-agree"> <input id="mxAgree" type="checkbox" class="mx-agree__checkbox"/> <span class="mx-agree__text"> 阅读并同意<a href="javascript:void(0);">《相关条款》</a> </span> </label> <div class="mx-btn-area"> <a class="mx-btn mx-btn_primary" href="javascript:" id="showTooltips">确定</a> </div> </pre> </div> <div class="page__ft"> <a href="../../index.html"><img src="../../images/icon_footer_link.png" /></a> </div> </div> <script src="../../scripts/zepto.min.js"></script> <script src="../../scripts/clipboard.min.js"></script> <script> var clipboard = new Clipboard('.mx-parent',{ target: function(trigger) { return trigger.nextElementSibling; } }); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> <script type="text/javascript"> $(function(){ var $tooltips = $('.js_tooltips'); $('#showTooltips').on('click', function(){ if ($tooltips.css('display') != 'none') return; // toptips的fixed, 如果有`animation`, `position: fixed`不生效 $('.page.cell').removeClass('slideIn'); $tooltips.css('display', 'block'); setTimeout(function () { $tooltips.css('display', 'none'); }, 2000); }); }); </script> </body> </html>