rails_auth 1.0.4

data/test/dummy/node_modules/yougexiangfa_ui/examples/examples/sticky.html

@@ -0,0 +1,115 @@
+---
+title: 首页
+layout: default
+---
+
+  <div class="ui main text container">
+    <h1 class="ui header">Sticky Example</h1>
+    <p>This example shows how to use lazy loaded images, a sticky menu, and a simple text container</p>
+  </div>
+
+
+  <div class="ui borderless main menu">
+    <div class="ui text container">
+      <div href="#" class="header item">
+        <img class="logo" src="assets/images/logo.png">
+        Project Name
+      </div>
+      <a href="#" class="item">Blog</a>
+      <a href="#" class="item">Articles</a>
+      <a href="#" class="ui right floated dropdown item">
+        Dropdown <i class="dropdown icon"></i>
+        <div class="menu">
+          <div class="item">Link Item</div>
+          <div class="item">Link Item</div>
+          <div class="divider"></div>
+          <div class="header">Header Item</div>
+          <div class="item">
+            <i class="dropdown icon"></i>
+            Sub Menu
+            <div class="menu">
+              <div class="item">Link Item</div>
+              <div class="item">Link Item</div>
+            </div>
+          </div>
+          <div class="item">Link Item</div>
+        </div>
+      </a>
+    </div>
+  </div>
+
+  <div class="ui text container">
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <div class="overlay">
+      <div class="ui labeled icon vertical menu">
+        <a class="item"><i class="twitter icon"></i> Tweet</a>
+        <a class="item"><i class="facebook icon"></i> Share</a>
+        <a class="item"><i class="mail icon"></i> E-mail</a>
+      </div>
+    </div>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <img class="ui medium left floated image" data-src="assets/images/wireframe/square-image.png">
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+    <img class="ui medium right floated image" data-src="assets/images/wireframe/square-image.png">
+    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <img class="ui medium left floated image" data-src="assets/images/wireframe/square-image.png">
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+    <img class="ui medium right floated image" data-src="assets/images/wireframe/square-image.png">
+    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+  </div>
+
+  <div class="ui inverted vertical footer segment">
+    <div class="ui center aligned container">
+      <div class="ui stackable inverted divided grid">
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 1</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 2</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="three wide column">
+          <h4 class="ui inverted header">Group 3</h4>
+          <div class="ui inverted link list">
+            <a href="#" class="item">Link One</a>
+            <a href="#" class="item">Link Two</a>
+            <a href="#" class="item">Link Three</a>
+            <a href="#" class="item">Link Four</a>
+          </div>
+        </div>
+        <div class="seven wide column">
+          <h4 class="ui inverted header">Footer Header</h4>
+          <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+        </div>
+      </div>
+      <div class="ui inverted section divider"></div>
+      <img src="assets/images/logo.png" class="ui centered mini image">
+      <div class="ui horizontal inverted small divided link list">
+        <a class="item" href="#">Site Map</a>
+        <a class="item" href="#">Contact Us</a>
+        <a class="item" href="#">Terms and Conditions</a>
+        <a class="item" href="#">Privacy Policy</a>
+      </div>
+    </div>
+  </div>

data/test/dummy/node_modules/yougexiangfa_ui/examples/examples/verification.html

@@ -0,0 +1,228 @@
+---
+title: 首页
+layout: default
+---
+<div class="ui container">
+    <div class="ui grid">
+        <div class="left floated fourteen wide column">
+            My Assignments
+        </div>
+    </div>
+    <div class="ui blue segment">
+        <form class="ui form segment user1">
+        <p>告诉我们你的信息</p>
+        <div class="two fields">
+          <div class="field">
+            <label>Name</label>
+            <input placeholder="First Name" name="name" type="text">
+          </div>
+          <div class="field">
+            <label>Gender</label>
+            <div class="ui dropdown selection" tabindex="0"><select name="gender">
+              <option value="">Gender</option>
+              <option value="male">Male</option>
+              <option value="female">Female</option>
+            </select><i class="dropdown icon"></i><div class="default text">Gender</div><div class="menu" tabindex="-1"><div class="item" data-value="male">Male</div><div class="item" data-value="female">Female</div></div></div>
+          </div>
+        </div>
+        <div class="two fields">
+          <div class="field">
+            <label>Username</label>
+            <input placeholder="Username" name="username" type="text">
+          </div>
+          <div class="field">
+            <label>Password</label>
+            <input type="password" name="password">
+          </div>
+        </div>
+       <!--  <div class="field">
+            <label>email</label>
+            <input type="text" name="email" placeholder="email">
+          </div> -->
+        <div class="field">
+          <label>Skills</label>
+          <div class="ui dropdown selection multiple" tabindex="0"><select name="skills" multiple="">
+            <option value="">Select Skills</option>
+            <option value="css">CSS</option>
+            <option value="html">HTML</option>
+            <option value="javascript">Javascript</option>
+            <option value="design">Graphic Design</option>
+            <option value="plumbing">Plumbing</option>
+            <option value="mech">Mechanical Engineering</option>
+            <option value="repair">Kitchen Repair</option>
+          </select><i class="dropdown icon"></i><div class="default text">Select Skills</div><div class="menu" tabindex="-1"><div class="item" data-value="css">CSS</div><div class="item" data-value="html">HTML</div><div class="item" data-value="javascript">Javascript</div><div class="item" data-value="design">Graphic Design</div><div class="item" data-value="plumbing">Plumbing</div><div class="item" data-value="mech">Mechanical Engineering</div><div class="item" data-value="repair">Kitchen Repair</div></div></div>
+        </div>
+        <div class="inline field">
+          <div class="ui checkbox">
+            <input type="checkbox" name="terms" tabindex="0" class="hidden">
+            <label>我同意上述条款以及条件。</label>
+          </div>
+        </div>
+        <div class="ui blue submit button">Submit</div>
+        <div class="ui error message"></div>
+      </form>
+        <form class="ui form segment success test">
+            <div class="field">
+            <label>测试字段</label>
+            <input placeholder="测试字段" name="test" type="text" data-validate="name">
+          </div>
+          <div class="ui blue submit button">Submit</div>
+          <div class="ui reset button">重置</div>
+          <div class="ui clear button">Clear</div>
+        </form>
+        <form class="ui form test2">
+          <div class="two fields ">
+            <div class="field">
+              <label>Match 1</label>
+              <input name="match1" type="text" value="same">
+            </div>
+            <div class="field">
+              <label>Match 2</label>
+              <input name="match2" type="text" value="different">
+            </div>
+          </div>
+          <div class="two fields">
+            <div class="field">
+              <label>Different 1</label>
+              <input name="different1" type="text" value="same">
+            </div>
+            <div class="field">
+              <label>Different 2</label>
+              <input name="different2" type="text" value="same">
+            </div>
+          </div>
+          <div class="ui submit button">Submit</div>
+          <div class="ui error message"></div>
+        </form>
+    </div>
+</div>
+<script type="text/javascript" >
+    /*时间控件*/
+    $('#reservation').daterangepicker();
+
+    $('.search.dropdown').dropdown();
+
+    //设置表单的值 
+ /*   $('.writing.example form')
+      // set one value
+      .form('set value', 'name', 'Jack')
+       // set several values
+      .form('set values', {
+        name     : 'Jack',
+        gender   : 'male',
+        colors   : ['red', 'grey'],
+        username : 'jlukic',
+        password : 'youdliketoknow',
+        terms    : true
+      });
+      */
+    //添加验证信息
+    $('.user1').form({
+        fields: {
+          name     : 'regExp[/^[a-z0-9_-]{4,16}$/]',
+          gender   : 'empty',
+          username : 'integer[1..100]',
+          password : ['minLength[6]', 'empty'],
+          skills   : ['minCount[2]', 'empty'],
+          terms    : 'checked'
+        },
+        inline : true,   //显示位置 （行内）
+        on     : 'blur'  //失去焦点验证 
+    });
+    //通过自定义字段验证data-validate
+    $('.test').form({
+        fields: {
+            name: {
+                identifier : 'name',
+                rules: [
+                  {
+                    type   : 'empty'
+                  }
+                ]
+            }
+        },
+        inline : true,
+        on     : 'blur'
+    });
+
+//自定义错误信息的验证
+$('.ui.form').form({
+    fields: {
+      gender: {
+        identifier  : 'gender',
+        rules: [
+          {
+            type   : 'empty',
+            prompt : 'Please enter a gender' //自定义错误信息 
+          }
+        ]
+      },
+      name: {
+        identifier  : 'name',
+        rules: [
+          {
+            type   : 'empty',
+            prompt : 'Please enter your name'
+          }
+        ]
+      }
+    }
+  });
+//判断2个字段值否一样
+$('.test2').form({
+    on: 'blur',
+    fields: {
+      match: {
+        identifier  : 'match2',
+        rules: [
+          {
+            type   : 'match[match1]',
+            prompt : 'Please put the same value in both fields'
+          }
+        ]
+      },
+      different: {
+        identifier  : 'different2',
+        rules: [
+          {
+            type   : 'different[different1]',
+            prompt : 'Please put different values for each field'
+          }
+        ]
+      }
+    }
+  });
+
+
+/*$.fn.form.settings.defaults = {
+  email: {
+    identifier : 'email',
+    rules: [
+      {
+        type   : 'email',
+        prompt : 'Please enter a valid e-mail'
+      }
+    ]
+  },name: {
+    identifier : 'name',
+    rules: [
+      {
+        type   : 'text',
+        prompt : 'aaaaaaaaaaa'
+      }
+    ]
+  },
+  // this form doesn't have a cc email but it will not produce an error
+  ccEmail: {
+    identifier : 'cc-email',
+    optional   : true,
+    rules: [
+      {
+        type   : 'email',
+        prompt : 'Please enter a valid second e-mail'
+      }
+    ]
+  },
+};*/
+</script>
+

data/test/dummy/node_modules/yougexiangfa_ui/examples/index.md

@@ -0,0 +1,13 @@
+---
+title: 示例
+layout: module
+---
+
+
+## 项目说明
+
+- 扩展 [Semantic-UI](https://github.com/Semantic-Org/Semantic-UI);
+
+## 关于`Semantic-UI`
+
+* 对用户非常用好的前端框架；

data/test/dummy/node_modules/yougexiangfa_ui/examples/modules/accordion.html

@@ -0,0 +1,116 @@
+---
+title: 首页
+layout: module
+---
+
+
+<div class="ui accordion">
+    <div class="title">
+        <i class="dropdown icon"></i>
+        What is a dog?
+    </div>
+    <div class="content">
+        <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
+    </div>
+    <div class="title">
+        <i class="dropdown icon"></i>
+        What kinds of dogs are there?
+    </div>
+    <div class="content">
+        <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
+    </div>
+    <div class="title">
+        <i class="dropdown icon"></i>
+        How do you acquire a dog?
+    </div>
+    <div class="content">
+        <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
+        <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
+    </div>
+</div>
+<div class="ui divider"></div>
+<div class="ui styled accordion">
+    <div class="title">
+        <i class="dropdown icon"></i>
+        What is a dog?
+    </div>
+    <div class="content">
+        <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
+    </div>
+    <div class="title">
+        <i class="dropdown icon"></i>
+        What kinds of dogs are there?
+    </div>
+    <div class="content">
+        <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
+    </div>
+    <div class="title">
+        <i class="dropdown icon"></i>
+        How do you acquire a dog?
+    </div>
+    <div class="content">
+        <p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
+        <p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
+    </div>
+</div>
+<div class="ui divider"></div>
+<div class="ui styled fluid accordion">
+    <div class="title">
+        <i class="dropdown icon"></i>
+        What is a dog?
+    </div>
+    <div class="content">
+        <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
+    </div>
+    <div class="title">
+        <i class="dropdown icon"></i>
+        What kinds of dogs are there?
+    </div>
+    <div class="content">
+        <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
+    </div>
+    <div class="title">
+        <i class="dropdown icon"></i>
+        How do you acquire a dog?
+    </div>
+    <div class="content">
+        <p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
+        <p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
+    </div>
+</div>
+<div class="ui divider"></div>
+<div class="ui inverted segment">
+    <div class="ui inverted accordion">
+        <div class="title">
+            <i class="dropdown icon"></i>
+            What is a dog?
+        </div>
+        <div class="content">
+            <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
+        </div>
+        <div class="title">
+            <i class="dropdown icon"></i>
+            What kinds of dogs are there?
+        </div>
+        <div class="content">
+            <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
+        </div>
+        <div class="title">
+            <i class="dropdown icon"></i>
+            How do you acquire a dog?
+        </div>
+        <div class="content">
+            <p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
+            <p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
+        </div>
+    </div>
+</div>
+<script>
+    $('.accordion')
+            .accordion({
+                selector: {
+                    trigger: '.title .icon'
+                }
+            })
+    ;
+</script>

data/test/dummy/node_modules/yougexiangfa_ui/examples/modules/modal.html

@@ -0,0 +1,89 @@
+---
+title: 首页
+layout: module
+---
+
+<div class="ui united modal" id="modal1">
+  <div class="header">Modal 1</div>
+  <div class="content">Some info will go here...</div>
+  <div class="actions">
+    <div class="ui blue labeled icon button" id="btn-modal-1">关闭</div>
+  </div>
+</div>
+
+<div class="ui united fullscreen modal" id="modal2">
+  <div class="header"> Modal 2 </div>
+  <div class="content">If you want to close previous modals before show the next modal, you should disable the parameter <b>'allowMultiple'</b>.  </div>
+  <div class="actions">
+    <div class="ui red labeled icon button" id="btn-modal-2"><i class="arrow sign left icon"></i>继续</div>
+  </div>
+</div>
+
+
+<div class="ui united small modal" id="modal3">
+  <div class="header"> Modal 3 </div>
+  <div class="content"> Hello World </div>
+  <div class="actions">
+    <div class="ui blue labeled icon button" id="btn-modal-3"> <i class="checkmark icon"></i> 关闭 </div> </div>
+</div>
+
+<div class="ui fullscreen modal" id="modal4">
+  <i class="close icon"></i>
+  <div class="header">
+    更新你的设置
+  </div>
+  <div class="content">
+    <div class="ui form">
+      <h4 class="ui dividing header">给我们您的反馈</h4>
+      <div class="field">
+        <label>反馈</label>
+        <textarea></textarea>
+      </div>
+      <div class="field">
+        <div class="ui checkbox">
+          <input type="checkbox" checked="checked" name="contact-me">
+          <label>可以联系我.</label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="actions">
+    <div class="ui button">取消</div>
+    <div class="ui green button">发送</div>
+  </div>
+</div>
+
+
+<div style="padding: 30px;">
+  <button data-modal="modal1" id="call-modal-1" class="ui green button">标准弹出层</button>
+  <button data-modal="modal2" id="call-modal-2" class="ui red button">多个弹出层</button>
+  <button data-modal="modal3" id="call-modal-3" class="ui orange button">文本框弹出层</button>
+</div>
+
+<script>
+  $('.united.modal').modal({
+    //allowMultiple如果设置为true在打开一个新的弹出层时不会关闭其他可见的弹出层.
+    allowMultiple: false
+  });
+  //attach events后面的值表示接受事件的一方
+  $('#modal3').modal('attach events', '#btn-modal-2');
+  $('div .green.button').on('click',function () {
+    $('#modal1')
+            .modal('show')
+  });
+  $('#btn-modal-1').on('click', function () {
+    $('#modal1')
+            .modal('hide')
+  });
+  $('div .red.button').on('click',function () {
+    $('#modal2')
+            .modal('show')
+  });
+  $('#btn-modal-3').on('click', function () {
+    $('#modal2').modal('hide');
+    $('#modal3').modal('hide');
+  });
+  $('div .orange.button').on('click', function () {
+    $('#modal4').modal('show')
+  })
+</script>

data/test/dummy/node_modules/yougexiangfa_ui/examples/modules/popup.html

@@ -0,0 +1,48 @@
+---
+title: 首页
+layout: module
+---
+
+<div class="ui icon button" data-content="Add users to your feed">
+    <i class="add icon"></i>
+</div>
+<div class="ui divider"></div>
+<img src="/assets/images/avatar/nan.jpg" data-title="Elliot Fu" data-content="Elliot has been a member since July 2012" class="ui avatar image">
+<img src="/assets/images/avatar/tom.jpg" data-title="Stevie Feliciano" data-content="Stevie has been a member since August 2013" class="ui avatar image">
+<div class="ui divider"></div>
+<div class="ui icon button" data-content="The default theme's basic popup removes the pointing arrow." data-variation="basic">
+    <i class="add icon"></i>
+</div>
+<div class="ui divider"></div>
+<i class="circular heart icon link" data-content="Hello. This is a mini popup" data-variation="mini"></i>
+<i class="circular heart icon link" data-content="Hello. This is a tiny popup" data-variation="tiny"></i>
+<i class="circular heart icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
+<i class="circular heart icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
+<i class="circular heart icon link" data-content="Hello. This is a huge popup" data-variation="huge"></i>
+<i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
+<div class="ui divider"></div>
+<div class="ui button">Show flowing popup</div>
+<div class="ui flowing popup top left transition hidden">
+    <div class="ui three column divided center aligned grid">
+        <div class="column">
+            <h4 class="ui header">Basic Plan</h4>
+            <p><b>2</b> projects, $10 a month</p>
+            <div class="ui button">Choose</div>
+        </div>
+        <div class="column">
+            <h4 class="ui header">Business Plan</h4>
+            <p><b>5</b> projects, $20 a month</p>
+            <div class="ui button">Choose</div>
+        </div>
+        <div class="column">
+            <h4 class="ui header">Premium Plan</h4>
+            <p><b>8</b> projects, $25 a month</p>
+            <div class="ui button">Choose</div>
+        </div>
+    </div>
+</div>
+<script>
+    $('.button').popup();
+    $('.link').popup();
+    $('.image').popup();
+</script>