Mootools介绍

相比火热的jquery，mootools更有他功能强大之处。

ShopEx基于mootools框架自主封装研发的switchabl效果库更是集众千宠爱于一身，区区几百行代码的switchable，高效的封装了市面上流行的各种效果。

这可是九阳神功心法的精髓！

熬过了这一关，即便你不在ShopEx模板界混饭吃，到任何一处，你都有足够的底气应付任何前端效果。

神马？你还需要mootools制作更牛X的效果？点击这里提出需求，我们会进行评估和制作！让你的神马都成为浮云.....

当然我们的switchable也是开源，欢迎大家共同开发，造福人类。

现在你只需要简单的效果调用和参数配置，即可轻松实现各种炫目的互动效果！我们来快速体验一下吧！

Switchable版本发布、使用方法及实例下载

Switchable 版本介绍 基于Mootools1.3.2版本以上：

• Switchable 1.0版本 - 初步封装Tabs,Accordion,Silde,等效果.
• Switchable 1.1版本 - 在1.0版本的同时加入Lazyload，Popup.
• Switchable 1.2版本 - 加入Cutdown倒计时功能,改进Carousel效果.
• Switchable 1.2.1版本 - 修复多倒计时并行的小Bug.基于Mootools1.4.1版本以上：
• Switchable 1.2.2版本 - 添加accordion滑动动画效果;修复Tab中嵌套Switchable的bug.
• Switchable 1.3.1版本 - 添加倒计时的两种时间格式
• Switchable 1.3.2版本 - 添加popup类一个开关(isShowPopup);修复accordion动画效果;添加Switchable的多触点功能

Switchable效果使用方法

• 1.完成html+css代码的编写，依次加入mootools.js和switchable.js，注意先后顺序
• 2.最外层的父元素必须声明类名class为"Auto_Widget"!!!
• 3.在外层的父元素上写上属性data-widget-type,选择你想要的效果名称,例如Tabs,Switchable,Accordion,Popup
• 4.如有必要,在外层的父元素上写上属性data-widget-config,选择你想要的参数配置实现不同的效果。

实例下载 Mootools实例

Slide卡盘效果

实例展示实例一实例二实例三实例四实例五

Silde需要的DOM结构 - Example

<div class="Auto_Widget">      (注意switchable任何组件调用必须加入class="Auto_Widget")
    <ol class="switchable-content">
	<li class=""><img alt="" src="assets/01.jpg"/></li>
	<li class="hidden "><img alt="" src="assets/02.jpg"/></li>
	<li class="hidden "><img alt="" src="assets/03.jpg"/></li>
	<li class="hidden "><img class="img-lazyload" alt="" src="assets/04.jpg"/></li>
	<li class="hidden "><img alt="" src="assets/05.jpg"/></li>       
    </ol>
    <ul class="switchable-triggerBox">
	<li class="active">1</li>
	<li class="">2</li>
	<li class="">3</li>
	<li class="">4</li>
	<li class="">5</li>
    </ul>
</div>

Silde组件调用方法 - Example

<div id="Slide" class="Auto_Widget" data-widget-type="Switchable" data-widget-config ="{
	autoplay:true,
	effect:'scrollx',
	duration:1000,
	interval:4000,
	activeClass:'active',
	circular:false,
	eventType:'click'
     }">
	<!--  相关Dom结构  -->
</div>

Silde配置参数表格

Tab标签页效果

Tab实例展示实例一实例二

Tab需要的DOM结构

<div class="Auto_Widget">   (注意switchable任何组件调用必须加入class="Auto_Widget")
    <ul class="switchable-triggerBox">
        <li class="active"><span>郎朗春意</span></li>
        <li>夏日炎炎</li>
        <li>秋高气爽</li>
        <li>冬至寒风</li>
    </ul>
    <div class="switchable-content">
	<div class="switchable-panel">
		郎朗春意，焕发着春天的气息
		<p>  - 在当前 trigger 中 mouseover/mouseout, click, focus, 不触发<br />
		     - 鼠标快速滑过非当前 trigger, 不触发<br />
		     - mouseover 到非当前 trigger, 停留时间到达延迟时，触发<br />
		     - click 或 Tab 切换到 trigger, 立即触发<br />
		     - beforeSwitch/onSwitch 事件的触发<br />
		     - 延迟的内容能正确加载
		</P>
	</div>
	<div class="switchable-panel" style="display: none;">这夏天，出门是烤箱，进门是冰箱</div>
	<div class="switchable-panel" style="display: none;">秋天还真的挺凉爽</div>
	<div class="switchable-panel" style="display: none;">冬天来了，雪花飘了</div>
    </div>
</div>

<div id="Tabs1" class="Auto_Widget" data-widget-type="Tabs" data-widget-config="{
	autoplay:true,
	effect:'scrolly',
	interval:2000}
">
	<!--  相关Dom结构  -->
</div>

Accordion手风琴效果

实例展示

实例一实例二实例三

Accordion需要的DOM结构

<div class="Auto_Widget">
    <div class="switchable-trigger active"><i class="moo-icon"></i><h3>标题A</h3></div>
    <div class="switchable-panel">
        1、支持鼠标滑过和点击触点两种方式<br/>
        2、支持同时展开多个面板
    </div>
    <div class="switchable-trigger">  
	<h3>标题B</h3>
    </div>
    <div class="switchable-panel" style="display:none;">
	内容B<br/>内容B<br/>内容B
    </div>
    <div class="switchable-trigger">
	<h3>标题C</h3>
    </div>
    <div class="switchable-panel" style="display:none;">
	内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C
    </div>
    <div class="switchable-trigger last-trigger">
	<h3>标题D</h3>
    </div>
    <div class="switchable-panel last-panel" style="display:none;">
	内容D<br/>内容D<br/>内容D
    </div>
</div>

Accordion组件调用方法

<div class="Auto_Widget" data-widget-type="Accordion" data-widget-config="{
		triggers:'.switchable-trigger',
		panel:'.switchable-panel',
		eventType:'click'
	}">
		<!--  相关Dom结构  -->
</div>

Carousel旋转木马效果

Carousel实例展示

实例一实例二实例三

Carousel需要的DOM结构

<div class="Auto_Widget">
		<span class="prev ">&lsaquo;</span>
		<span class="next">&rsaquo;</span>
		<ul class="switchable-content">
			<li><img src="assets/1.jpg" alt="" /></li>
			<li><img src="assets/2.jpg" alt="" /></li>
			<li><img src="assets/3.jpg" alt="" /></li>
			<li><img src="assets/4.jpg" alt="" /></li>
			<li><img src="assets/5.jpg" alt="" /></li>
			<li><img src="assets/6.jpg" alt="" /></li>
		</ul>
		<ul class="switchable-triggerBox clearfix">
			<li><img src="assets/1.jpg" width="40" height="40" alt="" /></li>
			<li><img src="assets/2.jpg" width="40" height="40" alt="" /></li>
			<li><img src="assets/3.jpg" width="40" height="40" alt="" /></li>
			<li><img src="assets/4.jpg" width="40" height="40" alt="" /></li>
			<li><img src="assets/5.jpg" width="40" height="40" alt="" /></li>
			<li><img src="assets/6.jpg" width="40" height="40" alt="" /></li>
		</ul>	    
</div>

<div class="scrollable Auto_Widget"  
	data-widget-type="Switchable"  data-widget-config="{
		effect:'scrollx', 
		viewSize: [130,130],
		steps:1,
		haslrbtn:true
	}">
		<!--  相关Dom结构  -->
</div>

Popup 弹出层效果

实例展示

实例一实例二实例三

需要的DOM结构

 <div id="trigger" class="aaa">
	<div class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
		trigger:'trigger',
		triggerType:'mouse',
		align:{
			node:'.aaa',
			points:['cr','cc'],
			offset:[0,0]
		}}">
		我要“被”弹出
	</div>
</div>

组件调用方法

<div class="Auto_Widget" data-widget-type="Popup"  data-widget-config="{
		trigger:'trigger',
		triggerType:'mouse',
		align:{
			node:'.aaa',
			points:['cr','cc'],
			offset:[0,0]
		}}">
      <!-- 相关弹出层内容 -->
</div>

配置参数表格

配置项align中的points的说明

触点与弹出层的对齐方式（align中的points配置）：

我们暂且先把每个层都看成一个几何矩形，矩形上有九个非常重要的定位点('tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl', 'bc', 'br') 如下图所示:

• node:'.aaa' 弹出层相对位置的层（注意:class带点，也可以是id，id不带"#"和"."）
• points:['cr','cc'] 九点定位，触点层的cr和弹出层的cc定位
• offset:[0,0] 定位之后点在x轴和Y轴的偏移值（直接填数字，不需要带单位）
• 好吧，练功还是要看悟性的，看自身能悟出什么样的道义来...

Lazyload 延迟加载机制

实例展示

lazyload实例

需要的DOM结构

	<!--   页面首屏内容   -->
<textarea class="textarea-lazyload-block">
	<!--   需要延迟加载的内容   -->
</textarea>
<textarea class="textarea-lazyload-block">
	<!--   需要延迟加载的内容   -->
</textarea>

组件调用方法

这里的组件调用方法很简单了只需要在页面的底部加入如下js代码，即可

<script>
	new DataLazyLoad({textarea:'textarea-lazyload-block'});
</script>

倒计时效果

实例展示实例一实例二实例三

需要的DOM结构

<div class="moo-countdown-run"><!-- 对应内容 --></div>
<div class="moo-countdown-end"><!-- 对应内容 --></div>
<div class="time-count moo-countdown-run">
	<p class="tit">剩余时间: </p>
	<span class="moo-h value"></span><span class="unit">小时</span>
	<span class="moo-m value"></span><span class="unit">分</span>
	<span class="moo-s value"></span><span class="unit">秒</span>
</div>

组件调用方法

<div class="Auto_Widget" data-widget-type="Countdown"  data-widget-config="{
				 'endTime': '10000',
				 'interval': 1000, 
				 'timeRunCls': '.moo-countdown-run', 
				 'timeUnitCls':{     
					'h': '.moo-h',       
					'm': '.moo-m',       
					's': '.moo-s',              
				 },
				 'minDigit': 2,
				 'timeEndCls': '.moo-countdown-end'
			}">
	  <!--  这里可设置倒计时及其他内容  -->
</div>

配置参数表格