slicy JS插件

• 彈窗
• 氣泡提醒
• 彈出提示
• 幻燈片
• 單行滾動(dòng)

彈窗

通過(guò)rel="dialog"來(lái)調(diào)用

代碼片段

<div class="dialog" style="display:block;">
   	<div class="dialog-head">
    	編輯學(xué)校
        <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>

效果演示

事件調(diào)用

點(diǎn)擊我彈出POPUP窗口

<a href="#dialog" class="btn" rel="dialog">點(diǎn)擊我彈出對(duì)話框窗口</a>

tooltip

氣泡提醒組件 通過(guò)rel="tooltip"來(lái)調(diào)用

代碼片段

<a rel="tooltip" title="slicy是一個(gè)開(kāi)源中文(X)HTML/CSS 框架">slicy</a>

演示

popover

氣泡提醒組件 通過(guò)rel="popover"來(lái)調(diào)用

<a rel="popover" title="slicy是一個(gè)開(kāi)源中文(X)HTML/CSS 框架">slicy</a>

演示

幻燈片

代碼片段

<div class="slider">
  <div class="slider-list">
    <ul>
      <li style="display:none;">
      <!--內(nèi)容-->
      </li>
      <li>
      <!--內(nèi)容-->
      </li>
    </ul>
  </div>
  <!--左右按鈕-->
  <div class="slider-prev">&lsaquo;</div>
  <div class="slider-next">&rsaquo;</div>
</div>

單行滾動(dòng)

總結(jié)出非常常用的單行滾動(dòng)效果，史上最簡(jiǎn)單的jQuery實(shí)現(xiàn)！代碼更小。結(jié)構(gòu)布局更簡(jiǎn)單。使用更方便。

演示

代碼片段

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