Mootools框架

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配置参数表格

参数名参数含义参数默认值
eventType支持事件类型点击触发或者鼠标移动 (mouse或click)mouse
autoplay是否自动播放 (true/false)false
interval间隔时间3000(单位:毫秒)
effect动画类型 (fade-渐隐,scrolly-y轴滚动,scrollx-x轴滚动,none-直接切换)none
circular是否开始循环滚动 (true/false)false
duration动画时间,如:从图片1渐变到图片2的时间500(单位:毫秒)
hasTriggers是否有触点 (true/false)true
triggersBox触点元素的父元素 (triggersBox和triggers有一即可).switchable-triggerBox
triggers触点元素的class (triggersBox和triggers有一即可).switchable-trigger
content需要显示元素的父元素 (panels和content有一即可).switchable-content
panels需要显示的元素 (panels和content有一即可).switchable-panel
activeIndex默认显示的元素0
activeClass当前选中触点的classactive
steps每次切换多少个触点的内容1
pauseOnHover鼠标悬停停止播放 (true/false)true
islazyload是否执行延迟加载 (true/false)true
lazyDataType延迟加载内容的标签名称 (textarea/img)textarea
textarea延迟加载textarea的class名称textarea-lazyload
execScript是否执行textarea中脚本 (true/false)true
img延时加载图片地址的属性名 <img src="loading.gif" img-lazyload="01.jpg" />img-lazyload

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>
Tab组件调用方法
<div id="Tabs1" class="Auto_Widget" data-widget-type="Tabs" data-widget-config="{
	autoplay:true,
	effect:'scrolly',
	interval:2000}
">
	<!--  相关Dom结构  -->
</div>
Tab配置参数表格
参数名参数含义参数默认值
eventType支持事件类型点击触发或者鼠标移动 (mouse或click)mouse
autoplay是否自动播放 (true/false)false
interval间隔时间3000(单位:毫秒)
circular是否开始循环滚动 (true/false)false
duration动画时间,如:从图片1渐变到图片2的时间500(单位:毫秒)
hasTriggers是否有触点 (true/false)true
triggersBox触点元素的父元素 (triggersBox和triggers有一即可).switchable-triggerBox
triggers触点元素的class (triggersBox和triggers有一即可).switchable-trigger
content需要显示元素的父元素 (panels和content有一即可).switchable-content
panels需要显示的元素 (panels和content有一即可).switchable-panel
activeIndex默认显示的元素0
activeClass当前选中触点的classactive
steps每次切换多少个触点的内容1
pauseOnHover鼠标悬停停止播放 (true/false)true
islazyload是否执行延迟加载 (true/false)true
lazyDataType延迟加载内容的标签名称 (textarea/img)textarea
textarea延迟加载textarea的class名称textarea-lazyload
execScript是否执行textarea中脚本 (true/false)true
img延时加载图片地址的属性名 <img src="loading.gif" img-lazyload="01.jpg">img-lazyload

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>
Accordion配置参数表格
参数名参数含义参数默认值
eventType支持事件类型点击触发或者鼠标移动 (mouse或click)mouse
multiple是否开启多面板展开 (true/false)false
effect是否开启动画效果false
hasTriggers是否有触点 (true/false)true
triggersBox触点元素的父元素 (triggersBox和triggers有一即可).switchable-triggerBox
triggers触点元素的class (triggersBox和triggers有一即可).switchable-trigger
content需要显示元素的父元素 (panels和content有一即可).switchable-content
panels需要显示的元素 (panels和content有一即可).switchable-panel
activeClass当前选中触点的classactive
onlyTrigger当只有1组展开收起时使用参数true (true/false)false
activeTriggerCls当只有1组展开收起参数时,来回交替的class名称selected
islazyload是否执行延迟加载 (true/false)true
lazyDataType延迟加载内容的标签名称 (textarea/img)textarea
textarea延迟加载textarea的class名称textarea-lazyload
execScript是否执行textarea中脚本 (true/false)true
img延时加载图片地址的属性名 <img src="loading.gif" img-lazyload="01.jpg">img-lazyload

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>
Carousel组件调用方法
<div class="scrollable Auto_Widget"  
	data-widget-type="Switchable"  data-widget-config="{
		effect:'scrollx', 
		viewSize: [130,130],
		steps:1,
		haslrbtn:true
	}">
		<!--  相关Dom结构  -->
</div>
Carousel配置参数表格
参数名参数含义参数默认值
eventType支持事件类型点击触发或者鼠标移动 (mouse或click)mouse
autoplay是否自动播放 (true/false)false
interval间隔时间3000(单位:毫秒)
effect动画类型 (fade-渐隐,scrolly-y轴滚动,scrollx-x轴滚动,none-直接切换)none
circular是否开始循环滚动 (true/false)false
duration动画时间,如:从图片1渐变到图片2的时间500(单位:毫秒)
hasTriggers是否有触点 (true/false)true
triggersBox触点元素的父元素 (triggersBox和triggers有一即可).switchable-triggerBox
triggers触点元素的class (triggersBox和triggers有一即可).switchable-trigger
content需要显示元素的父元素 (panels和content有一即可).switchable-content
panels需要显示的元素 (panels和content有一即可).switchable-panel
activeIndex默认显示的元素0
activeClass当前选中触点的classactive
steps每次切换多少个触点的内容1
pauseOnHover鼠标悬停停止播放 (true/false)true
haslrbtn是否支持前进后退按钮 (true/false)false
prev上一页按钮的class名称.prev
next下一页按钮的class名称.next
disableCls当到最后一页或者第一页时,是否改变前进或后退按钮的class名,禁止点击按钮 (disable/null)null
islazyload是否执行延迟加载 (true/false)true
lazyDataType延迟加载内容的标签名称 (textarea/img)textarea
textarea延迟加载textarea的class名称textarea-lazyload
execScript是否执行textarea中脚本 (true/false)true
img延时加载图片地址的属性名 <img src="loading.gif" img-lazyload="01.jpg" />img-lazyload

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>

配置参数表格

参数名参数含义参数默认值
trigger触点元素trigger(参数id值),也可填class(trigger:".aaa")
triggerType触发方式 (mouse/click)mouse
isShowPopup第一次是否显示弹出层false
align综合参数配置 详见下文-

配置项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>

配置参数表格

参数名参数含义参数默认值
endTime倒计时剩余时间暂时仅支持毫秒(ms)形式
interval倒计时刷新间隔(单位为毫秒/次)即每多少毫秒刷新一次。取值范围(>=100毫秒),默认值为1000毫秒1000
timeRunCls在倒计时运行时显示,结束时隐藏的class名称.count-run
timeEndCls在倒计时运行时隐藏,结束时显示的class名称.count-end
isMsecond是否开启毫秒计量(true/false)false
dataFormat显示时间格式位数 例如4为天-小时-分钟-秒 3为小时-分钟-秒3
minDigit显示时间位数,1位数还是2位数.可选参数1
onEnd结束时可写自定义回调函数,可选参数-
timeUnitCls设定时间单位的class,d-天,h-时,m-分,s-秒,i-毫秒'd': '.count-d','h': '.count-h','m': '.count-m','s': '.count-s','i': '.count-i'

序言·神功入门
产品模板制作区别
模板机制概括
模板开发环境/流程
模板速成篇
上卷·ShopEx48模板开发
Html规范
Css规范
Javascript规范
模板制作
边框制作
简单的smarty语法
下卷·EcStore1.2模板开发
机制更新/申请SDK开发包
模板级挂件
精确选择商品接口
模板级页面拦截
边框机制的开启与隐藏
Mootools框架及效果实例
结尾·模板堂平台
模板堂平台介绍
申请成为模板开发者
开发者服务协议
模板定制服务
模板审核规范
EDM模板制作规范
开发者认证/分成/违规