Code Samples: May 2018

Monday, May 7, 2018

JQuery Custom Popup Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Popup</title>
    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="custom-popup.js?v=<?= time() ?>"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            console.log(CustomPopup.getAvailableOptions());
            var body = $(document.body), html = body.find(".move-container").clone(true);
            // to get or check initial config of CustomPopup just console log below
            // CustomPopup.getAvailableOptions()
            // and all available events shown in "triggers" array
            // so what you need to do popup.trigger("close") to close popup
            body.find(".open-popup-html").click(function() {
                CustomPopup.fromHTML($("<div>Are you sure want to delete?</div>"));
            });
            body.find(".open-popup-url").click(function() {
                CustomPopup.fromURL("popup.php", {id: 0}, {
                    // you also can set all below function and variables
                    // as html data attribute
                    onOpen: function(p) {
                        console.log("POPUP OPENED");

                        // disabling popup
                        p.trigger("disable");

                        setTimeout(function() {
                            // enabling popup
                            p.trigger("enable");
                        }, 2000);
                    },
                    onClose: function(p) {
                        console.log("POPUP CLOSED");
                    },
                    onSubmit: function(p) {
                        p.trigger("show-loading");
                        console.log("POPUP SUBMITTED");
                        // return false will not close popup immediately
                        // you have to close manually by popup.trigger("close")
                        setTimeout(function() {
                            p.trigger("close-loading");
                            setTimeout(function() {
                                p.trigger("close");
                            }, 2000);
                        }, 2000);
                        return false;
                    },
                    popupTitle: "POPUP TITLE",
                    yesText: "YES TEXT",
                    noText: "NO TEXT",
                    showTitle: true,
                    showClose: true,
                    popupClass: "some-class",
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('X-Test-Header1.1', 'test-value1');
                        xhr.setRequestHeader('X-Test-Header2.1', 'test-value2');
                    },
                    xhrFail: function(jqXHR, textStatus, errorThrown) {
                        console.log(jqXHR);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            });
        });
        function formSubmitted() {
            alert("POPUP SUBMITTED");
        }
    </script>
</head>
<body>
<button class="open-popup-html">Open popup from HTML</button><br/>
<button class="open-popup-url">Open popup from URL</button><br/>
<button
    type="button" data-popup-url="popup.php"
    class="my-popup-opener" data-popup-class=""
    data-yes-text="Save" data-on-submit="formSubmitted"
    data-popup-title="MY POPUP" data-on-open="formOpened"
    data-no-text="Close" data-show-title="1">
    Open Popup On Click Html Element (.my-popup-opener)
</button>
</body>
</html>





On popup submit there will be an overlay shown above.


You can download full source code from here

Saturday, May 5, 2018

JQuery TreeView Example And Stylish Select DropDown

Create TreeView example:

Here container is the boundary within tree dropdown will contains.

If you open this tree view in popup, container will be popup body.

var tree = $("div.tree-inside-this-div").treeView({
    json: r,
    openAll: 0,
    noText: "Select...",
    change: function (value) {
        console.log(value);
    },
    value: "1.1.2.2.3.2",
    container: $(document.body)
});

To set specific value or to select desired tree node:

tree.value("100");

You can put a attribute named "selected": true to auto select node when create tree.

"children": [
  {
    "id": "1.1.2.2.3.2.4.1",
    "text": "Label - 4.1",
    "selected": true
  },
  {
    "id": "1.1.2.2.3.2.4.2",
    "text": "Label - 4.2"
  }
]

You can also convert select to stylish dropdown:

$(document.body).find("select").selectView();

You also can use this tree view for custom action menu using below command 

$(document.body).find("select.action_menu").actionView({
    actionWidth: 140
});

And finally you download source code from here.

Pages

Monday, May 7, 2018

JQuery Custom Popup Example

Saturday, May 5, 2018

JQuery TreeView Example And Stylish Select DropDown