getstarted.html

﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三分钟快速上手 - jPlusUI</title>
    <link href="assets/web/styles/jplus-welcome.css" rel="stylesheet">
    <link href="assets/demo/demo.css" rel="stylesheet">
    <style>
        #forkmeongithub {
	        position: absolute;
	        top: 0;
	        right: 0;
        }
        body {
            font-family: 'Microsoft YaHei';
        }
        h2.demo {
            font-size: 24px;
            line-height: 40px;
        }
    </style>
    <script src="assets/web/scripts/jplus-welcome.js" type="text/javascript"></script>
    <script>var Demo = {web: true}</script>
    <script src="assets/demo/demo.js" type="text/javascript"></script>
</head>
<body>
    <a href="https://github.com/jplusui/jplusui/" target="_blank" id="forkmeongithub">
        <img src="assets/web/images/fork_me_on_github.png">
    </a>
    <div id="topbar">
        <div class="x-container x-clear">
            <h1 class="x-left"><a href="index.html" title="jPlusUI - 一个轻量但完整的UI组件库">jPlusUI</a></h1>
            <ul class="x-left">
                <li><a href="whyjplusui.html" title="组件概念">组件概念</a></li>
                <li><a href="features.html" title="设计思路和原则">设计理念</a></li>
                <li><a href="demo.html" title="查看组件列表">文档和演示中心</a></li>
                <li><a href="download.html" title="获取 jPlusUI">下载</a></li>
                <li><a href="community.html" title="讨论和联系方式">社区</a></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div id="body">
            <article class="demo">

                <h2 class="demo">三分钟快速上手 <small>最快时间体验组件化的乐趣</small></h2>

                <h3 class="demo">1. 下载</h3>

                <p class="demo">下载 <a href="https://github.com/downloads/jplusui/jplusui/jplusui-1.0b-release.zip">jplusui-latest-release.zip</a> , 或者下载 <a href="https://github.com/jplusui/jplus-milk/zipball/master">jPlusUI 源码</a> </p>

                <p class="demo">解压zip文件，会得到如下文件结构: </p>

                <script class="demo" type="text/plain">
        jPlusUI-latest/
           └── build/
                ├── images/
                ├── styles/
                │     ├── jplus.css
                │     ├── jplus.min.css
                └── scripts/
                      ├── jplus.js
                      └── jplus.min.js
                </script>

                <p>其中，<code>jplus.*</code> 是已经编译好的源文件，包含了 100 多个常用组件。<code>jplus.min.*</code> 是相应的压缩版。您也可以使用 <a href="/assets/dpl/dplfilelist.html" target="_blank">组件合成工具</a> 来自行编译需要用到的组件。</p>

                <h3 class="demo">2. 引入文件</h3>

                <p class="demo">新建一个 HTML 文件，内容如下:</p>

                <script class="demo-noformat" type="pre/html">
        <!DOCTYPE html>
        <html>
            <head>
                <title>My First Page</title>
                ##<link href="__build/styles/jplus.css__" rel="stylesheet">##
                ##<script src="__build/scripts/jplus.js__" type="text/javascript"></\script>##
            </head>
            <body>
            <h1>Hello j+ UI!</h1>
        </body>
        </html>
                </script>

                <p class="demo">以上文件已经引入了 jPlusUI 所需要的全部文件。jPlusUI 不支持怪癖(Quirks)模式，因此必须定义&lt;!DOCTYPE&gt;, 推荐使用 HTML 5版本的 &lt;!DOCTYPE&gt</p>

                <h3 class="demo">3. 使用组件（以按钮为例）</h3>

                <p class="demo">从<a href="src/Controls/Button/Button.html" target="_blank">按钮的示例页</a>粘贴如下代码: </p>

                <script class="demo demo-noformat" type="code/html">
        <button class="x-button">我是按钮</button>
                </script>

                即可见到效果：

                <button class="x-button">我是按钮</button>

                <p class="demo">所有组件都可以复制示例页中的代码并立即见到效果。</p>

                <p class="demo"><strong>jPlusUI 拥有超过 100 个常用组件, 每个组件都有对应的示例和文档。</strong></p>

                <p>
                    <a class="x-button x-button-large x-button-fixed" href="demo.html">查看更多组件示例 »</a>
                </p>

                
                <!-- Duoshuo Comment BEGIN -->
    <div class="ds-thread"></div>
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"jplusui"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
        || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- Duoshuo Comment END -->

            </article>

        </div>
        <div id="footer">
            <div class="x-container">
                <span class="x-right"><a href="about.html">关于我们</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="LICENSE.txt" target="_blank">The BSD License</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="https://github.com/jplusui/jplusui/issues/new" target="_blank">意见反馈</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="community.html">加入我们</a></span>
                Copyright &copy; 2011-2012 jPlusUI Team. All Rights Reserved.
            </div>
        </div>
    </div>
    <script type="text/javascript" src="assets/web/scripts/stat.js"></script>
</body>
</html>