Merge branch 'develop' of github.com:olton/Metro-UI-CSS into develop

muditmittal · Jun 3, 2013 · fe04691 · fe04691
2 parents f1fddbd + 13c2d17
commit fe04691
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 8 deletions.
diff --git a/css/modern.css b/css/modern.css
diff --git a/javascript/pagelist.js b/javascript/pagelist.js
@@ -1,6 +1,6 @@
 /*  Author: Kation
  *  Description: Function to create page list.
- *  Version: 0.1
+ *  Version: 0.1.1
  *
  *  Tutorial:
  *      var page = $("#page").pagelist();
@@ -45,7 +45,7 @@
             //Each Page Item Template, 1,2,3,4...
             this.pageItemTemplate = '<a class="tool-button">{page}</a>';
             //Current Page Item Template
-            this.pageCurrentTemplate = '<a class="pagecurrent tool-button">{page}</a>';
+            this.pageCurrentTemplate = '<a class="pageCurrent tool-button">{page}</a>';
             //'...' Template
             this.pageMoreTemplate = '<span>...</span>';
             //Jump Template

diff --git a/less/modern.less b/less/modern.less
@@ -36,4 +36,5 @@
     @import "dialog.less";
     @import "calendar.less";
     @import "contextmenu.less";
+    @import "pagelist.less";
 }
diff --git a/less/pagelist.less b/less/pagelist.less
@@ -0,0 +1,53 @@
+/*
+ * Metro UI CSS
+ * (c) 2012-2013 by Sergey Pimenov
+ * Licensed under the MIT License and Commercial
+ *
+ * Pagelist.less
+ *
+ */
+
+.pagelist {
+    padding-bottom: 10px;
+    text-align: center;
+
+    .pagePrevious,
+    .pageNext,
+    .pageContent,
+    .pageJump {
+        display: inline-block;
+
+        input {
+            width: 32px;
+            height: 32px;
+            top: 1px;
+            position: relative;
+            border: 1px #bababa solid;
+        }
+
+        #pageGo {
+            margin: 0px;
+        }
+    }
+
+    .pageContent a {
+        padding-top: 4px;
+    }
+
+    .pagePrevious {
+        text-align: right;
+    }
+
+    .pageNext {
+        text-align: left;
+    }
+
+    a {
+        margin: 4px;
+        cursor: pointer;
+    }
+
+    .pageCurrent {
+        font-weight: bold;
+    }
+}
diff --git a/public/css/modern.css b/public/css/modern.css
@@ -7310,4 +7310,39 @@ License:	CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/
 .metrouicss .datepicker {
   position: relative;
 }
->>>>>>> d5a744fed11827773116666532f38bab2d7a7a81
+.metrouicss .pagelist {
+  padding-bottom: 10px;
+  text-align: center;
+}
+.metrouicss .pagelist .pagePrevious,
+.metrouicss .pagelist .pageNext,
+.metrouicss .pagelist .pageContent,
+.metrouicss .pagelist .pageJump {
+  display: inline-block;
+}
+.metrouicss .pagelist .pageJump input {
+  width: 32px;
+  height: 32px;
+  top: 1px;
+  position: relative;
+  border: 1px #bababa solid;
+}
+.metrouicss .pagelist .pageJump #pageGo {
+  margin: 0px;
+}
+.metrouicss .pagelist .pageContent a {
+  padding-top: 4px;
+}
+.metrouicss .pagelist .pagePrevious {
+  text-align: right;
+}
+.metrouicss .pagelist .pageNext {
+  text-align: left;
+}
+.metrouicss .pagelist a {
+  margin: 4px;
+  cursor: pointer;
+}
+.metrouicss .pagelist .pageCurrent {
+  font-weight: bold;
+}
diff --git a/public/js/modern/pagelist.js b/public/js/modern/pagelist.js
@@ -1,6 +1,6 @@
 /*  Author: Kation
  *  Description: Function to create page list.
- *  Version: 0.1
+ *  Version: 0.1.1
  *
  *  Tutorial:
  *      var page = $("#page").pagelist();
@@ -45,7 +45,7 @@
             //Each Page Item Template, 1,2,3,4...
             this.pageItemTemplate = '<a class="tool-button">{page}</a>';
             //Current Page Item Template
-            this.pageCurrentTemplate = '<a class="pagecurrent tool-button">{page}</a>';
+            this.pageCurrentTemplate = '<a class="pageCurrent tool-button">{page}</a>';
             //'...' Template
             this.pageMoreTemplate = '<span>...</span>';
             //Jump Template

diff --git a/public/navigation.php b/public/navigation.php
@@ -50,6 +50,7 @@
                     <li><a href="dialog.php">Dialog box</a></li>
                     <li><a href="ajax.php">Ajax reinit</a></li>
                     <li><a href="calendar.php">Calendar</a></li>
+                    <li><a href="pagelist.php">Calendar</a></li>
                     <li class="divider"></li>
                     <li><a href="notices.php">Notices and Replies</a></li>
                     <li class="divider"></li>

diff --git a/public/pagelist.php b/public/pagelist.php
@@ -0,0 +1,44 @@
+<?php include("header.php")?>
+    <div class="page secondary">
+        <div class="page-header">
+            <div class="page-header-content">
+                <h1>Pagelist<small>demo</small></h1>
+                <a href="/" class="back-button big page-back"></a>
+            </div>
+        </div>
+        <div class="page-region">
+            <div class="page-region-content">
+                <div id="pageContent">This is the page of 1</div>
+                <div id="pageDiv"></div>
+                <script type="text/javascript" src="js/modern/pagelist.js"></script>
+                <script type="text/javascript">
+                    $(document).ready(function(){
+                        var page = $("#pageDiv").pagelist();
+                        page.total = 10;
+                        page.current = 1;
+                        page.url = "pagelistresult.php?page={page}";
+                        page.ajax = "#pageContent";
+                        page.create();
+                    });
+                </script>
+                <h2>Component usage</h2>
+                <pre class="prettyprint linenums span10">
+                    var page = $("#page").pagelist();
+                    page.total = 10;  //Total pages
+                    page.current = 1;  //Current page
+                    page.showcount = 2;  //Default is 2
+                    page.url = "pagelistresult.php?page={page}";  //Jump url
+                    page.ajax = "#contnet";  //if you want to use ajax, set value to target element, defaul is null
+                    //If you want to use your own template
+                    //page.pageTemplate = '...';
+                    //page.pageSideTemplate = '...';
+                    //page.pageItemTemplate = '...';
+                    //page.pageCurrentTemplate = '...';
+                    //page.pageMoreTemplate = '...';
+                    //page.pageJumpTemplate = '...';
+                    page.create(); //Create page list
+                </pre>
+            </div>
+        </div>
+    </div>
+<?php include("footer.php")?>
diff --git a/public/pagelistresult.php b/public/pagelistresult.php
@@ -0,0 +1 @@
+This is the page of <?php echo $_GET["page"] ?>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is the page of <?php echo $_GET["page"] ?>