IT技術互動交流平臺

類垂直站點插件實現與分享

作者:謝燦勇  發布日期:2016-12-19 20:32:10

來自廣東地區的小伙伴們或多或少都聽說過菲律賓海外程序員派遣吧,特別是深圳和廣州地區的招聘群中經常出現這樣的信息,一個偶然的機會,博主在無意中瀏覽發現有一家博彩公司的注冊地址是菲律賓,而且在國內開設網絡賭博(這里網站就不透露了)。博主發現雖然站點是非法的,還是有很多在站點的設計的非常好,值得我們去學習的,所以就仿照了一下別人家的網站,自己重構了一下類似風格的插件出來。(插件目前為1.0版本,穩定性不高,不建議商業使用,但是學習一下還是可以的)

一、插件的設計思想

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

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

二、插件簡單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:關于MultSideBar插件的簡單應用
         *time:2016/12/11
         */
        $('#test').multSideBar({
            goTopControl:true,
            show:{
                data:[
                {
                    icon:'weibo',   //weixin,qq,facebook,taobao,zhifubao,weibo
                    type:'hollow',   //可選參數有hollow,solid
                    noCustom:true,    //自定義類型,只有在custom為true的時候,customUrl才有效
                    text:'微博',
                    customUrl:'',    //圖片的URL
                    click:function(){  
                        window.location.href='https://www.weibo.com';
                    },         
                },{
                    icon:'weibo',   //weixin,qq,facebook,taobao,zhifubao,weibo
                    type:'hollow',   //可選參數有hollow,solid
                    noCustom:false,    //自定義類型,只有在custom為true的時候,customUrl才有效
                    text:'小兔子',
                    customUrl:'img/custom.svg',    //圖片的URL
                    click:function(){
                        window.location.href='https://www.baidu.com';
                    },        //點擊后的效果        
                },{
                    icon:'goTop',   //weixin,qq,facebook,taobao,zhifubao,weibo
                    type:'solid',   //可選參數有hollow,solid
                    noCustom:true,    //自定義類型,只有在custom為true的時候,customUrl才有效
                    text:'置頂',
                    customUrl:'',    //圖片的URL
                }]
            }
        });
    </script>
</body>
</html> 

運行效果如下:

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

三、插件版本規劃

 由于這款插件預期是要在星期六的時候發布的,由于出現一點變動耽誤了發布時間,所以1.0版本在匆忙中緊急發布,因此難免會有一些瑕疵,所以在1.1版本中會修復大家所提交的Bug,添加圖標的popup功能(這個功能類似于hover顯示微信二維碼),允許透明度定制等問題的添加與修復。如果你覺得贊的話,請在右下角點贊,或者給予小額的資金資助,以供博主可以繼續的進行開源項目的開發。

同時博主承接插件商業化定制服務

Tag標簽: 插件   站點  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
香港最快开奖现场直播结果