examples/form.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CardKit Reference</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">

<link href="static/css/main.css" rel="stylesheet">
<link href="css/shCoreDefault.css" rel="stylesheet">
<link href="css/console.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<style>
</style>
<script>function ckControl(){return false}</script>
</head>
<body ontouchstart="return ckControl()">


<div class="ck-root"><div class="ck-main">
    
<header class="ck-header">
    
<span class="ck-top-title">CardKit Ref</span>
<span class="ck-top-nav"></span>
<span class="ck-top-actions"></span>

<div class="ckcfg-navdrawer">
    <div class="ckd-hd">
        <h2>CardKit Reference</h2>
    </div>
    <div class="ckd-content">
        <div class="search">
            <a class="ck-modal-link" href="#"
                data-url="formcontent.html">search</a>
        </div>
        <ul>
            <li><a class="ck-link" href="index.html">Home</a></li>
        </ul>
        <h6>Cross-platform</h6>
        <ul>
            <li><a class="ck-link" href="grade.html">Graded Browser Support</a></li>
            <li><a class="ck-link" href="browsers.html">Compatibility testing</a></li>
            <li><a class="ck-link" href="#consoleCard">Console</a></li>
        </ul>
        <h6>Component</h6>
        <ul>
            <li><a class="ck-link" href="control.html">Control</a></li>
            <li><a class="ck-link" href="picker.html">Picker</a></li>
            <li><a class="ck-link" href="overlay.html">Overlay</a></li>
        </ul>
        <h6>Unit</h6>
        <ul>
            <li><a class="ck-link" href="box.html">Box</a></li>
            <li><a class="ck-link" href="list.html">List</a></li>
            <li><a class="ck-link" href="mini.html">Mini</a></li>
            <li><a class="ck-link" href="form.html">Form</a></li>
            <li><a class="ck-link" href="extra.html">Extra</a></li>
        </ul>
    </div>
</div>

<div class="ckcfg-card-actions">
</div>

<div class="ckcfg-page-actions">
    <button type="button" class="ckd-overflow-item switchstyle">切换界面风格</button>
</div>

</header>

<div class="ck-wrapper">

    <div class="ck-card" id="ckDefault">

        <div class="ck-banner-unit topbox">
            <h2>CardKit / Unit</h2>
        </div>

        <div class="ck-box-unit" data-cfg-paper="true">
            <header class="ckd-hd">Form Unit</header>
        </div>

        <div class="ck-list-unit" data-style="menu">
            <header class="ckd-hd">Source code</header>
            <a href="https://github.com/douban-f2e/CardKit/tree/master/tpl/unit/form.tpl" class="ckd-item ckd-link-extern">tpl/unit/form</a>
            <a href="https://github.com/douban-f2e/CardKit/tree/master/js/cardkit/parser/form.js" class="ckd-item ckd-link-extern">cardkit/parser/form</a>
        </div>

        <div class="ck-list-unit" data-style="more" data-cfg-paper="true">
            <a href="#consoleCard" class="ckd-item">Console</a>
            <a href="#rawCard" class="ckd-item">Raw source</a>
            <a href="#optionsCard" class="ckd-item">Configure options</a>
        </div>

        <div class="ck-box-unit" data-cfg-paper="true">
            <header class="ckd-hd">Usages</header>
        </div>

        <!-- demo -->
        <div class="ck-form-unit">
            <div class="ckd-item">
                <label for="feedback-username">Name</label>
                <input id="feedback-username" type="text" name="username" placeholder="How do we call you" value="" />
            </div>
            <div class="ckd-item">
                <label for="feedback-username">Email</label>
                <input id="feedback-username" type="text" name="username" placeholder="Your email address" value="" />
                <p>
                    <input id="remember" checked type="checkbox" name="remember">
                    <label for="remember">remember me</label>
                </p>
            </div>
            <div class="ckd-item">
                <label for="feedback-comment">Feedback</label>
                <textarea id="feedback-comment" name="comment" placeholder="Describe your problems." maxlength="800"></textarea>
                <label><em>Any advice is more than welcome.</em></label>
            </div>
        </div>
        <!-- demo end -->

    </div>

    <div class="ck-card" id="consoleCard">

        <div class="ck-box-unit" data-cfg-paper="true">
            <header class="ckd-hd">Console</header>
            <div id="console"></div>
        </div>

        <script type="text/cardscript">
        this.addEventListener('card:ready', function(e){
            require(['mo/console'], function(console){
                console.config({
                    record: false,
                    output: e.card.find('#console')[0]
                });
            });
        });
        </script>

    </div>

    <div class="ck-card" id="rawCard">

        <div class="ck-box-unit" data-cfg-plainhd="true">
            <header class="ckd-hd">Raw source</header>
            <div class="ck-folder enabled"
                    data-disable-label="Hide the code" 
                    data-label="header">
                <header>Hide the code</header>
                <div class="democode content" gsource="rawData1"></div>
            </div>
        </div>

    </div>

    <div class="ck-card" id="optionsCard">
    </div>

    <div class="ck-card ck-loading" id="ckLoading">
        <div>
            <p><span></span><span></span><span></span></p>
            <p>加载中...</p>
        </div>
    </div>

    <footer class="ck-footer">
        <div class="copyright">&copy; 2005－2012 douban.com, all rights reserved</div>
    </footer>

</div>

</div></div>

<script src="js/shCore.js"></script>
<script src="js/shBrushXml.js"></script>
<script src="js/shBrushJScript.js"></script>
<script src="static/js/main.js"></script>
<!-- COLLECTED JS -->
<script id="jsdemo1">
</script>
<script src="js/common.js"></script>
</body>
</html>