Choosing different sets of items using the MobilySelect plugin

Choosing different sets of items using the MobilySelect plugin

2 26820
MobilySelect plugin

Choosing different sets of items using the MobilySelect plugin

Today, to your attention a new interesting plugin MobilySelect. This plugin allows you to simulate select of objects from the collection of elements. For example, your website have list of users – men and women, and you need to display list of users in some box. So, this new plugin allows you to make a switch to display the men, women, or both. Or another example, assume you have a pack of pictures, each picture has its own tags, and so we can make the appropriate select photos by tags. But I think best to see a demo.

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]


Ok, download the source files and lets start coding !


Step 1. XHTML

Here are our main HTML file:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript">></script>
<script src="js/mobilyselect.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div style="width: 1000px; margin: 0 auto 0 auto;" class="example1">
    <h1>Example of using the MobilySelect plugin (jQuery)</h1>
    <ul id="navigation" class="selecterBtns">
        <li><a href="#" rel="all" class="active">All</a></li>
        <li><a href="#" rel="smile">Smiles</a></li>
        <li><a href="#" rel="paints">Paints</a></li>
    </ul>
    <div id="content">
        <div class="selecterContent">
            <ul class="nolist">
                <li class="smile"><a href="#"><img src="data_images/smile1.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints1.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile2.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints2.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile3.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints3.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile4.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints4.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile5.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints5.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile6.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints6.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile7.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints7.png" alt="" /></a></li>
                <li class="smile"><a href="#"><img src="data_images/smile8.png" alt="" /></a></li>
                <li class="paints"><a href="#"><img src="data_images/paints8.png" alt="" /></a></li>
                <li class="smile paints"><a href="#"><img src="data_images/mix1.png" alt="" /></a></li>
                <li class="smile paints"><a href="#"><img src="data_images/mix2.png" alt="" /></a></li>
            </ul>
        </div>
    </div>
</div>

As you see – I defined our switch elements as UL-LI (class ‘selecterBtns’). And after, put all used images (elements) inside UL-LI elements too, and pointed a parent class – ‘selecterContent’. Commonly you can use any elements inside LI childs (if you need to display any custom information). Just note that ‘rel’ attribute of our switcher should have all possible values of ‘class’ attribute of our childs! (example: ‘smile’, ‘paints’). Also, you can use more than single values as class name (example: ‘smile paints’). It will allow you to have this element in both selections.

Step 2. CSS

Here are used CSS file. Just few styles for our demo:

css/styles.css

/* common styles */
ul{list-style:none}
h1{color:#fff;text-align:center;padding:80px 0 30px}
body{background:#131925}
ul#navigation{height:36px;width:730px;position:relative;overflow:hidden;margin:0 auto;padding:20px 20px 0 30px}
ul#navigation li{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;float:right;width:168px;background-color:#2B477D;border:solid 1px #415F9D;position:relative;z-index:1;margin:0 10px 0 0}
ul#navigation li.selected{z-index:3}
ul#navigation li.shadow{width:100%;height:2px;position:absolute;bottom:-3px;left:0;border:none;background:none;z-index:2;-webkit-box-shadow:#111 0 -2px 6px;-moz-box-shadow:#111 0 -2px 6px;box-shadow:#111 0 -2px 6px}
ul#navigation li a:link,ul#navigation li a:visited{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;display:block;text-align:center;width:168px;height:40px;line-height:36px;font-family:Arial, Helvetica, sans-serif;text-transform:uppercase;text-decoration:none;font-size:13px;font-weight:700;color:#fff;letter-spacing:1px;outline:none;float:left;background:#2B477D;-webkit-transition:background-color .3s linear;-moz-transition:background-color .3s linear;-o-transition:background-color .3s linear}
ul#navigation li a:hover{background-color:#5a87dd}
ul#navigation li a.active:link,ul#navigation li a.active:visited{color:#2B477D;border:solid 1px #fff;-webkit-transition:background-color .2s linear;background:0;background-color:#f2f2f2}
#content{width:730px;background:#f2f2f2;overflow:hidden;margin:0 auto;padding:30px;min-height:300px}
/* MobilySelect styles */
.selecterContent a{outline:none}
.selecterContent li{width:125px;height:128px;overflow:hidden}
ul.nolist,ul.nolist li{display:block;list-style:none;margin:0;padding:0}
ul.nolist li{float:left;margin:10px}
a img{border:none;width:128px}

First half of styles – for demo itself (our block with tabs), second – necessary styles for plugin.

Step 3. JS

Here are three JS files:

js/jquery.min.js, js/mobilyselect.js

both files – jQuery library and our new plugin, available in package.

js/main.js

$(function(){
    $('.example1').mobilyselect({
        collection: 'smile',
        animation: 'fade',
        duration: 250,
        btnsClass: 'selecterBtns',
    });
});

Initialization itself pretty easy, commonly – no need even point any settings (all settings have own default values), but we will. Here are full set of possible properties:

js/main.js

$('.main_selector').mobilyselect({
    collection: 'all', // collection, which will display on startup
    animation: 'absolute', // used animation, possible values: plain, fade and absolute
    duration: 500, // duration of animation
    listClass: 'selecterContent', // main container of units
    btnsClass: 'selecterBtns', // class name of buttons parent
    btnActiveClass: 'active', // added class name to active button
    elements: 'li', // units selector (for elements)
    onChange: function(){}, // call the function when collection changes
    onComplete: function(){} // call the function when animation is completed
});

Live Demo

Conclusion

I hope that today’s sample was pretty easy and user friendly. Sure that this will useful for your own projects. Do not forget to say thank you :) Good luck!

SIMILAR ARTICLES


2 COMMENTS

  1. Hi thanks for the post, one question, how can I create a link to only one of the rel=”smile” ? I tried putting the rel=”smile” in the external link but is does not work, any suggestions?

    Thanks in advance!

    • Hello Anna,
      Yes, you can have one custom selection (no need to have 2). You will need just to have some custom units for ‘selecterContent’, and, keep one of two (if you need ‘All’) tabs for ‘selecterBtns’

Leave a Reply to anna Cancel reply