JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<span class="cat_id_12 category">
    <span class="btn_pencil ui-button ui-button-icon-only ui-corner-all" title="edit"></span>
    <span class="btn_add ui-button ui-button-icon-only ui-corner-all" title="add new category"></span>
    <input class="cat_name" type="hidden" value="edit"/>
    <input class="cat_sort_order" type="hidden" value="25"/>
</span>
<span class="cat_id_13 category">
    <span class="btn_pencil ui-button ui-button-icon-only ui-corner-all" title="edit"></span>
    <span class="btn_add ui-button ui-button-icon-only ui-corner-all" title="add new category"></span>
    <input class="cat_name" type="hidden" value="delete or whatever"/>
    <input class="cat_sort_order" type="hidden" value="1337"/>
</span>
<span class="cat_id_14 category">
    <span class="btn_pencil ui-button ui-button-icon-only ui-corner-all" title="edit"></span>
    <span class="btn_add ui-button ui-button-icon-only ui-corner-all" title="add new category"></span>
    <input class="cat_name" type="hidden" value="Just a Cat."/>
    <input class="cat_sort_order" type="hidden" value="300"/>
</span>
<div id="dialog" class="dialog" title="Edit Category">
        <div class="column">
            <p>Category Name:</p>
            <p><input class="text" type="text" name="category_name" value="?????"></p>
        </div>
        
        <div class="column">
            <p>Sort Order:</p>
            <p><input class="text" type="text" name="sort_order" value="?????"></p>
        </div>
 </div>

CSS

.category{ width: 100px; height: 50px; background: #ddd; margin: 0 10px; }
.category:hover { cursor: pointer; }
/*!
 * jQuery UI CSS Framework 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*!
 * jQuery UI CSS Framework 1.8.21
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit...

JavaScript

$(function(){
    
    var $dialog = $('#dialog');
        
    $dialog.dialog({
        autoOpen: false,
        width: 300,
        modal: true,
        resizable: false,
    }); 
    
    $('.category').click(function(){
        
        $dialog
            
            .find('input[name=category_name]')
            .attr('value', $(this).find('.cat_name').val())
            .end()
        
            .find('input[name=sort_order]')
            .attr('value', $(this).find('.cat_sort_order').val())
            .end()
            
            .dialog('open');
            
        
        return false;
    });
    
    $('.delete').click(function(){
        
        $dialog.dialog('close');
        
        return false;
    });

});