From 888cc44d19a6fae9cf440c89b36d81ebc9b90998 Mon Sep 17 00:00:00 2001 From: anovi Date: Sun, 12 Jan 2014 01:08:08 +0400 Subject: [PATCH] List example added. --- examples/list/list.css | 90 +++++++++++++++++++++++++++++++++++++++++ examples/list/list.html | 75 ++++++++++++++++++++++++++++++++++ examples/list/list.js | 59 +++++++++++++++++++++++++++ 3 files changed, 224 insertions(+) create mode 100644 examples/list/list.css create mode 100644 examples/list/list.html create mode 100644 examples/list/list.js diff --git a/examples/list/list.css b/examples/list/list.css new file mode 100644 index 0000000..ad74fa6 --- /dev/null +++ b/examples/list/list.css @@ -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; + } + + diff --git a/examples/list/list.html b/examples/list/list.html new file mode 100644 index 0000000..550fd5e --- /dev/null +++ b/examples/list/list.html @@ -0,0 +1,75 @@ + + + + + + + + + + Selectonic — jQuery plugin + + + + + + + + +
+

Items list with actions.
+

+

+
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
  • Item 5
    • +
  • Item 6
    • +
  • Item 7
    • +
  • Item 8
    • +
  • Item 9
    • +
  • Item 10
    • +
  • Item 11
    • +
  • Item 12
    • +
  • Item 13
    • +
  • Item 14
    • +
  • Item 15
    • +
  • Item 16
    • +
  • Item 17
    • +
  • Item 18
    • +
  • Item 19
    • +
  • Item 20
    • +
+
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/examples/list/list.js b/examples/list/list.js new file mode 100644 index 0000000..cde64be --- /dev/null +++ b/examples/list/list.js @@ -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 ); + + + +