mootools-DIY系列2:模仿淘宝设计一个商品飞入购物车的特效果的插件

虫曰:

mootools-DIY系列》系列由ChinaBUG企划,根据二次开发过程的需求而编写,其中的案例大多来源于客户需求及常用的需求。

从事网站建设及商城开发这么多年了,没什么长进,每每遇到需要的特效时总是到处寻找,不断测试不断的在不是很适合的脚本特效上做修改,总是觉得浪费很多的精力与时间,早就想要做一个脚本库框架,可以满足全部的需求又能够很容易的做二次开发定制的,但一直难以如愿,暂时先来DIY自己需要的效果吧,等有经验了再来设计吧。

mootools-DIY系列1:模仿淘宝设计一个商品飞入购物车的特效果看完了,是不是觉得比较简单噢,那么本系列2我们继续来个高深的,怎么封装这个代码变成插件,可以让人下载回去直接使用的呢?
怎么来写一个mootools的插件呢?!
推荐阅读老外的专著:How to write a Mootools Class 非常棒的一个教程,从零教你怎么制作一个插件类噢
下面来写一个mootools.fly2cart.js插件吧~~

mootools-DIY系列1:模仿淘宝设计一个商品飞入购物车的特效果

虫曰:

mootools-DIY系列》系列由ChinaBUG企划,根据二次开发过程的需求而编写,其中的案例大多来源于客户需求及常用的需求。

从事网站建设及商城开发这么多年了,没什么长进,每每遇到需要的特效时总是到处寻找,不断测试不断的在不是很适合的脚本特效上做修改,总是觉得浪费很多的精力与时间,早就想要做一个脚本库框架,可以满足全部的需求又能够很容易的做二次开发定制的,但一直难以如愿,暂时先来DIY自己需要的效果吧,等有经验了再来设计吧。

有一个客户需要我协助代写脚本开发mootools版的飞入购物车的特效,报价700结果嫌贵没做跑了~真是好一阵伤心呐~难道这年头做技术的就是这么廉价吗?!
郁闷的话就不说了~这边就公开一下设计思路,给想免费的童靴一个圣诞礼物吧~

ShopEX-Mootools框架之Switchable封装Slide卡盘效果Tab标签页效果Accordion手风琴效果Carousel旋转木马效果Popup弹出层效果DataLazyload延迟加载机制Countdown倒计时效果

虽然,ShopEX东家商派很糟糕,我是这么觉得的,论坛几百年不见得有什么大的声音,不过偶尔看看他们家的ShopEx模板开发手册(模板开发|模板制作|模板教程),每每都有收获~这是一个好事~就是里面的交流mail不知道什么时候能开通,能正常接受反馈呢?!
这不今天来推荐一下他们家的Switchable框架封装吧。
如果有做过淘宝的模板装修的话,应该知道淘宝提供了好多的widget库:Tabs标签页、Slide卡盘效果、Carousel旋转木马、Accordion手风琴、Popup弹出层、Countdown倒计时、Compatibe兼容性组件等效果是不是很方便,很好用呢?!那你想不想在ShopEX之中应用这类效果呢?让我们的插件、模板开发更加简单,方便又时尚呢?
参考网站:淘宝网 店铺开发文档 Widget规范
今天的主角就是ShopEX用来实现这些效果的利器!
参考网站:Mootools框架
需要更多详细的内容请点击上面的参考网站。那么来说说怎么使用吧,毕竟上面的参考网站很多的说明都有,我这边就不重复了。
下载回来的是内核文档跟实例文档,解压之后会发现有如下结构:

Javascript/JQuery/Mootools效果插件收藏

Mootools
1、遮罩层插件:
2、让Element取得索引值的方法,类似jquery的Element.index()
3、如何让div或者其他对象居中显示呢?
~.-.~ ~.-.~ ~.-.~ ~.-.~ ~.-.~ ~.-.~
JQuery
1、遮罩层插件
2、掩码格式化插件(自动格式化输入的电话号码邮政编码电话号码手机号码银行卡信用卡)
3、如何让div或者其他对象居中显示呢?
4、日期时间选择器(为jQuery UI Datepicker日期插件增加Timepicker 时间插件功能)

ShopEX二次开发DIY日记6之可视化模板编辑出错没办法保存简单解决

虫曰:
《二次开发DIY日记》系列由ChinaBUG企划,根据开发过程中客户需求做的修改而延伸出来的开发要点,将有很多的需求点可能在实际应用中并不会需要到,在本系列之中我们将会有所考虑的给予分析解答,主要目的只为了更好的说明如何根据不同的需求点来DIY我们的程序。

今天帮客户处理一个商品详情页的挂件位,需要增加一个图片广告位(ad_pic),方便客户自己添加更换活动图片。结果发现:添加了挂件点击保存,却一点反应也没有,难道是哪里冲突了,试试看编辑,点击一个已经存在的挂件,点击编辑,保存,居然可以保存!
怎么办?
一个小需求而已却遇上这种莫名其妙的问题肯定会疯了,难不成要全面检查是不是哪里冲突啦?
不用!这边提供一个小小的办法,可以临时,快速的帮你解决这个问题,当然,这个办法可能有点稍微高一点难度,有点风险啦。

ShopEX二次开发DIY日记5之前台商品列表页筛选保留选中分类,品牌分类,规格及扩展属性值

虫曰:
《二次开发DIY日记》系列由ChinaBUG企划,根据开发过程中客户需求做的修改而延伸出来的开发要点,将有很多的需求点可能在实际应用中并不会需要到,在本系列之中我们将会有所考虑的给予分析解答,主要目的只为了更好的说明如何根据不同的需求点来DIY我们的程序。

引言
老早在ShopEX官方论坛看到一则广告噢,说的就是商品列表页筛选保留选中分类,品牌,规格及扩展属性值的问题,原帖地址 [485/易开店]【showker出品】shopex列表页筛选可保留选中分类,品牌,规格及扩展属性值 可打叉去掉选中 请各位小伙伴们自己去看说明哈。
我们这次DIY日记的目标就是打造这样的一个功能~当然,简单版的哈。
怎么保留选中的商品分类?商品品牌?商品规格?还有扩展值?
要实现这个功能我们需要了解的是这些数据是怎么来的,通过分析ctl.gallery.php文件我们可以发现这些数据经过一次次的弯子处理之后汇聚成如下变量:$selector、$SpecFlatList、$searchSelect。
我们在文件core\shop\view\gallery\selector\default.html之中就可以很明显的看出这些变量的调用情况。
我们先来查看一下变量$selector的代码噢,你会发现:(下面是原代码,请根据实际代码作分析)

ShopEX二次开发DIY日记4之如何定义我们的前台动态小对话框窗口(MessageBox)?

虫曰:
《二次开发DIY日记》系列由ChinaBUG企划,根据开发过程中客户需求做的修改而延伸出来的开发要点,将有很多的需求点可能在实际应用中并不会需要到,在本系列之中我们将会有所考虑的给予分析解答,主要目的只为了更好的说明如何根据不同的需求点来DIY我们的程序。

在《二次开发DIY日记1之商品添加到收藏夹的提示改为动态提醒》中我们修改了提示收藏夹的提示方式,要求不高的同学可能不会有什么意见,对于部分有追求的小伙伴们来说,那个动态对话框好丑呀,怎么美化一下?
勤劳的小伙伴们可能已经动手做了,将之前的代码修改了一下,具体的代码不懂得可以去看上文噢。
原先的代码为:MessageBox.show(‘已加入收藏’);
修改之后为:MessageBox.show(‘<img src=”http://www.ipodmp.com/sp/1.jpg”/>’);
保存,运行一下,你会发现,原先的文字变了~变成一张图片噢~~当然,可能有的人会发现意外:图很大张的朋友会看到图跳出那个动态框了噢!好难看噢。
怎么办呢?看了一下MessageBox与MessageBox.show的定义你会发现(位于statics\script_src\jstools.js),只有一个样式控制项,就是你做模板时可以指定这个框的大小,样式名为success与error两个,你直接定义之后想要的效果就出现了。
效果还是不错的吧,当然,像我们这么有追求的人,这点小成就是不会满足的,很快,你会发现,整站到处都是一样的大小,图片小的时候没办法自动变小,图片更加大的时候,也不懂得自动放大?!
对吧,这样子设计真是糟糕,为什么就不弄好点呢?

ShopEX二次开发DIY日记3之如何跟踪模板的缓存代码(front_tmpl与admin_tmpl的作用)

虫曰:
《二次开发DIY日记》系列由ChinaBUG企划,根据开发过程中客户需求做的修改而延伸出来的开发要点,将有很多的需求点可能在实际应用中并不会需要到,在本系列之中我们将会有所考虑的给予分析解答,主要目的只为了更好的说明如何根据不同的需求点来DIY我们的程序。

在上一篇ShopEX二次开发DIY日记2之前台模板金额的格式如何格式化金额不显示货币符号?中,我们对ShopEX系统的底层的修饰器做了一个增加,请看最后的修改的代码:
_head_stack[‘function cur2($string){return number_format(trim($string),2, \’.\’, \’\’);}’]=1;
return ‘cur2(‘.$attrs.’)’;
}
?>
在上面代码之后,很多朋友可能会问为什么我知道需要return ‘cur2(‘.$attrs.’)’;这个值,这个返回值需要这样写?
其实我也想知道,我在分析缓存代码之前我对这个也不懂,顶多是根据原有的方法做修改哈,但是,对缓存代码作分析之后我就懂了,今天,你学了你也会了~^_^
现在,请跟我来,先打开ShopEX目录的home\cache目录,你会看到三个文件,两个文件夹,分别是:cachedata.stat.php、cachedata.php、cache.status、front_tmpl、admin_tmpl。

ShopEX二次开发DIY日记2之前台模板金额的格式如何格式化金额不显示货币符号?

虫曰:
《二次开发DIY日记》系列由ChinaBUG企划,根据开发过程中客户需求做的修改而延伸出来的开发要点,将有很多的需求点可能在实际应用中并不会需要到,在本系列之中我们将会有所考虑的给予分析解答,主要目的只为了更好的说明如何根据不同的需求点来DIY我们的程序。

ShopEX在使用的时候,我们在设计模板时可以限定输出的金额格式(变量后面带上“|cur”),主要就是小数点几位啦,顺便带上货币符号哈,那么有时候就会出现只需要格式化金额,但是不带上货币符号这个效果,怎么办?
DIY日记就是要动手做的啦~
我们找到core\include_v5\smartyplugins\compile_modifier.cur.php这个文件,当然如果你的PHP版本低于5.0的话,那么请找到core\include\smartyplugins\compile_modifier.cur.php这个文件。
打开之后你会发现……..这是个乱码,好吧,我忘记你没有破解噢。没事,下面就是破解的代码噢。

ShopEX二次开发DIY日记1之前台商品添加到收藏夹的提示改为动态对话框(MessageBox)提醒

虫曰:
《二次开发DIY日记》系列由ChinaBUG企划,根据开发过程中客户需求做的修改而延伸出来的开发要点,将有很多的需求点可能在实际应用中并不会需要到,在本系列之中我们将会有所考虑的给予分析解答,主要目的只为了更好的说明如何根据不同的需求点来DIY我们的程序。

我们在查看商品详情时,在右边加入购物车边上有一个收藏此商品,点击之后就会告诉你添加收藏成功。那么,如果希望点击收藏此商品之后用对话框提醒会员呢?
DIY一下吧,具体修改步骤如下:
首先,我们需要找到控制这个功能的代码,经过研究位于statics\script\goodscupcake.js文件内,我们打开goodscupcake.js文件会发现这个文件已经加密哈,其实就是简单的去掉行什么的哈,我们可以使用工具解开,我一般使用站长之家的工具JavaScript/HTML格式化来解码,这边需要提醒的是最好使用比较好的解压工具噢,要不解出来的代码会有点问题,在代码简写的情况下会出现错误噢。

Mootools-ShopEX4.8.5内的图片高度宽度自动调整方法及扩展

ShopEX4.8.5本身就有一个方法用于针对图片的高度宽度的自动修正,根据父容器的大小自动调整图片的大小适应父容器。但是,昨天在修改程序的时候才发现,不知道为什么尽然失效,父容器有指定大小但是,执行fixProductImageSize方法之后全部的图片的大小全部变成负数的了,咱是农民,不深入研究为什么,直接修改方法吧,省的这么麻烦。具体代码如下:
方法fixProductImageSize为ShopEX4.8.5的原方法,位于statics\script_src\jstools.js末端,调用的时候随时随地调用,格式为:

ShopEX-mootools图片特效之图像图像幻灯展示(image slider)

最近在设计ShopEX的全屏幻灯展示的时候,之前一直使用一个免费插件,里面只能是顺序一直轮播,到尾就一个个的滚动回第一页,客户觉得这个效果很呆板,没办法,修改吧,就偷了一下s.cn家的幻灯展示的代码了,还不错,挺容易使用的,包装一下做成视图吧。
下面代码是完整的,请保存为视图调用即可,不懂得制作ShopEX的挂件的朋友可以自学或者联系我有偿提供噢。

jquery & mootools – 简单的幻灯展示插件(simple slideshow)

0、html
<div id=”slideshow”>
<img src=”image1.jpg” alt=”Slideshow Image 1″ />
<img src=”image2.jpg” alt=”Slideshow Image 2″ />
<img src=”image3.jpg” alt=”Slideshow Image 3″ />
<img src=”image4.jpg” alt=”Slideshow Image 4″ />
</div>
1、jQuery slideshow
FROM:A Simple jQuery Slideshow
2、Mootools slideshow
FROM:Create a Simple Slideshow Using MooTools
3、SimpleSlider
FROM:http://ruyadorno.github.io/SimpleSlider/

CheatSheet-Javascript/Mootools/JQuery常用代码收藏

1、Javascript:object转string
2、Mootools:indexOf方法
3、Mootools:Element.Delegation – 想要监控新增加之后的元素?请使用relay方法吧
4、Mootools怎么定时执行一个方法函数
5、JS检查浏览器版本
6、怎么判断JS库是否加载完成或者怎么判断是否存在JS库框架
7、获取按下的按键的值
8、Mootools对象聚焦focus操作
9、Mootools自动触发对象事件(像JS的fireEvent方法)
10、JQuery自动触发对象事件(像JS的fireEvent方法)
11、函数的参数序列,不固定的参数数量
12、Mootools 怎么停止事件的触发,或者说怎么停止事件
13、怎么检测一个Javascript的类有没有加载创建
14、表单提交验证
15、如何获取select下拉列表的值的索引与怎么设置下拉列表的值
16、JS中怎么解析JSON字符串呢?
17、Mootools怎么提交表单(form)内的全部表单内容?
18、jQuery如何获取一个URL的完整地址或者获取如何获取一个URL的完整形式
19、如何实现选择排除自身之外的对象?
20、Mootools监视“后面”变动的事件

mootool-检测表单内的单选框、多选框、文本框、文字域是否都填写了

今天在做ShopEX领取卷与调查问卷插件,在调查问卷遇上问题,怎么才能识别会员填写了全部的表单呢?对吧,找了一下没找到,郁闷,只好自己写一个了,也算是原创吧。
在这边与大家分享一下。
//检测表单内的单选框、多选框、文本框、文字域是否都填写了@ChinaBUG 2012.05.16