基于jQuery实现可拖动分页插件



37 146 49



特效描述:基于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

加群请备注:从官网了解到