shopex widgets制作教程二

作者: outwindow 2009-06-02

原文地址：http://www.shopex.cn/bbs/read.php?tid-77421-toread-1.html

很多人做widgets挂件的动机一般都是看到一个比较好效果或者是对官方提供的功能进行更深入的修改。
比如看到了一个很好的效果，想把他用到自己的网店上，同时也可以在后台维护，下面的一个效果挂件，就是出于这样的一个动机来制作的。

原始的效果：http://www.stoutlabs.com/demos/slider_class/
感觉这个带有数字控制的滑动的效果还是不错，想把它改成的ShopEx的挂件，只要店主在后台设置了图片的路径和这个图片上的链接就可以实现这个广告效果。

那就动手来做！动手之前，先看看关于挂件制作的基础的东西：http://www.shopex.cn/bbs/read.php?tid-75813.html
下面的图帮你来温习一下挂件的制作基础。

首先要想清楚，挂件里面有些什么东西是需要店主设置的：
1、图片的路径，这个当然需要店主自己改了，否则就不能自己添加广告了。
2、点击图片所链接的地址，这个也是必须的。
3、每一个图片停留的时间，是让浏览者看3秒还是看5秒，这个也是需要店主自定义的
4、图片滑动的时间，就是从一张图片向另外一张图片切换的时候所需要的时间。
5、数字的颜色和背景，因为是带有数字的，所以就有当前的图片的数字和非当前的图片数字，这两个地方的颜色都需要用户可以设定的。

然后看看，上面看到的那个效果的HTML和js是不是支持上面所理想中设定，当然，这个地方需要你了解一些js了。
看了一下这个效果整个的js和HTML结构，ok，没有问题，都是可以支持的。
把这些定下来以后，就可以去制作_config.html了。

制作_config.htm文件的时候，可以直接从一个类似的官方挂件中复制一个过来，这样有些现在的html和js都是可以使用。比如从exchangeeffect这个挂件中把_config文件复制过来。现在还是对这个文件动手了。
在制作_config.htm的时候，也不需要考虑太多，凡是需要店主定义的地方，统统写成 <{$setting.XXXXX}>的格式。