UI

UI Frameworks

jQuery UI

Select / Dropdown

MagicSuggest

https://github.com/Magicsuggest/magicsuggest

Date & Time

Bootstrap 3 Date/Time Picker

Calendar

FullCalendar

Tooltip

Tooltip - jQuery UI

Dialog/Popup

vex

Tree View

Fancytree

Sample data:

[
    {"title": "Books", "expanded": true, "folder": true, "children": [
        {"title": "Art of War", "type": "book", "author": "Sun Tzu", "year": -500, "qty": 21, "price": 5.95},
        {"title": "The Hobbit", "type": "book", "author": "J.R.R. Tolkien", "year": 1937, "qty": 32, "price": 8.97},
        {"title": "The Little Prince", "type": "book", "author": "Antoine de Saint-Exupery", "year": 1943, "qty": 2946, "price": 6.82},
        {"title": "Don Quixote", "type": "book", "author": "Miguel de Cervantes", "year": 1615, "qty": 932, "price": 15.99}
    ]},
    {"title": "Music", "folder": true, "children": [
        {"title": "Nevermind", "type": "music", "author": "Nirvana", "year": 1991, "qty": 916, "price": 15.95},
        {"title": "Autobahn", "type": "music", "author": "Kraftwerk", "year": 1974, "qty": 2261, "price": 23.98},
        {"title": "Kind of Blue", "type": "music", "author": "Miles Davis", "year": 1959, "qty": 9735, "price": 21.90},
        {"title": "Back in Black", "type": "music", "author": "AC/DC", "year": 1980, "qty": 3895, "price": 17.99},
        {"title": "The Dark Side of the Moon", "type": "music", "author": "Pink Floyd", "year": 1973, "qty": 263, "price": 17.99},
        {"title": "Sgt. Pepper's Lonely Hearts Club Band", "type": "music", "author": "The Beatles", "year": 1967, "qty": 521, "price": 13.98}
    ]},
    {"title": "Electronics & Computers", "expanded": true, "folder": true, "children": [
        {"title": "Cell Phones", "folder": true, "children": [
            {"title": "Moto G", "type": "phone", "author": "Motorola", "year": 2014, "qty": 332, "price": 224.99},
            {"title": "Galaxy S8", "type": "phone", "author": "Samsung", "year": 2016, "qty": 952, "price": 509.99},
            {"title": "iPhone SE", "type": "phone", "author": "Apple", "year": 2016, "qty": 444, "price": 282.75},
            {"title": "G6", "type": "phone", "author": "LG", "year": 2017, "qty": 951, "price": 309.99},
            {"title": "Lumia", "type": "phone", "author": "Microsoft", "year": 2014, "qty": 32, "price": 205.95},
            {"title": "Xperia", "type": "phone", "author": "Sony", "year": 2014, "qty": 77, "price": 195.95},
            {"title": "3210", "type": "phone", "author": "Nokia", "year": 1999, "qty": 3, "price": 85.99}
        ]},
        {"title": "Computers", "folder": true, "children": [
            {"title": "ThinkPad", "type": "computer", "author": "IBM", "year": 1992, "qty": 16, "price": 749.90},
            {"title": "C64", "type": "computer", "author": "Commodore", "year": 1982, "qty": 83, "price": 595.00},
            {"title": "MacBook Pro", "type": "computer", "author": "Apple", "year": 2006, "qty": 482, "price": 1949.95},
            {"title": "Sinclair ZX Spectrum", "type": "computer", "author": "Sinclair Research", "year": 1982, "qty": 1, "price": 529},
            {"title": "Apple II", "type": "computer", "author": "Apple", "year": 1977, "qty": 17, "price": 1298},
            {"title": "PC AT", "type": "computer", "author": "IBM", "year": 1984, "qty": 3, "price": 1235.00}
        ]}
    ]},
  {"title": "More...", "folder": true, "lazy": true}
]

Expand all

$("#tree").fancytree("getTree").visit(function(node){
    node.setExpanded();
});

Reload the tree

// Reload the tree from previous `source` option
tree.reload().done(function(){
  alert("reloaded");
});

// Optionally pass new `source`:
tree.reload({
  url: ...
}).done(function(){
  alert("reloaded");
});

Reload the tree with new source

$(function() {
    var sampleSource = [{
            title: "Folder 1",
            folder: true,
            attribute: 'folder',
            children: [{
                    title: "Subnode 1.1",
                    attribute: 'Subnode1'
                },
                {
                    title: "Subnode 1.2",
                    attribute: 'Subnode1'
                },
                {
                    title: "Subnode 1.3",
                    attribute: 'Subnode1'
                }
            ]
        },
        {
            title: "Folder 2",
            expanded: true,
            children: [{
                    title: "Subnode 2.1",
                    attribute: 'Subnode2'
                },
                {
                    title: "Subnode 2.2",
                    attribute: 'Subnode2'
                },
                {
                    title: "Subnode 2.3",
                    attribute: 'Subnode2'
                }
            ]
        },
        {
            title: "Lazy Folder",
            lazy: true
        }
    ];
    var sampleSource2 = [{
            title: "Folder 1",
            folder: true,
            attribute: 'folder',
            children: [{
                title: "Subnode 1.1",
                attribute: 'Subnode1'
            }]
        },
        {
            title: "Folder 2",
            expanded: true,
            children: [{
                title: "Subnode 2.1",
                attribute: 'Subnode2'
            }, ]
        },
        {
            title: "Lazy Folder",
            lazy: true
        }
    ];
    $("#tree").fancytree({
        //    extensions: ["childcounter"],
        checkbox: true,
        source: sampleSource,

        lazyLoad: function(event, data) {
            data.result = {
                url: "sample1.json"
            };
        },
        activate: function(event, data) {
            $("#statusLine").text("Active node: " + data.node + ". attribute : " + data.node.data.attribute);
        }
    });

    $("#button1").click(function(event) {
       $('#tree').fancytree('option', 'source', sampleSource2);

Fancytree

Fancytree - GitHub

Fancytree Demo

Chart

Chart.js

Mouse

jQuery Mouse Wheel Plugin

https://github.com/jquery/jquery-mousewheel

Validation

jQuery Validation Plugin