IT技ji)躉hu)動交流(liu)平台

杏彩计划官网

作者︰謝燦(can)勇(yong)  發布日期︰2020-02-20 05:59:10

來(lai)自廣東地區(qu)的(de)小伙伴們或多或少都听(ting)說過菲(fei)律賓海外程序(xu)員派遣吧,特別是深圳和廣州地區(qu)的(de)招聘群中經常出(chu)現這樣的(de)信息,一個(ge)偶然(ran)的(de)機會,博主(zhu)在無意中瀏覽(lan)發現有一家(jia)博彩公(gong)司(si)jing)de)注冊(ce)地址是菲(fei)律賓,而且在國(guo)內(na)開設網絡(luo)賭博(這里(li)網站就不透露了)。博主(zhu)發現雖然(ran)站jing)閌欠欠 de),還gu)怯瀉芏 謖鏡(jing)愕de)設計的(de)非常好,值得我們去學習的(de),所以就仿(fang)照了一下別人家(jia)的(de)網站,自己重構(gou)了一下類似風格的(de)插(cha)件出(chu)來(lai)。(插(cha)件目(mu)前為1.0版(ban)本,穩定(ding)性(xing)不高,不建議商業使用,但是學習一下還gu)強梢緣de))

一、插(cha)件的(de)設計思想

這款插(cha)件主(zhu)要是用來(lai)解決(jue)側(ce)邊固定(ding)欄的(de)實現的(de)功(gong)能的(de)。該插(cha)件的(de)設計思路(lu)比(bi)起jPage.js有所創新(xin)(新(xin)來(lai)的(de)小伙伴們可能不太清楚(chu),jPage.js就是博主(zhu)之前分享過的(de)一款類電商的(de)分頁插(cha)件,詳情請看),有了比(bi)較大(da)的(de)突(tu)破,之前相當于就是一個(ge)方法一個(ge)方法的(de)調(diao)用,但是現在的(de)設計就是相當于有一個(ge)父類初(chu)始化了一些(xie)公(gong)共的(de)方法,然(ran)後通過子類繼承(cheng)父類的(de)形(xing)式,將父類的(de)值傳遞給(gei)子類,子類改(gai)變(bian)值重新(xin)傳給(gei)父類,從而達到了不同子類之間的(de)信息共享與傳遞。圖例如下︰

其中父類Init初(chu)始化類中將要使用到的(de)變(bian)量,validate中對(dui)程序(xu)的(de)運行結(jie)果進行驗證保證傳入的(de)參數(shu)是正確的(de),draw這個(ge)方法是用來(lai)對(dui)傳入參數(shu)進行繪制(zhi)的(de),最後在外部對(dui)init中進行事件綁定(ding),這樣我們就能夠很簡(jian)單的(de)通過一個(ge)main方法來(lai)new 一個(ge)init從而達到側(ce)欄繪制(zhi)的(de)效果

二(er)、插(cha)件簡(jian)單DEMO
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>mulTSideBar DEMO</title></head><body style='height:1200px'> <div id='test'></div> <script type='text/javascript' src='http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script> <script type='text/javascript' src='multSideBar.js'></script> <script type='text/javascript'> /*  *author:leslieSie  *description:關(guan)于MultSideBar插(cha)件的(de)簡(jian)單應用  *time:2016/12/11  */ $('#test').multSideBar({  goTopControl:true,  show:{  data:[  {   icon:'weibo', //weixin,qq,facebook,taobao,zhifubao,weibo   type:'hollow', //可選(xuan)參數(shu)有hollow,solid   noCustom:true, //自定(ding)義類型(xing),只(zhi)有xing)ustom為true的(de)時候,customUrl才有效   text:'微博',   customUrl:'', //圖片的(de)URL   click:function(){    window.location.href='https://www.weibo.com';   },    },{   icon:'weibo', //weixin,qq,facebook,taobao,zhifubao,weibo   type:'hollow', //可選(xuan)參數(shu)有hollow,solid   noCustom:false, //自定(ding)義類型(xing),只(zhi)有xing)ustom為true的(de)時候,customUrl才有效   text:'小兔(tu)子',   customUrl:'img/custom.svg', //圖片的(de)URL   click:function(){   window.location.href='https://www.baidu.com';   }, //點擊後的(de)效果   },{   icon:'goTop', //weixin,qq,facebook,taobao,zhifubao,weibo   type:'solid', //可選(xuan)參數(shu)有hollow,solid   noCustom:true, //自定(ding)義類型(xing),只(zhi)有xing)ustom為true的(de)時候,customUrl才有效   text:'置頂',   customUrl:'', //圖片的(de)URL  }]  } }); </script></body></html> 

運行效果如下︰

更(geng)多的(de)配置請到git上面(mian)閱(yue)讀readme文件,地址︰https://github.com/leslieSie/font-end-tools/tree/master/jquery/multSideBar

三、插(cha)件版(ban)本規劃

 由于這款插(cha)件預(yu)期是要在星期六的(de)時候發布的(de),由于出(chu)現一點變(bian)動耽誤了發布ji)奔洌 .0版(ban)本在匆忙中緊急發布,因此(ci)難免會有一些(xie)瑕疵(ci),所以在1.1版(ban)本中會修復大(da)家(jia)所提(ti)交的(de)Bug,添加(jia)圖標的(de)popup功(gong)能(這個(ge)功(gong)能類似于hover顯(xian)yun)疚 哦er)維碼),允(yun)許(xu)透明度定(ding)制(zhi)等(deng)問題的(de)添加(jia)與修復chu)H綣憔醯迷薜de)話,請在右下角點贊,或者給(gei)予小額的(de)資金資助,以供博主(zhu)可以繼續的(de)進行開源項目(mu)的(de)開發。

同時博主(zhu)承(cheng)接插(cha)件商業化定(ding)制(zhi)服務

  • 杏彩计划官网

About IT165 - 廣告服務 - 隱私聲明 - 吉林福彩网官网版(ban)權(quan)申明 - 免責條款 - 網站jing)贗/a> - 網友投稿 - 聯系方式
本站內(na)容來(lai)自于互(hu)聯網,僅供用于網絡(luo)技ji)躚 學習中請遵循相關(guan)法律法規
杏彩计划官网 | 下一页