JSFiddle - React, Tailwind, and code Playground

by toby3105

HTML

<script src="https://gist.github.com/anonymous/7eae9ae5ed977bcf943c.js"></script>
<input type="button" class="edit green btn" id="buttonCreateLayer" onclick="InvokeCreateLayerOption();" value="Create New Layer" style="float:right;" />
<br/>
<br/>
<div id="CreateLayerOption" title="Create Layer" style="overflow: hidden;">
    <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" ID="upCreateLayerOptions">
        <ContentTemplate>
            <div style="float:right"></div>
            <br />
            <table width="100%">
                <tr>
                    <td width="100px">
                        <div id="createOne" radiobuttongroup="CreateLayer" rbItemSelected="true" tag="New Layer"></div>
                        <div class="RadioButtonNewLayerText">New Layer</div>
                    </td>
                    <td width="100px">
                        <div id="createTwo" radiobuttongroup="CreateLayer" rbItemSelected="false" tag="Import Layer"></div>
                        <div class="RadioButtonNewLayerText">Import Layer</div>
                    </td>
                    <td width="100px">
                        <div id="createThree" radiobuttongroup="CreateLayer" rbItemSelected="false" tag="External Data"></div>
                        <div class="RadioButtonNewLayerText">External Data</div>
                    </td>
                </tr>
            </table>
            <br />
            <br />
            <div style="float:right">
                <input id="btnNextClient" value="Next" class="edit green btn" onclick="btnNextCreateLayerClient_Click();" style="width:70px;" />
            </div>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnNextCreateLayer" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</div>

CSS

#buttonShareMap:enabled {
    float: right;
}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="false"] {
    background-image: url("/images/create.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="false"] {
    background-image: url("/images/create.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="false"] {
    background-image: url("/images/create.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="true"] {
    background-image: url("/images/create_sel.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="Import Layer"][rbItemSelected="false"] {
    background-image: url("/images/import.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="Import Layer"][rbItemSelected="true"] {
    background-image: url("/images/import_sel.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="External Data"][rbItemSelected="false"] {
    background-image: url("/images/DBConnect.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
    margin-right:auto;
}
div[radiobuttongroup="CreateLayer"][tag="External Data"][rbItemSelected="true"] {
    background-image: url("/images/DBConnect_sel.png");
    width: 64px;
    height: 64px;
    top: 0px;
    left: 0px;
    margin-left:auto;
   ...

JavaScript

function DivClicked1() {
     //alert("welcome to the show");
     document.getElementById("createOne").blur();
     document.getElementById("createTwo").blur();
     document.getElementById("createThree").focus();
 }

 function BindCreateLayerOptionClick() {
     $('div[radiobuttongroup="CreateLayer"]').click(function () {

         $('div[radiobuttongroup="CreateLayer"]').each(function () {
             $(this).attr("rbItemSelected", "false");
         });

         $(this).attr("rbItemSelected", "true");
     });
 }

 function InvokeCreateLayerOption() {
     CloseCreateLayerOption();
     createLayerOptionsDlg.dialog("open");
 }

 function CloseCreateLayerOption() {
     if (createLayerOptionsDlg.closest('.ui-dialog').is(':visible') == true) createLayerOptionsDlg.dialog("close");
 }