基于jQuery實現可拖動分頁插件



33 129 44



特效描述:基于jQuery實現 拖動分頁插件,基于jQuery實現可拖動分頁插件

代碼結構

1. 引入JS

<script src='js/jquery.js'></script>
<script src='js/jquery-ui.js'></script>
<script src="js/index.js"></script>

2. HTML代碼

<h1>Responsive, Accessible, Alternate Pagination experiment.</h1>
<h3>I'm attempting to make a more interesting and user-friendly pagination</h3>
<p>Drag or use Arrow Keys to set the desired page, then click 'Go' or press 'Enter' (CTRL + Arrow Keys skip by 10.)</p>
  <section class="pagination" role="navigation">
    <div id="pageSliderDescription">
      Pagination: "Arrow" keys to move between pages, 
      "Enter" to go to selected page. (ctrl+arrow skips 10).</div>
    <div class="pageSlider long"></div>
    <form class="pageForm" action="#">
      <label class="pageLabel" for="pageInput">
        Page number you'd like to go to. (Max of 30)
      </label>
       <a 
      class="pagePrev pageSkip" 
      href="#?page=6" 
      title="Previous Page (6)">Previous Page</a>
      <input id="pageInput" class="pageInput" 
      type="text" maxlength="3" placeholder="#">
      <a 
      class="pageNext pageSkip" 
      href="#?page=8" 
      title="Next Page (8)">Next Page</a>
      <button class="pageButton" 
      title="Go to chosen page of results">Go</button>
    </form>
  </section>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 按鈕控制 分頁 翻頁 分頁插件
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子