Permalink
Browse files

First version of code and simple demo

  • Loading branch information...
1 parent 4507033 commit 6300e673df2f19480ffef84cf960bf984070b50d @omgovich committed Mar 29, 2012
Showing with 114 additions and 50 deletions.
  1. +41 −32 demo/css/template.css
  2. +40 −16 index.html
  3. +33 −2 sources/jquery.splitter.js
View
@@ -1,32 +1,41 @@
-/*** --- Document params --- ***/
-body, html {
- height:100%;
- background:#FFF;
- color:#000;
- font:normal 12px/1.5 Tahoma, Arial, Verdana, sans-serif;
-}
-
-/*** --- Default objects --- ***/
-p {
- padding:0.5em 0;
-}
-.clear {
- clear:both;
-}
-
-
-/*** --- Links --- ***/
-a {
- color:#00347b;
- text-decoration:underline;
-}
-a:hover {
- color:#375dbe;
-}
-
-
-/*** --- Page --- ***/
-.b-page {
- width:1000px;
- margin:0 auto;
-}
+/*** --- Document params --- ***/
+body, html {
+ height:100%;
+ background:#FFF;
+ color:#000;
+ font:normal 12px/1.5 Tahoma, Arial, Verdana, sans-serif;
+}
+
+/*** --- Default objects --- ***/
+p {
+ padding:0.5em 0;
+}
+.clear {
+ clear:both;
+}
+
+
+/*** --- Links --- ***/
+a {
+ color:#00347b;
+ text-decoration:underline;
+}
+a:hover {
+ color:#375dbe;
+}
+
+
+/*** --- Page --- ***/
+.b-page {
+ width:1000px;
+ margin:0 auto;
+}
+
+.list-container {
+ padding:20px;
+ overflow:hidden;
+}
+.list-column {
+ float:left;
+ padding:10px;
+}
View
@@ -1,17 +1,41 @@
-<!DOCTYPE html>
-<html lang="ru-RU">
-<head>
- <meta charset="utf-8" />
- <title>jQuery Splitter</title>
- <!-- Stylesheet -->
- <link href="demo/css/reset.css" rel="stylesheet" />
- <link href="demo/css/template.css" rel="stylesheet" />
- <link href="sources/jquery.scroller.css" rel="stylesheet" />
- <!-- JavaScript -->
- <script src="demo/js/jquery.js"></script>
- <script src="sources/jquery.splitter.js"></script>
-</head>
-<body>
-
-</body>
+<!DOCTYPE html>
+<html lang="ru-RU">
+<head>
+ <meta charset="utf-8" />
+ <title>jQuery Splitter</title>
+ <!-- Stylesheet -->
+ <link href="demo/css/reset.css" rel="stylesheet" />
+ <link href="demo/css/template.css" rel="stylesheet" />
+ <link href="sources/jquery.scroller.css" rel="stylesheet" />
+ <!-- JavaScript -->
+ <script src="demo/js/jquery.js"></script>
+ <script src="sources/jquery.splitter.js"></script>
+ <script>
+ $(function(){
+ $('ul').splitter({
+ columns: 4
+ });
+ });
+ </script>
+</head>
+<body>
+
+ <ul>
+ <li>Element 1</li>
+ <li>Element 2</li>
+ <li>Element 3</li>
+ <li>Element 4</li>
+ <li>Element 5</li>
+ <li>Element 6</li>
+ <li>Element 7</li>
+ <li>Element 8</li>
+ <li>Element 9</li>
+ <li>Element 10</li>
+ <li>Element 11</li>
+ <li>Element 12</li>
+ <li>Element 13</li>
+ <li>Element 14</li>
+ </ul>
+
+</body>
</html>
@@ -11,12 +11,43 @@
// Settings
var settings = $.extend({
- //
+ columns: 2,
+ itemsSelector: 'li',
+ // container
+ containerTag: 'div',
+ containerClass: 'list-container',
+ // column
+ columnTag: 'ul',
+ columnClass: 'list-column',
+ columnFirstClass: 'list-column_first',
+ columnLastClass: 'list-column_last'
}, options);
// Install splitter for each items
this.each(function(){
- //
+
+ var $list = $(this),
+ $items = $list.find(settings.itemsSelector),
+ itemsInColumn = Math.ceil($items.length/settings.columns),
+ $container = $('<'+settings.containerTag+'/>', {
+ class: settings.containerClass
+ });
+
+ for(var i=0; i<$items.length; i+=itemsInColumn) {
+ var $columnItems = $items.slice(i, i+itemsInColumn).clone(),
+ $column = $('<'+settings.columnTag+'/>', {
+ class: settings.columnClass
+ });
+ $column.append($columnItems);
+ $container.append($column);
+ };
+
+ $container.find('> :first').addClass(settings.columnFirstClass);
+ $container.find('> :last').addClass(settings.columnLastClass);
+
+ $list.after($container);
+
+
});
return this;

0 comments on commit 6300e67

Please sign in to comment.