java开发的不太明白html群没加进去 问个幼稚问题

.gitignore

@@ -1,9 +1,5 @@
+_site
+.sass-cache
+.jekyll-metadata
 *.swp
-*.swo
-node_modules
-dist/
-.package/
-.sass-cache/
-.DS_Store
-_site/*
-*.orig
+node_modules/*

CNAME

@@ -0,0 +1 @@
+jqweui.com

README.md

@@ -0,0 +1,2 @@
+# Website for jQuery WeUI
+[jqweui.com](https://jqweui.com)

_config.yml

@@ -6,21 +6,17 @@
 # 'jekyll serve'. If you change this file, please restart the server process.
 
 # Site settings
-title: Your awesome title
-email: your-email@domain.com
+title: jQuery WEUI
+email: lihongxun945@gmail.com
 description: > # this means to ignore newlines until "baseurl:"
-  Write an awesome description for your new site here. You can edit this
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
+  UI lib for build hybrid wechat web app.
 baseurl: "" # the subpath of your site, e.g. /blog
-url: "http://yourdomain.com" # the base hostname & protocol for your site
-twitter_username: jekyllrb
-github_username:  jekyll
+url: "http://localhost:4000/" # the base hostname & protocol for your site
+twitter_username: lihongxun
+github_username:  lihongxun945
 
 # Build settings
 markdown: kramdown
 
-# server
-source:       docs
-host:         0.0.0.0
-port:         4000
+host: 0.0.0.0
+exclude: [node_modules]

_includes/_components/actions.html

@@ -0,0 +1,100 @@
+<article id="actions" class='component' data-url="../dist/demos/action-sheet.html">
+  <h2>ActionSheet</h2>
+  <p>ActionSheet用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。</p>
+
+  <p>ActionSheet 只能通过 JavaScript 进行调用:</p>
+
+{% highlight js %}
+$.actions({
+  actions: [{
+    text: "编辑",
+    onClick: function() {
+      //do something
+    }
+  },{
+    text: "删除",
+    onClick: function() {
+      //do something
+    }
+  }]
+});
+{% endhighlight %}
+
+  <h3>参数说明</h3>
+
+  <p>通过 <code>$.actions(params)</code> 方法打开 ActionSheet。可用参数如下：</p>
+
+  <table class='table'>
+    <tr>
+      <th>参数名</th>
+      <th>说明</th>
+    </tr>
+    <tr>
+      <td>actions</td>
+      <td>菜单项，关于每一个菜单项的配置请参见下文</td>
+    </tr>
+    <tr>
+      <td>title</td>
+      <td>可以给弹层设置一个标题，如果不设置则不会显示标题</td>
+    </tr>
+    <tr>
+      <td>onClose</td>
+      <td>关闭弹层的回调函数</td>
+    </tr>
+  </table>
+
+  <p><code>actions</code> 参数是一个数组，数组中的每一项都是一个菜单。</p>
+  <p>对每一个菜单的可用配置如下：</p>
+
+  <table class='table'>
+    <tr>
+      <th>参数名</th>
+      <th>说明</th>
+    </tr>
+    <tr>
+      <td>text</td>
+      <td>菜单显示的文案</td>
+    </tr>
+    <tr>
+      <td>className</td>
+      <td>菜单上额外追加的class</td>
+    </tr>
+    <tr>
+      <td>onClick</td>
+      <td>点击之后的回调函数</td>
+    </tr>
+  </table>
+
+  <h3>颜色配置</h3>
+
+  <p>从 <code>V0.7.0</code> 开始， 可以通过 <code>className</code> 参数配置不同的颜色或者背景，可以参考右侧的demo用法如下：</p>
+
+{% highlight js %}
+$.actions({
+  actions: [
+    {
+      text: "发布",
+      className: "color-primary",
+    },
+  ...
+});
+{% endhighlight %}
+
+<p>所有可用配置如下：</p>
+
+  <table class="table">
+    <tr>
+      <td>color-primary</td>
+      <td>color-success</td>
+      <td>color-danger</td>
+      <td>color-warning</td>
+    </tr>
+    <tr>
+      <td>bg-primary</td>
+      <td>bg-success</td>
+      <td>bg-danger</td>
+      <td>bg-warning</td>
+    </tr>
+  </table>
+
+</article>

_includes/_components/buttons.html

@@ -0,0 +1,21 @@
+<article id="buttons" class='component' data-url="../dist/demos/buttons.html">
+  <h2>按钮</h2>
+  <p>按钮可以使用 <code>a</code> 或者 <code>button</code> 标签。wap上要触发按钮的 <code>active</code>态，必须触发 <code>ontouchstart</code>事件，可以在 <code>body</code> 上加上 <code>ontouchstart=""</code> 全局触发。</p>
+
+  <p>按钮常见的操作场景：确定、取消、警示，分别对应class：<code>weui-btn_primary</code>、<code>weui-btn_default</code>、<code>weui-btn_warn</code>，每种场景都有自己的置灰态 <code>weui-btn_disabled</code>，除此外还有一种镂空按钮 <code>weui-btn_plain-xxx</code>，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：</p>
+
+{% highlight html %}
+<a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>
+<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">按钮</a>
+<a href="javascript:;" class="weui-btn weui-btn_warn">确认</a>
+<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">确认</a>
+<a href="javascript:;" class="weui-btn weui-btn_default">按钮</a>
+<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">按钮</a>
+<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
+<a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
+{% endhighlight %}
+
+  <h3>Loading状态</h3>
+
+  <p><code>.weui-btn_loading</code> 可以使按钮变为loading状态</p>
+</article>

_includes/_components/calendar.html

@@ -0,0 +1,186 @@
+<article class="component" id="calendar" data-url='../dist/demos/calendar.html'>
+  <h2 class="component-title">日历</h2>
+  <p class="component-description">日历组件用来选择年月日，可以代替系统原生的日历组件，提供更统一的视觉和交互以及更好的兼容性。</p>
+  <p>日历组件需要初始化才能使用，最简单的方式是通过一下JS代码来初始化，绑定到一个input元素上：</p>
+
+{% highlight js %}
+$("#my-input").calendar();
+{% endhighlight %}
+
+  <p>当你点击input元素后，会自动弹出一个JS生成的日历组件。当用户选择日期之后，input的值会被设置为用户选择的日期。</p>
+  <p>如果你不想写js，可以通过以下方式来自动初始化：</p>
+{% highlight html%}
+<input type="text" data-toggle='date' />
+{% endhighlight %}
+
+  <h2>参数</h2>
+  <p>你可以在初始化的时候指定如下参数：</p>
+
+  <table class="table">
+    <thead>
+      <tr>
+        <th>参数名</th>
+        <th>类型</th>
+        <th>默认值</th>
+        <th>说明</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>multiple</td>
+        <td>boolean</td>
+        <td>false</td>
+        <td>是否多选， <code>V0.8.1+</code></td>
+      </tr>
+      <tr>
+        <td>inputReadOnly</td>
+        <td>boolean</td>
+        <td>true</td>
+        <td>是否自动在 <code>input</code> 元素上加上 <code>readonly</code> 属性</td>
+      </tr>
+      <tr>
+        <td>closeByOutsideClick</td>
+        <td>boolean</td>
+        <td>true</td>
+        <td>点击日历外面关闭</td>
+      </tr>
+      <tr>
+        <td>toolbarTemplate</td>
+        <td>string</td>
+        <td>参见源码</td>
+        <td>Toolbar 的HTML结构</td>
+      </tr>
+      <tr>
+        <td>value</td>
+        <td>array</td>
+        <td></td>
+        <td>默认选择的日期，注意是个数组，比如 <code>["2016-12-12"]</code></td>
+      </tr>
+      <tr>
+        <td>formatValue</td>
+        <td>function (p, values)</td>
+        <td></td>
+        <td>格式化函数. <b>values</b> 是用户选择的日期</td>
+      </tr>
+      <tr>
+        <td>monthNames</td>
+        <td>array</td>
+        <td>['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']</td>
+        <td>月名称</td>
+      </tr>
+      <tr>
+        <td>monthNamesShort</td>
+        <td>array</td>
+        <td>['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']</td>
+        <td>月名称缩写</td>
+      </tr>
+      <tr>
+        <td>dayNames</td>
+        <td>array</td>
+        <td>['周日', '周一', '周二', '周三', '周四', '周五', '周六']</td>
+        <td>周名称</td>
+      </tr>
+      <tr>
+        <td>dayNamesShort</td>
+        <td>array</td>
+        <td>['周日', '周一', '周二', '周三', '周四', '周五', '周六']</td>
+        <td>周名称缩写</td>
+      </tr>
+      <tr>
+        <td>dateFormat</td>
+        <td>'yyyy-mm-dd'</td>
+        <td>日期格式</td>
+      </tr>
+      <tr>
+        <td>minDate</td>
+        <td>undefined</td>
+        <td>最小可选日期，比如 <code>2015-06-01</code></td>
+      </tr>
+      <tr>
+        <td>maxDate</td>
+        <td>undefined</td>
+        <td>最大可选日期，比如 <code>2015-08-01</code></td>
+      </tr>
+      <tr>
+        <td>onChange</td>
+        <td>function(p, values, displayValues){}</td>
+        <td>当用户选择日期时触发</td>
+      </tr>
+      <tr>
+        <td>closeOnSelect</td>
+        <td>boolean</td>
+        <td>true</td>
+        <td>用户选择一个时间后就自动关闭</td>
+      </tr>
+    </tr>
+    <tr>
+      <td>yearPicker</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Enable year picker in toolbar</td>
+    </tr>
+    <tr>
+      <th colspan="4">回调函数</th>
+    </tr>
+    <tr>
+      <td>onChange</td>
+      <td>function (p, values, displayValues)</td>
+      <td></td>
+      <td>Callback function that will be executed when picker value changed. <b>values</b> and <b>displayValues</b> are arrays where each item represents value/display value of related column</td>
+    </tr>
+    <tr>
+      <td>onMonthAdd</td>
+      <td>function (p, monthContainer)</td>
+      <td></td>
+      <td>Callback function that will be executed when newly generated month HTML element will be added to calendar.</td>
+    </tr>
+    <tr>
+      <td>onDayClick</td>
+      <td>function (p, dayContainer, year, month, day)</td>
+      <td></td>
+      <td>Callback function that will be executed when user clicks/select any date</td>
+    </tr>
+    <tr>
+      <td>onOpen</td>
+      <td>function (p)</td>
+      <td></td>
+      <td>Callback function that will be executed when picker is opened</td>
+    </tr>
+    <tr>
+      <td>onClose</td>
+      <td>function (p)</td>
+      <td></td>
+      <td>Callback function that will be executed when picker is closed</td>
+    </tr>
+  </tbody>
+</table>
+
+<p>当用户选择完日期之后，会在 input 上触发 <code>change</code> 事件，你可以监听此事件。</p>
+
+<p>如果你只同时选择日期和时间，请使用 <a href='#datetime-picker'>日期时间选择器</a></p>
+
+  <h3>方法</h3>
+
+  <p>通过 <code>$("xxx").calendar("methodname", args)</code> 可以调用method的方法，目前有如下方法可以调用：</p>
+
+{% highlight js %}
+$("#input").calendar("close");  //关闭弹窗
+$("#input").calendar("open");  //打开弹窗
+$("#input").calendar("setValue", ["2012-12-12"]);  //设置日期
+$("#input").calendar("destroy");  //销毁
+{% endhighlight %}
+
+  <h3>内联日历</h3>
+
+  <p>在初始化 <code>Calendar</code> 的时候可以通过 <code>container</code> 参数来指定一个容器，如果把这个容器指定为页面上的一个元素，那么日历就会默认显示出来。</p>
+
+
+{% highlight js %}
+$("#inline-calendar").calendar({
+  container: "#inline-calendar",
+  input: "#date3"
+});
+{% endhighlight %}
+
+<p>如果你在内联日历的时候，不希望有一个 <code>input</code> 会显示用户的输入值，那么只需要指定一个 <code>type="hidden"</code> 的input即可。但是千万注意不能不设置 input 参数。具体请参见右侧demo的写法</p>
+</article>