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.
使用MobilySelect插件选择不同的项目集今天，您要注意一个有趣的新插件MobilySelect。 此插件可让您模拟元素集合中的对象选择。 例如，您的网站上有用户列表-男性和女性，您需要在某个框中显示用户列表。 因此，这个新插件可让您进行切换，以显示男人，女人或两者。 再举一个例子，假设您有一包照片，每张照片都有自己的标签，因此我们可以通过标签选择合适的照片。 但是我认为最好看一个演示。
Here are samples and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the source files and lets start coding !
好的，下载源文件并开始编码！
步骤1. XHTML (Step 1. XHTML)
Here are our main HTML file:
这是我们的主要HTML文件：
index.html (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>
<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.
如您所见–我将开关元件定义为UL-LI(“ selecterBtns”类)。 然后，将所有使用的图像(元素)也放入UL-LI元素中，并指向父类–“ selecterContent”。 通常，您可以在LI子级中使用任何元素(如果需要显示任何自定义信息)。 只需注意，我们的切换器的'rel'属性应具有我们孩子的'class'属性的所有可能值！ (例如：“微笑”，“绘画”)。 另外，您可以使用多个值作为类名(例如：“ smile paints”)。 它将使您在两个选择中都具有此元素。
步骤2. CSS (Step 2. CSS)
Here are used CSS file. Just few styles for our demo:
这是用过CSS文件。 我们的演示仅提供几种样式：
css / styles.css (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}
/* 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.
样式的前半部分-用于演示本身(带有标签的块)，第二部分-插件所需的样式。
步骤3. JS (Step 3. JS)
Here are three JS files:
这是三个JS文件：
js / jquery.min.js，js / mobilyselect.js (js/jquery.min.js, js/mobilyselect.js)
both files – jQuery library and our new plugin, available in package.
这两个文件-jQuery库和我们的新插件，都可在软件包中获得。
js / main.js (js/main.js)
$(function(){
$('.example1').mobilyselect({
collection: 'smile',
animation: 'fade',
duration: 250,
btnsClass: 'selecterBtns',
});
});
$(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 (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
});
$('.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
});
现场演示
结论 (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!
我希望今天的示例非常简单且用户友好。 确保这对您自己的项目有用。 别忘了说谢谢:)祝你好运！
翻译自: https://www.script-tutorials.com/choosing-different-sets-of-items-using-the-mobilyselect-plugin/
扫一扫
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
