repeater.html 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <div class="repeater" id="myRepeater">
  2. <div class="repeater-header">
  3. <div class="repeater-header-left">
  4. <span class="repeater-title">Awesome Repeater</span>
  5. <div class="repeater-search">
  6. <div class="search input-group">
  7. <input type="search" class="form-control" placeholder="Search"/>
  8. <span class="input-group-btn">
  9. <button class="btn btn-default" type="button">
  10. <span class="glyphicon glyphicon-search"></span>
  11. <span class="sr-only">Search</span>
  12. </button>
  13. </span>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="repeater-header-right">
  18. <div class="btn-group selectlist repeater-filters" data-resize="auto">
  19. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  20. <span class="selected-label">&nbsp;</span>
  21. <span class="caret"></span>
  22. <span class="sr-only">Toggle Filters</span>
  23. </button>
  24. <ul class="dropdown-menu" role="menu">
  25. <li data-value="all" data-selected="true"><a href="#">All</a></li>
  26. <li data-value="some"><a href="#">Some</a></li>
  27. <li data-value="others"><a href="#">Others</a></li>
  28. </ul>
  29. <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
  30. </div>
  31. <div class="btn-group repeater-views" data-toggle="buttons">
  32. <label class="btn btn-default active">
  33. <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
  34. </label>
  35. <label class="btn btn-default">
  36. <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
  37. </label>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="repeater-viewport">
  42. <div class="repeater-canvas"></div>
  43. <div class="loader repeater-loader"></div>
  44. </div>
  45. <div class="repeater-footer">
  46. <div class="repeater-footer-left">
  47. <div class="repeater-itemization">
  48. <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
  49. <div class="btn-group selectlist" data-resize="auto">
  50. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  51. <span class="selected-label">&nbsp;</span>
  52. <span class="caret"></span>
  53. <span class="sr-only">Toggle Dropdown</span>
  54. </button>
  55. <ul class="dropdown-menu" role="menu">
  56. <li data-value="5"><a href="#">5</a></li>
  57. <li data-value="10" data-selected="true"><a href="#">10</a></li>
  58. <li data-value="20"><a href="#">20</a></li>
  59. <li data-value="50"><a href="#">50</a></li>
  60. </ul>
  61. <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
  62. </div>
  63. <span>Per Page</span>
  64. </div>
  65. </div>
  66. <div class="repeater-footer-right">
  67. <div class="repeater-pagination">
  68. <button type="button" class="btn btn-default btn-sm repeater-prev">
  69. <span class="glyphicon glyphicon-chevron-left"></span>
  70. <span class="sr-only">Previous Page</span>
  71. </button>
  72. <label id="myPageLabel" class="page-label">Page</label>
  73. <div class="repeater-primaryPaging active">
  74. <div class="input-group input-append dropdown combobox">
  75. <input type="text" class="form-control" aria-labelledby="MyPageLabel">
  76. <div class="input-group-btn">
  77. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  78. <span class="caret"></span>
  79. <span class="sr-only">Toggle Dropdown</span>
  80. </button>
  81. <ul class="dropdown-menu dropdown-menu-right"></ul>
  82. </div>
  83. </div>
  84. </div>
  85. <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="MyPageLabel">
  86. <span>of <span class="repeater-pages"></span></span>
  87. <button type="button" class="btn btn-default btn-sm repeater-next">
  88. <span class="glyphicon glyphicon-chevron-right"></span>
  89. <span class="sr-only">Next Page</span>
  90. </button>
  91. </div>
  92. </div>
  93. </div>
  94. </div>