首页 > 网站建设 >

商城网站建设自定义checkBox标签的进化过程小记

发布时间:2017-06-26 作者:博纳网络

 深圳网站制作公司博纳网络编辑整理此文旨在对喜欢建站工作的您有所帮助,jq插件的二种编写方法和区别之后,今天的web前端零基础课中,又回过头来继续把电商网站中的checkBox复选框,进行了进一步的封装与自定义。

////////
电商网站的购物车的商品选项中,一直用的都是html标签中的input中的checkBox复选按钮。它用起来当然没什么问题,但它在页面显示方面有问题,使用css对它进行样式定义的时候,在不同的浏览器中显示是不一样的。

最好的解决办法就是自己使用div、css封装一个checkBox标签。而且这也是前端框架中ui皮肤的大方向之一,全都是自定义的。

凡事都讲究一个从易到难,今天上午的时候,先从实现“是否选中”这个效果开始搞起。

如上图,css就不摆出来了,无非是个背景图而已。先在html页面上先摆上几个div自定义按钮,然后下面的js文件里是控制它们的函数。这个代码本身是没有问题的,都可以运行,有兴趣的同学可以自己执行下。

上图的js没有问题,但运行的效果不能适应购物车多商品单选的业务需求,这些按钮之间会有“干涉”。

////////

干涉的问题该怎么解决呢?有时,一些问题或bug,不必非要去解决,可以回避。那就换一个方向。

电商网站的购物车,是由一个html模板文件,通过循环json数据来生成的。那么直接把这个checkBox自定义标签 写在tpl模板里。

ok,完全能够解决问题。

////////

但是,从开发的角度来讲,它不是一个组件,这只是一个ui效果。因为它是“写死”在页面中的,完全不具有复用性,要想让它成为一个组件,还需要进一步的封装。

那么调整tpl模板,

在模板中添加一个“钩子”容器,用以给外面的方法使用。

如上图所示,在common.js中定义checkboxSkin函数,用以生成新的html标签,在cart.js中,调用checkboxSkin方法并传入想要生成的html标签名和需要的自定义属性,并接收json对象使用for循环来给自定义属性赋值。

这样确实在一定程度上保证了可复用性。但再想一想,这种组件性质的东西,以裸露函数的方式存在着,这样好吗?

////////

当然不好,要把它封装成jQuery插件,就这样,

如上图所示,使用$.fn.extend()的方式来封装一个可以被jq对象调用的插件,这样的好处是“谁调用了jq插件,插件里的this的指向就是谁”。

所以,插件里生成的jq格式的dom节点,可以直接appendTo()到在tpl文件中预埋的“钩子”容器里。

////////

仅就这个电商项目的购物车模块来讲,这个checkBox skin皮肤插件基本就可以了。它的优点:

1,达到起码的复用性;

2,自定义html标签名和class属性值;

3,以对象键值对的形式添加多个自定义属性;

4,可以通过for循环来接收json数据;

通过这个例子,相信同您也看到了,代码这东西一开始都比较烂。想一开始就写出好代码,这基本是不可能的。好代码都是一版一版的不断优化得来的。

////////

他的问题是,“id和class的名称,起的有些过长了”,

格式规整倒是ok了,但这名字也确实有点长了,你觉得呢

文章标题:商城网站建设自定义checkBox标签的进化过程小记
本文地址:https://www.198bona.com/news/566.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯