Create A Floating Sidebar Panel With jQuery - hlRightPanel

hlRightPanel is a jQuery plugin used to generate a dynamic, floating, AJAX-enabled and drawer-style sidebar panel which is great for site settings, social share buttons and more. The sidebar will always stay at the right hand side of the screen whatever you scroll down or up the webpage. Click on the text label you'll see a drawer panel sliding from the right to reveal more information.

How to use it:

1. Link to the latest version of jQuery library (slim build) in your html document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>

2. Link to the jQuery hlRightPanel plugin's JavaScript and stylesheet.

<link href="hlRightPanel.css" rel="stylesheet">
<script src="hlRightPanel.js"></script>

3. You might need to load an iconic font for the panel icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

4. Add your custom data as follows:

var data = [
    {
        name: "userInfo1",
        label: "My Account 1",
        labelIcon: "customIcon1",
        type: "bar",
        template: "#template1"
    },
    {
        name: "userInfo2",
        label: "My Account 2",
        labelIcon: "customIcon1",
        type: "bar",
        template: "#template2"
    },
    {
        name: "userInfo3",
        label: "Favorite",
        labelIcon: "customIcon2",
        type: "bar",
        template: function () {
            return "<h1>I am a template</h1><h2>Favorite</h2>"
        }
    },
    {
        name: "userInfo4",
        label: "History",
        labelIcon: "customIcon4",
        type: "bar",
        template: "<h1>I am a template</h1><h2>History</h2>"
    },
    {
        name: "userInfo5",
        label: "My Message",
        labelIcon: "customIcon3",
        type: "link",
        href: "http://www.jQueryscript.net",
        target: "_blank"
    },
    {
        name: "userInfo6",
        label: "AJAX",
        labelIcon: "customIcon3",
        type: "bar",
        ajax: {
            url: "/uli_toolbar/ajaxPOST",//"/uli_toolbar/my_account"
            method: "POST",
            dataType: "json",
            data: {
                var1: "var1",
                var2: "var2"
            },
            success: function (_r) {
                $(".uli-toolbar-panel-main", _r.panel).append($(_r.data.content));
            }
        }
    },
    {
        name: "userInfo7",
        label: "AJAX 2",
        labelIcon: "customIcon3",
        type: "bar",
        ajax: "/uli_toolbar/my_account"
    }
];

5. Initialize the plugin and done.

var hl = $.hlRightPanel(data);

6. Add a new item to the sidebar panel.

var r = Math.ceil(Math.random()*100000+0);
    var d = {
        name: "userInfo" + r,
        label: r,
        labelIcon: "customIcon1",
        type: "bar"
    };
hl.add(d);

7. Delete an item.

hl.del("userInfo1");

8. Get an item's information and return a JS object.

hl.get("userInfo1")

---

This awesome jQuery plugin is developed by leehosea. For more Advanced Usages, please check the demo page or visit the official website.