五月天丁香久久一区二区,精品视频中文字幕在线播放,天天日天天干天天日天天日

當(dāng)前位置：

商城網(wǎng)站建設(shè)自定義checkBox標(biāo)簽的進(jìn)化過程小記

發(fā)布時(shí)間：2017-06-26

文章編輯：網(wǎng)站建設(shè) 文章來源：建站行業(yè)資訊瀏覽量：次

深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理此文旨在對喜歡建站工作的您有所幫助，jq插件的二種編寫方法和區(qū)別之后，今天的web前端零基礎(chǔ)課中，又回過頭來繼續(xù)把電商網(wǎng)站中的checkBox復(fù)選框，進(jìn)行了進(jìn)一步的封裝與自定義。

////////
電商網(wǎng)站的購物車的商品選項(xiàng)中，一直用的都是html標(biāo)簽中的input中的checkBox復(fù)選按鈕。它用起來當(dāng)然沒什么問題，但它在頁面顯示方面有問題，使用css對它進(jìn)行樣式定義的時(shí)候，在不同的瀏覽器中顯示是不一樣的。

最好的解決辦法就是自己使用div、css封裝一個(gè)checkBox標(biāo)簽。而且這也是前端框架中ui皮膚的大方向之一，全都是自定義的。

凡事都講究一個(gè)從易到難，今天上午的時(shí)候，先從實(shí)現(xiàn)“是否選中”這個(gè)效果開始搞起。

如上圖，css就不擺出來了，無非是個(gè)背景圖而已。先在html頁面上先擺上幾個(gè)div自定義按鈕，然后下面的js文件里是控制它們的函數(shù)。這個(gè)代碼本身是沒有問題的，都可以運(yùn)行，有興趣的同學(xué)可以自己執(zhí)行下。

上圖的js沒有問題，但運(yùn)行的效果不能適應(yīng)購物車多商品單選的業(yè)務(wù)需求，這些按鈕之間會有“干涉”。

////////

干涉的問題該怎么解決呢？有時(shí)，一些問題或bug，不必非要去解決，可以回避。那就換一個(gè)方向。

電商網(wǎng)站的購物車，是由一個(gè)html模板文件，通過循環(huán)json數(shù)據(jù)來生成的。那么直接把這個(gè)checkBox自定義標(biāo)簽寫在tpl模板里。

ok，完全能夠解決問題。

////////

但是，從開發(fā)的角度來講，它不是一個(gè)組件，這只是一個(gè)ui效果。因?yàn)樗恰皩懰馈痹陧撁嬷械模耆痪哂袕?fù)用性，要想讓它成為一個(gè)組件，還需要進(jìn)一步的封裝。

那么調(diào)整tpl模板，

在模板中添加一個(gè)“鉤子”容器，用以給外面的方法使用。

如上圖所示，在common.js中定義checkboxSkin函數(shù)，用以生成新的html標(biāo)簽，在cart.js中，調(diào)用checkboxSkin方法并傳入想要生成的html標(biāo)簽名和需要的自定義屬性，并接收json對象使用for循環(huán)來給自定義屬性賦值。

這樣確實(shí)在一定程度上保證了可復(fù)用性。但再想一想，這種組件性質(zhì)的東西，以裸露函數(shù)的方式存在著，這樣好嗎？

////////

當(dāng)然不好，要把它封裝成jQuery插件，就這樣，

如上圖所示，使用$.fn.extend()的方式來封裝一個(gè)可以被jq對象調(diào)用的插件，這樣的好處是“誰調(diào)用了jq插件，插件里的this的指向就是誰”。

所以，插件里生成的jq格式的dom節(jié)點(diǎn)，可以直接appendTo()到在tpl文件中預(yù)埋的“鉤子”容器里。

////////

僅就這個(gè)電商項(xiàng)目的購物車模塊來講，這個(gè)checkBox skin皮膚插件基本就可以了。它的優(yōu)點(diǎn)：

1，達(dá)到起碼的復(fù)用性；

2，自定義html標(biāo)簽名和class屬性值；

3，以對象鍵值對的形式添加多個(gè)自定義屬性；

4，可以通過for循環(huán)來接收json數(shù)據(jù)；

通過這個(gè)例子，相信同您也看到了，代碼這東西一開始都比較爛。想一開始就寫出好代碼，這基本是不可能的。好代碼都是一版一版的不斷優(yōu)化得來的。

////////

他的問題是，“id和class的名稱，起的有些過長了”，

格式規(guī)整倒是ok了，但這名字也確實(shí)有點(diǎn)長了，你覺得呢

當(dāng)前文章鏈接：/construction/jzhyzx/566.html

上一篇：APP網(wǎng)站建設(shè)以及應(yīng)用開發(fā)離不開Java，兩者之間的必然關(guān)系能否延續(xù)？下一篇：手機(jī)網(wǎng)站建設(shè)以及程序開發(fā)的代碼審查五個(gè)層別之分

返回列表

如果您覺得案例還不錯(cuò)請幫忙分享：

[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點(diǎn)，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認(rèn)后，會立即刪除，保證您的版權(quán)。

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當(dāng)前位置：

商城網(wǎng)站建設(shè)自定義checkBox標(biāo)簽的進(jìn)化過程小記

如果您覺得案例還不錯(cuò)請幫忙分享：

相關(guān)案例推薦

美知園兒童早教

裝修助手app開發(fā)案例

021設(shè)計(jì)

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索