Update docs

Arifshariar7 · Oct 6, 2016 · 261ff40 · 261ff40
1 parent a326c6f
commit 261ff40
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/bootstrap-v4.html b/bootstrap-v4.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>4.0.0-alpha.4</title>
+    <script src="//code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
+    <script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
+    <style type="text/css">
+        html {
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+<div style="text-align: center">
+    <ul class="pagination-sm"></ul>
+</div>
+</body>
+<script type="text/javascript">
+    $(function () {
+        $('.pagination-sm').twbsPagination({
+            totalPages: 20
+        })
+    });
+</script>
+</html>
diff --git a/index.html b/index.html
@@ -64,7 +64,8 @@
         }
 
         .input-with-button {
-            padding: 10px;
+            padding: 0;
+            background: none;
         }
 
         .input-with-button .btn {
@@ -79,6 +80,12 @@
             display: inline-block;
             vertical-align: middle;
         }
+
+        .b4-iframe {
+            width: 100%;
+            height: 68px;
+            border: 1px solid #ccc;
+        }
     </style>
 
     <title>jQuery Pagination plugin</title>
@@ -337,8 +344,10 @@ <h4>Dynamic total pages number</h4>
     });
             </code></pre>
 
+            <p></p>
+
             <div class="text-center">
-                <div id="dynamic-total-pages-content"></div>
+                <div id="dynamic-total-pages-content" class="well"></div>
                 <ul id="dynamic-total-pages-pagination" class="pagination-sm"></ul>
             </div>
 
@@ -362,6 +371,12 @@ <h4>Synchronized pagination elements</h4>
                 <ul class="sync-pagination pagination-sm"></ul>
             </div>
 
+            <h4>Bootstrap 4 example (in iframe)</h4>
+
+            <p>It shows how it look like with bootstrap 4 (version 4.0.0-alpha.4).</p>
+
+            <iframe src="bootstrap-v4.html" class="b4-iframe"></iframe>
+
             <h3>
                 <a id="license" class="anchor" href="#license"><span
                         class="octicon octicon-link"></span></a>License</h3>

diff --git a/js/main.js b/js/main.js
@@ -9,7 +9,10 @@ $(document).ready(function () {
 
     var $pagination = $('#dynamic-total-pages-pagination');
     var defaultOpts = {
-        totalPages: 20
+        totalPages: 20,
+        onPageClick: function (evt, page) {
+            $('#dynamic-total-pages-content').text('Page ' + page);
+        }
     };
     $pagination.twbsPagination(defaultOpts);