JSFiddle - React, Tailwind, and code Playground

by alexeevdv

HTML

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.core.js"></script>
    <script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.widget.js"></script>
    <script src="https://raw.github.com/alexeevdv/jquery-ui/master/ui/jquery.ui.button.js"></script>
    <script src="https://raw.github.com/alexeevdv/jquery-ui/dialog-title-custom-icon/ui/jquery.ui.dialog.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/redmond/jquery-ui.css" type="text/css" media="all" />
    <style>
        * { font-size: 13px; }
        .ui-dialog .ui-dialog-titlebar-icon { 
            position: absolute; 
            top: 50%; 
            left: 0.3em; 
            margin: -8px 0 0 0; 
        }
        .ui-dialog .ui-dialog-titlebar-icon-spacer { 
            width: 16px; 
            height:  16px; 
            display: block; 
            float: left; 
            margin-left: -0.3em;                
        }        
    </style>
</head>
<body>
<div id="dialog" title="Dialog with icon">
    Hello world!
</div>
</body>
</html>

JavaScript

$(function() {
    $("#dialog").dialog({
        icon: "ui-icon-folder-open",
        width: 400,
        height: 200,
        modal: true,
        buttons: [
            {
                text: "Set gear icon",
                click: function() {
                    $(this).dialog("option", "icon", "ui-icon-gear");
                }
            },
            {
                text: "Set image icon",
                click: function() {
                    $(this).dialog("option", "icon", "ui-icon-image");
                }
            },
            {
                text: "Get icon",
                click: function() {
                    alert($(this).dialog("option", "icon"));
                }
            }
        ]
    });
});