设计规范

开发者文档
- <h2>小型分页器</h2>
- <p class="sui-lead">当只有一页内容,且不超过5条时,可以只显示数字,把“上一页”和“下一页”拿掉。</p>
- <div class="sui-pagination pagination-small">
- <ul>
- <li class="prev disabled"><a href="#">«</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">»</a></li>
- </ul>
- </div>
- <div class="sui-pagination">
- <ul>
- <li class="prev disabled"><a href="#">«</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">»</a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-large">
- <ul>
- <li class="prev disabled"><a href="#">«</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="next"><a href="#">»</a></li>
- </ul>
- </div>
- <h2>常态分页器</h2>
- <div class="sui-pagination pagination-small">
- <ul>
- <li class="prev disabled"><a href="#">«上一页</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="dotted"><span>...</span></li>
- <li class="next"><a href="#">下一页»</a></li>
- </ul>
- <div><span>共10页 </span><span>
- 到
- <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
- 页</span></div>
- </div>
- <div class="sui-pagination">
- <ul>
- <li class="prev disabled"><a href="#">«上一页</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="dotted"><span>...</span></li>
- <li class="next"><a href="#">下一页»</a></li>
- </ul>
- <div><span>共10页 </span><span>
- 到
- <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
- 页</span></div>
- </div>
- <div class="sui-pagination pagination-large">
- <ul>
- <li class="prev disabled"><a href="#">«上一页</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li class="dotted"><span>...</span></li>
- <li class="next"><a href="#">下一页»</a></li>
- </ul>
- <div><span>共10页 </span><span>
- 到
- <input type="text" class="page-num"><button class="page-confirm" onclick="alert(1)">确定</button>
- 页</span></div>
- </div>
- <h2>无页码分页器</h2>
- <div class="sui-pagination pagination-small">
- <ul>
- <li class="prev"><a href="#">«上一页</a></li>
- <li class="next"><a href="#">下一页»</a></li>
- </ul>
- </div>
- <div class="sui-pagination">
- <ul>
- <li class="prev"><a href="#">«上一页</a></li>
- <li class="next"><a href="#">下一页»</a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-large">
- <ul>
- <li class="prev"><a href="#">«上一页</a></li>
- <li class="next"><a href="#">下一页»</a></li>
- </ul>
- </div>
- <h2>非主流分页器集合</h2>
- <div class="sui-pagination pagination-large">
- <ul>
- <li class="prev"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
- <li class="prev"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
- <li><input type="text" class="ex-page-num"></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-large">
- <ul>
- <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
- <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
- <li><input type="text" class="ex-page-num"></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-naked pagination-large">
- <ul>
- <li class="prev"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
- <li class="prev"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
- <li><input type="text" class="ex-page-num"><span>共10页</span></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-naked pagination-large">
- <ul>
- <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-prev"></i></a></li>
- <li class="prev disabled"><a href="#"><i class="sui-icon icon-pc-chevron-left"></i></a></li>
- <li><input type="text" class="ex-page-num"><span>共10页</span></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-chevron-right"></i></a></li>
- <li class="next"><a href="#"><i class="sui-icon icon-pc-next"></i></a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-naked pagination-large">
- <ul>
- <li class="prev"><a href="#">上一页</a></li>
- <li><span class="ex-page-status">1/10</span></li>
- <li class="next"><a href="#">下一页 </a></li>
- </ul>
- </div>
- <div class="sui-pagination pagination-naked pagination-large">
- <ul>
- <li class="prev disabled"><a href="#">上一页</a></li>
- <li><span class="ex-page-status">1/10</span></li>
- <li class="next"><a href="#">下一页 </a></li>
- </ul>
- </div>
所有形式的分页器都提供三种尺寸,除此之外,还有
pagination-centered,,pagination-right
控制分页器的水平位置- 复制代码代码已复制