slicy JS插件

• 弹窗
• 气泡提醒
• 弹出提示
• 幻灯片
• 单行滚动

弹窗

通过rel="dialog"来调用

代码片段

<div class="dialog" style="display:block;">
   	<div class="dialog-head">
    	编辑学校
        <del>×</del>
    </div>
    <div class="dialog-body">
    ...
    </div>
    <div class="dialog-foot">
    	<input name="" type="btn" value="确定" class="btn blue">
    	<input name="" type="btn" value="取消" class="btn">
    </div>
   </div>

效果演示

事件调用

点击我弹出POPUP窗口

<a href="#dialog" class="btn" rel="dialog">点击我弹出对话框窗口</a>

tooltip

气泡提醒组件 通过rel="tooltip"来调用

代码片段

<a rel="tooltip" title="slicy是一个开源中文(X)HTML/CSS 框架">slicy</a>

演示

popover

气泡提醒组件 通过rel="popover"来调用

<a rel="popover" title="slicy是一个开源中文(X)HTML/CSS 框架">slicy</a>

演示

幻灯片

代码片段

<div class="slider">
  <div class="slider-list">
    <ul>
      <li style="display:none;">
      <!--内容-->
      </li>
      <li>
      <!--内容-->
      </li>
    </ul>
  </div>
  <!--左右按钮-->
  <div class="slider-prev">&lsaquo;</div>
  <div class="slider-next">&rsaquo;</div>
</div>

单行滚动

总结出非常常用的单行滚动效果，史上最简单的jQuery实现！代码更小。结构布局更简单。使用更方便。

演示

代码片段

<div class="singlerolling">
  <ul>
    <li>这是第一行</li>
    <li>这是第一行2</li>
  </ul>
</div>