外掛-懸浮選單

可我不愛聰明發表於2017-10-17

外掛需求

經常遇到頁面右下角會有一些懸浮按鈕的需求，為了快速開發，才有了這個外掛。

外掛地址

演示-未使用模板(可能出現閃爍)
演示-使用模板(無閃爍)
github地址->https://github.com/lzuntalented/tools

使用方法

1.
//載入demo中index.js
//引用demo中的樣式
//demo文字
<div>
    <div>1</div>
    <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</div>
//例項呼叫
lzBoomMenu.getInstance({
    subMenuPosition: 'top',
    animationTime: 'together',
    delay: 0,

    radius: 50,

    mainElem: null,
    tpl: '<div>1</div><ul><li>2</li><li>3</li></ul>',
    mode: 0,

    setPosition: function(len){
        var result = [];
        for (var i = 0; i < len; i++) {
            result.push({
                x: (i + 1) * 50,
                y: (i + 1) * 50,
            })
        }
        return result;
    },
    menuClick: function(e,idx){
        console.log( '第' + idx + '個元素被點選')
    },
});

2.模板使用參考示例
3.配置：
    subMenuPosition: 'top',//top bottom left right around
    animationTime: 'together',//togethre delay
    delay: 0,//delay time

    radius: 50,//當subMenuPosition為around 環形半徑 

    mainElem: null,//容器物件，dom節點
    tpl: '<div>1</div><ul><li>2</li></ul>',//模板內容
    mode: 0,//節點建立模式，0 模板，1 節點

    show: false,//當前狀態，true顯示子選單，false隱藏

    elems: {},//內部使用節點集合

    setPosition: null,//使用者自定子選單位置，function原型function(len) len為子節點個數 / array
    menuClick: null,//子元素點選事件，function原型function(event,idx) event點選事件，idx為子選單序號從0開始複製程式碼

寫在最後

歡迎各位大佬點評
順便推銷下我的小站:www.lzuntalented.cn

相關文章