EasyWebApp
/
index.html

<!DocType HTML>
<html><head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>EasyWebApp 官方网站</title>

    <link rel="stylesheet" href="doc/core/css/EasyWebUI.css" />
    <link rel="stylesheet" href="doc/fontpage.css" />

    <link rel="console" href="console" />
    <script src="doc/core/javascript/EasyImport.js"></script>
    <script>
        ImportJS([
            {
                'iQuery+.js':    true,
                '//cdn.bootcss.com/lrsjng.jquery-qrcode/0.14.0/jquery-qrcode.min.js':    true
            },
            '../css/EasyWebUI.js',
            '../../fontpage.js'
        ]);
    </script>
</head><body class="CenterX">
    <div class="Head Black_O">
        <div class="PC_Narrow Grid-Row CenterY">
            <div class="Grid-Column">
                <a class="HTML_Tag" href="#Feature">
                    E<span class="Red">a</span>syWebApp
                </a>
            </div>
            <div class="Grid-Column Column_1-2">
                <div class="DropDown Head">
                    <ul class="NavBar">
                        <li><a href="#Demo">演示程序</a></li>
                        <li><a href="#Compare">竞品比较</a></li>
                        <li><a target="_blank" href="doc/">使用教程</a></li>
                        <li><a href="#OSC">开放源码</a></li>
                        <li><a href="#Popular">社区推荐</a></li>
                    </ul>
                </div>
            </div>
            <form class="Grid-Column"
                  target="_blank" action="https://www.sogou.com/web">
                <input type="search" name="query" placeholder="搜索关键词" />
            </form>
        </div>
    </div>
    <div class="Body PC_Narrow" id="Feature">
        <div class="Head">
            <h1>EasyWebApp</h1>
            <h2>为 jQuery 程序猿打造的 单页应用引擎！</h2>
            <a class="Button" target="_blank"
               href="//git.oschina.net/Tech_Query/EasyWebApp/releases">
                立即获取
            </a>
        </div>
        <div class="Body">
            <div class="Item-Box visible">
                <h3 class="Red">
                    <i class="Icon Eye"></i>上手快
                </h3>
                <ul class="Ellipsis">
                    <li>拓展<em>HTML 5 原生语义</em>，无自创模板语法</li>
                    <li>
                        支持加载符合<em>MarkDown 规范</em>的内容页面、
                        <em>JSON 规范</em>的内容数据
                    </li>
                    <li>业务逻辑写在<em>类 jQuery 事件绑定</em>回调中</li>
                </ul>
            </div>
            <div class="Item-Box visible">
                <h3 class="Red">
                    <i class="Icon Pen"></i>编码少
                </h3>
                <ul class="Ellipsis">
                    <li>自动监听、代理 用户点击、提交事件</li>
                    <li>无需手写 AJAX、pushState，专注内页渲染逻辑</li>
                </ul>
            </div>
            <div class="Item-Box visible">
                <h3 class="Red">
                    <i class="Icon Home"></i>兼容佳
                </h3>
                <ul class="Ellipsis">
                    <li>
                        可运行于各种<em>jQuery API</em>实现库之上
                        （jQuery v1.9+、Zepto、Mass Framework、
                        <a target="_blank" href="http://jslite.io/">JSLite</a>、
                        <a target="_blank" href="//git.oschina.net/Tech_Query/iQuery/">iQuery</a> 等）
                    </li>
                    <li>
                        不排斥现有 jQuery 插件
                    </li>
                    <li>
                        支持手写 <code class="HTML_Tag">script</code>、<em>AMD 规范</em>加载器
                    </li>
                </ul>
            </div>
            <div class="Item-Box visible">
                <h3 class="Red">
                    <i class="Icon Search"></i>进阶易
                </h3>
                <ul class="Ellipsis">
                    <li>
                        基于 <a target="_blank" href="//git.oschina.net/Tech_Query/iQuery/blob/master/iQuery+.js">iQuery+</a>
                        <em>通用视图接口</em>实现<em>组件化开发</em>、
                        面向对象式的解耦/通信
                    </li>
                    <li>
                        兼容支持上述接口的第三方组件/类库（
                        <a target="_blank" href="//git.oschina.net/Tech_Query/EasyWebUI/">EasyWebUI</a> 等）
                    </li>
                </ul>
            </div>
        </div>
        <h3 class="HTML_Tag" id="Demo">演示程序</h3>
        <div class="Grid-Row">
            <div>
                <div class="Head">
                    <span class="DropDown Head" id="QRcode">
                        <i class="Icon Mobile"></i>
                        <div class="DropDown Body"></div>
                    </span>
                    <a title="在新窗口打开" target="_blank" href="../idaily/">
                        <i class="Icon Screen"></i>
                    </a>
                </div>
                <iframe data-src="../idaily/"></iframe>
                <p>
                    感谢<a target="_blank" href="http://www.tngou.net/">天狗云开放平台</a>提供的开放数据
                </p>
            </div>
            <div class="Column_3-5 Tab">
                <label></label>
                <pre class="Body"></pre>
            </div>
        </div>
        <h3 class="HTML_Tag" id="Compare">竞品比较</h3>
        <div><table>
            <thead><tr>
                <th>SPA 引擎/框架</th>
                <th>EasyWebApp</th>
                <th><a target="_blank" href="http://pjax.herokuapp.com/">
                    jquery-pjax
                </a></th>
                <th><a target="_blank" href="https://github.com/turbolinks/turbolinks">
                    Turbolinks
                </a></th>
                <th><a target="_blank" href="http://m.sui.taobao.org/">
                    SUI Mobile
                </a></th>
            </tr></thead>
            <tbody>
                <tr>
                    <td>外部依赖</td>
                    <td>jQuery API 兼容库</td>
                    <td>jQuery API 兼容库</td>
                    <td>
                        <i class="Icon Error Red"></i>
                        （与 jQuery 配合良好）
                    </td>
                    <td>
                        <i class="Icon Error Red"></i>
                        （内置 jQuery 兼容 API）
                    </td>
                </tr>
                <tr>
                    <td>浏览器兼容</td>
                    <td>IE 8+</td>
                    <td>IE 10+</td>
                    <td>IE 10+</td>
                    <td>iOS 6+、Android 4+</td>
                </tr>
                <tr>
                    <td>链接元素</td>
                    <td><span>
                        任何可见元素、<code class="HTML_Tag">link</code>（通过 HTML 属性指定）
                    </span></td>
                    <td>任何可见元素（通过 jQuery 实例方法指定）</td>
                    <td><code class="HTML_Tag">a href="同域 URL"</code></td>
                    <td><code class="HTML_Tag">a href="URL"</code></td>
                </tr>
                <tr>
                    <td>渲染模式</td>
                    <td><ul>
                        <li>后端渲染好的 HTML</li>
                        <li>MarkDown 格式文本</li>
                        <li>HTML 模板 + JSON 数据</li>
                    </ul></td>
                    <td>后端渲染好的 HTML</td>
                    <td>后端渲染好的 HTML</td>
                    <td><ul>
                        <li>后端渲染好的 HTML</li>
                        <li>HTML 内联自创模板语法 + JS API</li>
                    </ul></td>
                </tr>
                <tr>
                    <td>HTML 片段</td>
                    <td><i class="Icon Check Green"></i></td>
                    <td><i class="Icon Check Green"></i></td>
                    <td><i class="Icon Error Red"></i></td>
                    <td><i class="Icon Check Green"></i></td>
                </tr>
                <tr>
                    <td>内联页面</td>
                    <td><i class="Icon Check Green"></i></td>
                    <td><i class="Icon Error Red"></i></td>
                    <td><i class="Icon Error Red"></i></td>
                    <td><i class="Icon Check Green"></i></td>
                </tr>
                <tr>
                    <td>渲染容器</td>
                    <td>任何可见、有 innerHTML 的元素</td>
                    <td>任何可见、有 innerHTML 的元素</td>
                    <td><code class="HTML_Tag">body</code></td>
                    <td>任何可见、有 innerHTML 的元素</td>
                </tr>
                <tr>
                    <td>自定义事件</td>
                    <td>
                        类 jQuery 事件监听 API，
                        支持<em>多路径条件</em>绑定、
                        <em>多回调最终有效数据</em>渲染
                    </td>
                    <td>jQuery 自定义事件</td>
                    <td>jQuery 自定义事件</td>
                    <td>jQuery 自定义事件</td>
                </tr>
            </tbody>
        </table></div>
        <h3 class="HTML_Tag" id="OSC">开发动态</h3>
        <iframe frameBorder="0" allowTransparency="true"
                data-src="doc/Git-OSC_RW.html?repository=Tech_Query/EasyWebApp">
        </iframe>
        <h3 class="HTML_Tag" id="Popular">社区推荐</h3>
        <p>
            <a class="Item-Box" target="_blank"
               href="http://weibo.com/1400220917/CsUjYq66s">
                <img class="Logo Round" src="http://tva1.sinaimg.cn/crop.0.0.180.180.180/5375acf5jw1e8qgp5bmzyj2050050aa8.jpg" />
                @开源中国
            </a>
            <a class="Item-Box" target="_blank"
               href="http://weibo.com/1737987381/Ct0jdrcqw">
                <img class="Logo Round" src="http://tva4.sinaimg.cn/crop.0.0.180.180.180/67979535jw1e8qgp5bmzyj2050050aa8.jpg" />
                @程序员曲
            </a>
            <a class="Item-Box" target="_blank"
               href="http://weibo.com/1092662444/CsUCslTOQ">
                <img class="Logo Round" src="http://tva2.sinaimg.cn/crop.0.0.640.640.180/4120b4acjw8eh3spex1ikj20hs0hsgmh.jpg" />
                @会的不多
            </a>
        </p>
        <hr />
    </div>
    <div class="Foot PC_Narrow Grid-Row">
        <div class="Grid-Column">
            (C)2015-2016
            <a target="_blank" href="http://my.oschina.net/TechQuery/">TechQuery</a>
        </div>
        <div class="Grid-Column">
            Powered by
            <a target="_blank" href="//git.oschina.net/Tech_Query/EasyImport.js/">
                EasyImport.js
            </a>,
            <a target="_blank" href="//git.oschina.net/Tech_Query/EasyWebUI/">
                EasyWebUI
            </a>
        </div>
    </div>
</body></html>