Pickli

What can I do with Pickli

Here a list of concret examles of the plug-in

A simple menu

By default, Pickli is displayed horizontaly, with a size of 100%, aligned on center and with an active class for the selected item.

HTML

<ul id="default">
  <li value="1">Item 1</li>
  <li value="2">Item 2</li>
  <li value="3">...</li>
</ul>

CSS

li.active {
  font-weight:700;
}

JS

$('#default').pickli();

A clock on 2 tics

You can easy use Pickli as an realtime clock

HTML

<ul id="hour"></ul>
<ul id="min"></ul>
<ul id="sec"></ul>

CSS

.clock {
  width:50px;
  overflow:'hidden';
  display: inline-block;
}

JS

var hours = [];
for (var i = 0 ; i < 24 ; i++) {
  hours.push({value:i});
}
var mins = [];
for (var i = 0 ; i < 60 ; i++) {
  mins.push({value:i});
}
var d = new Date();
var hour = $('#hour').pickli({
  orientation:'vertical',
  labelKey: 'value',
  data: hours,
  size: "30px",
  index: d.getHours(),
  interaction: false,
  cursor: 'default',
  wrapperClass: 'clock'
});
var min = $('#min').pickli({
  orientation:'vertical',
  labelKey: 'value',
  data: mins,
  size: "30px",
  index: d.getMinutes(),
  interaction: false,
  cursor: 'default',
  wrapperClass: 'clock'
});
var sec = $('#sec').pickli({
  orientation:'vertical',
  labelKey: 'value',
  data: mins,
  size: "30px",
  index: d.getSeconds(),
  interaction: false,
  cursor: 'default',
  wrapperClass: 'clock'
});
var clock = setInterval(function() {
  d = new Date();
  hour.value(d.getHours());
  min.value(d.getMinutes());
  sec.value(d.getSeconds());
}, 1000);

A Tabulation Slider

You can used Pickli as a tab! It's very simple.

• HOME
• ABOUT
• WORK
• CONTACT

• HOME

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at euismod neque. Nulla et ultrices dolor. Duis elementum eu quam tincidunt molestie. Maecenas ut nisl lectus. Nullam posuere auctor quam eget egestas.

• ABOUT

  Nullam posuere auctor quam eget egestas. Vestibulum nulla lectus, aliquam ac tincidunt sit amet, auctor id ipsum. Etiam at mattis arcu, eget pellentesque lectus. Aenean velit eros.

• WORK

  Duis elementum eu quam tincidunt molestie. Maecenas ut nisl lectus. Nullam posuere auctor quam eget egestas. Nullam posuere auctor quam eget egestas. Vestibulum nulla lectus, aliquam ac tincidunt sit amet, auctor id ipsum. Etiam at mattis arcu, eget pellentesque lectus. Aenean velit eros.

• CONTACT

  Nullam posuere auctor quam eget egestas. Vestibulum nulla lectus, aliquam ac tincidunt sit amet, auctor id ipsum. Etiam at mattis arcu, eget pellentesque lectus. Aenean velit eros.

HTML

<ul id="tab">
    <li value="home">HOME</li>
    <li value="about">ABOUT</li>
    <li value="contact">CONTACT</li>
</ul>
<ul id="tab_cont">
    <li value="home">
        <div class='cont'>
            <h2>HOME</h2>
            <p>Lorem ipsum dolor...</p>
        </div>
    </li>
    <li value="about">
        <div class='cont'>
            <h2>ABOUT</h2>
            <p>Nullam posuere auctor...</p>
        </div>
    </li>
    <li value="contact">
        <div class='cont'>
            <h2>CONTACT</h2>
            <p>Nullam posuere...</p>
        </div>
    </li>
</ul>

CSS

li.tab_menu {
  background-color: none;
  color: grey;

  -webkit-transition: color 0.5s ease-in-out;/* transition pour Chrome et Safari */
    -moz-transition: color 0.5s ease-in-out;/* transition pour Firefox */
    -o-transition: color 0.5s ease-in-out;/* transition pour Opéra */
    transition: color 0.5s ease-in-out; /* all */

  -webkit-transition: background-color 0.5s ease-in-out;/* transition pour Chrome et Safari */
    -moz-transition: background-color 0.5s ease-in-out;/* transition pour Firefox */
    -o-transition: background-color 0.5s ease-in-out;/* transition pour Opéra */
    transition: background-color 0.5s ease-in-out; /* all */
}
li.tab_menu_cur {
  background-color: black;
  color: white;
}
li.tab_page {
  opacity: 0.2;
  -webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
    -moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
    -o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
    transition: opacity 0.5s ease-in-out; /* all */
}
li.tab_page_cur {
  opacity: 1;
}
.cont {
  white-space: normal;
  width: 350px;
  text-align: center;
}

We need use 2 Pickli and join them with onChange event.

JS

var tab_cont = $('#tab_cont').pickli({
  default:'home',
  resize: true,
  selectClass: 'tab_page tab_page_cur',
  unselectClass: 'tab_page',
  interaction: false,
  cursor:false
});

var tab = $('#tab').pickli({
  default:'home',
  resize: true,
  selectClass: 'tab_menu tab_menu_cur',
  unselectClass: 'tab_menu',
  onChange: function(e) {
      tab_cont.value(e);
  },
  loop:true
});

Navigation control could be configured like this:

HTML

<a href="#" id="firsttab">«</a> 
<a href="#" id="prevtab">{</a> 
<a href="#" id="nexttab">}</a> 
<a href="#" id="lasttab">»</a>

JS

$('#firsttab').on('click', function() {
    tab.first();
    return false;
});
$('#lasttab').on('click', function() {
    tab.last();
    return false;
});

$('#nexttab').on('click', function() {
    tab.next();
    return false;
});
$('#prevtab').on('click', function() {
    tab.prev();
    return false;
});

Contact

Bugs, suggests and comments on GitHub Pickli Project.

Licence

Released under the MIT license - http://opensource.org/licenses/MIT