Skip to content

Commit

Permalink
List example added.
Browse files Browse the repository at this point in the history
  • Loading branch information
@anovi
anovi committed Jan 11, 2014
1 parent 9e11008 commit 888cc44
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 0 deletions.
90 changes: 90 additions & 0 deletions examples/list/list.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@

/*.b-select {}*/
.b-select .select-group {
margin: 0;
padding: 5px;
min-width: 100%;
background-color: #FFF;
border-radius: 2px;
border: 1px solid #ddd;
/*box-shadow: 0 5px 10px rgba(0,0,0,0.2);*/
list-style-type: none;
max-height: 19em;
overflow: auto;
}
.b-select .select-option {
list-style: none;
padding: 0 1em 0 1.8em;
margin: 0;
line-height: 1.9;
border-radius: 4px;
}
.b-select .select-option.j-focused {
position: relative;
}
.b-select .select-option.j-focused:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
border: 1px solid #bfdbeb;
border-radius: 4px;
}
.b-select .select-option.j-selected {
background-color: #f3f3f2;
background-color: #E4F6FA;
position: relative;
}
.b-select .select-option.j-selected+.select-option.j-selected:before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
top: -3px;
z-index: 1;
background-color: #E4F6FA;
height: 6px;
}
.b-select .select-option.j-selected.animate,
.b-select .select-option.j-selected.animate+.select-option.j-selected.animate:before {
background-color: #fee20a;
background-color: #C3E8FA;
}

.b-select .actionbar {
background: #f9f9f9;
padding: 0 1em;
}
.b-select .actionbar button {
margin: 0;
padding: 0.5em 1em;
border: none;
background: none;
border-radius: 0;
font-size: 14px;
line-height: 1.9;
cursor: pointer;
}
.b-select .actionbar button:hover {
background: #eee;
}
.b-select .actionbar button:active {
background: #e0e0e0;
}
.b-select .actionbar button:focus {
/*outline: none;*/
}
.b-select .actionbar.disabled button,
.b-select .actionbar.disabled button:hover,
.b-select .actionbar.disabled button:active {
color: #bbb;
background: none;
cursor: default;
}


75 changes: 75 additions & 0 deletions examples/list/list.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectonic — jQuery plugin</title>
<meta name="description" content="Selectonic — jQuery plugin for making selectable lists by mouse and keyboard, configurable with options, methods and callbacks | Author: Alexey Novichkov">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="list.css">
<style>
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.4;
}
* {
box-sizing: border-box;
}
.example p {
margin: 1em;
}
</style>
</head>
<body>

<div class="example">
<p><strong>Items list with actions.</strong><br>
<ul>
<li>Multi-selection list.</li>
<li>Full keyboard support – use <code>up</code>, <code>down</code>, <code>PageUp</code>, <code>PageDown</code> and <code>HOME</code>, <code>END</code>.</li>
<li>Hold <code>ctrl</code> when clicking to add/remove items to selection.</li>
<li>Hold <code>shift</code> when clicking to select a range of items.</li>
</ul>
</p>
<div class="b-select">
<ul class="select-group">
<li class="select-option">Item 1</li>
<li class="select-option">Item 2</li>
<li class="select-option">Item 3</li>
<li class="select-option">Item 4</li>
<li class="select-option">Item 5</li>
<li class="select-option">Item 6</li>
<li class="select-option">Item 7</li>
<li class="select-option">Item 8</li>
<li class="select-option">Item 9</li>
<li class="select-option">Item 10</li>
<li class="select-option">Item 11</li>
<li class="select-option">Item 12</li>
<li class="select-option">Item 13</li>
<li class="select-option">Item 14</li>
<li class="select-option">Item 15</li>
<li class="select-option">Item 16</li>
<li class="select-option">Item 17</li>
<li class="select-option">Item 18</li>
<li class="select-option">Item 19</li>
<li class="select-option">Item 20</li>
</ul>
<div class="actionbar">
<button >Action1</button>
<button >Action2</button>
</div>
</div>
</div>

<script src="../../bower_components/jquery-1.10.2/jquery.js"></script>
<script src="../../src/selectonic.js"></script>
<script src="list.js"></script>
</body>
</html>
59 changes: 59 additions & 0 deletions examples/list/list.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
(function( $, window ) {
'use strict';

var
$el = $('.b-select'),
list = $el.find('.select-group'),
actions = $el.find('.actionbar');

list.selectonic({
multi: true,
keyboard: true,
focusBlur: true,
selectionBlur: true,

before: function(e) {
if (e.target === actions[0] || $(e.target).is('.actionbar button')) {
this.selectonic('cancel');
}
},
select: function() {
toggleActions(false);
},
unselectAll: function() {
toggleActions(true);
}

});

actions.on('click', 'button', function(event) {
event.preventDefault();
doAction( list.selectonic('getSelected') );
this.blur();
});

function toggleActions (state) {
if (state === void 0) {
actions.toggleClass('disabled');
} else {
actions.toggleClass( 'disabled', state );
}
}

function doAction (items) {
items.each(function(index, el) {
var $el = $(el);
$el.addClass('animate');
setTimeout(function() {
$el.removeClass('animate');
}, 300);
});
}

toggleActions(true);

})( jQuery, window );




0 comments on commit 888cc44

Please sign in to comment.