可自定义轻量侧边悬浮插件

所属分类:其他-独立的部件

 5585  102  查看评论 (13)
可自定义轻量侧边悬浮插件 ie兼容9

前端只需引用:

<link href="js/floating.css" rel="stylesheet" type="text/css">
<script src="css/floating.js"></script>

js

<script>
    $(document).ready(function() {
        $("body").floating({
            "theme": "panel_theme_fillet_Blacktheme",
            "state": true,
            "moveState": true,
            "size": "sm",
            "position": "right-center",
            "tip": {
                "background-color": "#f20000",
                "color": "#efb2b2"
            },
            "account": [{
                "type": "Email",
                "tip": null,
                "text": null,
                "url": "mailto:null"
            }, {
                "type": "Phone",
                "tip": null,
                "text": null,
                "url": "tel:null"
            }, {
                "type": "Skype",
                "tip": null,
                "text": null,
                "url": "skype:null?chat"
            }, {
                "type": "WhatsApp",
                "tip": null,
                "text": null,
                "url": "https://api.whatsapp.com/send?phone=null"
            }, {
                "type": "Viber",
                "tip": null,
                "text": null,
                "url": "viber://tel:null"
            }, {
                "type": "QRcode",
                "tip": "https://www.***.com/css/images/12.jpg",//二维码图片地址
                "text": null,
                "url": null
            }, {
                "type": "Top",
                "tip": "Back top",
                "text": null,
                "url": null
            }, {
                "type": "QQ",
                "tip": null,
                "text": "213123",
                "url": "http://wpa.qq.com/msgrd?v=3&uin=213123&site=qq&menu=yes"
            }]
        });
    }) <
</script>

json: 

var initialize = {
    theme: "panel_theme_round_solid", //主题 
    state: true, //PC 
    moveState: true, //移动
    size: "auto", //尺寸
    position: "right-center", //展示位置
    tip: {
        "background-color": "#000",
        "color": "#fff"
    }, //提示层的样式 
    account: [ //悬浮部件 
        {
            type: "Email",
            tip: "",
            text: "",
            url: ""
        }, {
            type: "Phone",
            tip: "",
            text: "",
            url: ""
        }, {
            type: "Skype",
            tip: "",
            text: "",
            url: ""
        }, {
            type: "WhatsApp",
            tip: "",
            text: "",
            url: ""
        }, {
            type: "Viber",
            tip: "",
            text: "",
            url: ""
        },
        {
            type: "QRcode",
            tip: "https://***/css/images/12.jpg"
        }, {
            type: "Top",
            tip: "Back top"
        }
    ]
};

后台编辑器插件为任务需求编写封装,

 $("body").floatmodel(initialize);

后台编辑器获取组合好的前端悬浮JSON: 获取JSON:

 $("body").floatmodel("get");

前端调用:

$("body").floating(initialize);
相关插件-独立的部件

基于Bootstrap的jQuery右键上下文菜单插件

Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发,也可以配合Font Awesome字体图标一起使用,非常的方便。
  独立的部件
 16542  45

jQueryShare分享插件支持微信分享

jQueryShare实现弹出层分享插件修改版,支持微信分享
  独立的部件
 7941  106

jQuery HTML导出Excel插件table2excel

jquerytable2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容,不需要的行可以不导出。它文件体积小,使用非常方便。
  独立的部件
 39101  169

jquery下载所有版本(实时更新)

jquery下载,实时更新jquery1.2到最新3.2.1所有版本下载
  独立的部件
 2420989  673

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币

    朱波 0
    2017/12/24 9:35:20
    Bruce、David 0
    2017/12/17 20:11:14
    自定义侧边悬浮 1.0 回复
    小郭啊啊 0
    2017/11/16 16:58:00

    我没法下载啊,一直检测刀病毒

    回复
    astro 0
    2017/10/11 16:44:58

    这个插件是作者自己写的还是转载的呀

        0
        2017/10/12 16:29:37

        我在其他网站看到过

        astro0
        2017/10/13 14:07:08

        其他哪里可以下啊,太喜欢这个插件了

        て◎ω⊙つ0
        2017/10/16 10:21:54

        自己编写封装,项目需求,自己项目有改良使用OSS上传图片,这个静态页面使用输入框

        爵恋0
        2017/11/12 22:35:47

        对于刚入门的我来说肯定写不出来

        て◎ω⊙つ0
        2017/11/16 16:59:41

        先打好基础,给自己一些压力,多学多练

    回复
    qzuser 0
    2017/10/10 0:53:34
    かわいい 0
    2017/9/20 13:33:26
    一直很安静 0
    2017/9/18 15:16:02

    不错,下载了,谢谢楼主

    回复
    huahuaniu 0
    2017/9/18 11:13:02
取消回复