Browse files

Dropdown in Pagination

Updated css to allow drop down menus in pagination for quick jump
option.
Updated documentation to include example
  • Loading branch information...
1 parent f3cf4cb commit fcd0faefba588372e3e9095e8bb15c59d4273853 @JoyceBabu committed Apr 19, 2012
Showing with 53 additions and 9 deletions.
  1. +17 −4 docs/assets/css/bootstrap.css
  2. +16 −0 docs/components.html
  3. +6 −2 less/dropdowns.less
  4. +14 −3 less/pagination.less
View
21 docs/assets/css/bootstrap.css
@@ -1942,7 +1942,12 @@ table .span24 {
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
-.dropdown-menu a {
+.dropdown-menu > li {
+ display: block!important;
+}
+.dropdown-menu li > a {
+ float: none;
+ border-style: none;
display: block;
padding: 3px 15px;
clear: both;
@@ -3311,7 +3316,7 @@ input[type="submit"].btn.btn-mini {
height: 36px;
margin: 18px 0;
}
-.pagination ul {
+.pagination > ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
@@ -3338,10 +3343,12 @@ input[type="submit"].btn.btn-mini {
border-left-width: 0;
}
.pagination a:hover,
-.pagination .active a {
+.pagination .open > a,
+.pagination .active > a {
background-color: #f5f5f5;
}
-.pagination .active a {
+.pagination .open > a,
+.pagination .active > a {
color: #999999;
cursor: default;
}
@@ -3369,6 +3376,12 @@ input[type="submit"].btn.btn-mini {
.pagination-right {
text-align: right;
}
+.pagination .dropdown {
+ float: left;
+}
+.pagination .caret {
+ margin-top: 16px;
+}
.pager {
margin-left: 0;
margin-bottom: 18px;
View
16 docs/components.html
@@ -1221,6 +1221,22 @@
<li class="disabled"><a href="#">...</a></li>
<li><a href="#">20</a></li>
<li><a href="#">&raquo;</a></li>
+ <li class="dropdown">
+ <a href="#" data-toggle="dropdown" class="dropdown-toggle">Jump To <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Page 10</a></li>
+ <li><a href="#">Page 25</a></li>
+ <li><a href="#">Page 50</a></li>
+ <li><a href="#">Page 100</a></li>
+ <li class="divider"></li>
+ <li><form class="form-inline pad" action="#" method="get">
+ <fieldset>
+ <label style="padding:0 5px;" class="control-label" for="goto_page">Go To :</label><input id="goto_page" type="text" style="width:50px;" placeholder="Page"> <input type="submit" value="Go" class="btn btn-info">
+ </fieldset>
+ </form>
+ </li>
+ </ul>
+ </li>
</ul>
</div>
<div class="pagination pagination-centered">
View
8 less/dropdowns.less
@@ -73,9 +73,13 @@
.divider {
.nav-divider();
}
-
+ &>li {
+ display:block!important;
+ }
// Links within the dropdown menu
- a {
+ li > a {
+ float: none;
+ border-style:none;
display: block;
padding: 3px 15px;
clear: both;
View
17 less/pagination.less
@@ -5,7 +5,7 @@
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
}
-.pagination ul {
+.pagination > ul {
display: inline-block;
.ie7-inline-block();
margin-left: 0;
@@ -25,10 +25,12 @@
border-left-width: 0;
}
.pagination a:hover,
-.pagination .active a {
+.pagination .open > a,
+.pagination .active > a {
background-color: #f5f5f5;
}
-.pagination .active a {
+.pagination .open > a,
+.pagination .active > a {
color: @grayLight;
cursor: default;
}
@@ -54,3 +56,12 @@
.pagination-right {
text-align: right;
}
+
+.pagination .dropdown {
+ float: left;
+}
+
+.pagination .caret {
+ margin-top:16px;
+}
+

0 comments on commit fcd0fae

Please sign in to comment.