UDN-企业互联网技术人气社区

板块导航

浏览  : 235
回复  : 2

[原生js] 页码编写

[复制链接]
htmlman的头像 楼主
发表于 2016-12-27 15:00:36 | 显示全部楼层 |阅读模式
  一个页面写完了要编写一个美美的页码怎么破呢?
  1. <div class="btn-toolbar page-bar" id="page_bar_datalist1">

  2. <div class="btn-group">

  3. <button disabled="disabled" class="btn btn-sm first" type="button" data-func="first">

  4. <span class="glyphicon glyphicon-step-backward"></span>

  5. </button>

  6. <button disabled="disabled" class="btn btn-sm prev" type="button" data-func="prev">

  7. <span class="glyphicon glyphicon-triangle-left"></span>

  8. </button>

  9. </div>

  10. <span class="form-control-static">1 / 2 页 共 16 条</span>

  11. <div class="btn-group">

  12. <button class="btn btn-sm next" type="button" data-func="next">

  13. <span class="glyphicon glyphicon-triangle-right"></span>

  14. </button>

  15. <button class="btn btn-sm last" type="button" data-func="last">

  16. <span class="glyphicon glyphicon-step-forward"></span></button>

  17. </div>

  18. <div class="btn-group">

  19. <input class="form-control input-sm" type="text" size="3" maxlength="5">

  20. </div>

  21. <div class="btn-group">

  22. <button class="btn btn-sm" type="button" data-func="go">转到</button>

  23. </div>

  24. <div class="btn-group custom"></div>

  25. </div>
复制代码

  以上就是页码编写的全部编码啦
1.png

  还有一个类似的
  1. <nav>
  2.   <ul class="pagination">
  3.     <li><a href="#">«</a></li>
  4.     <li><a href="#">1</a></li>
  5.     <li><a href="#">2</a></li>
  6.     <li><a href="#">3</a></li>
  7.     <li><a href="#">4</a></li>
  8.     <li><a href="#">5</a></li>
  9.     <li><a href="#">»</a></li>
  10.   </ul>
  11. </nav>感觉这个要简单一些
复制代码

1.png

相关帖子

发表于 2016-12-27 15:01:05 | 显示全部楼层
貌似看过类似的文章恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2017-1-3 21:22:40 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部