JSFiddle - React, Tailwind, and code Playground

by jasonhsu

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Role <input type="radio" name="role" value="student" /> Student <input type="radio" name="role" value="staff" checked/> Staff
<br/>
ID <input id = "searchRole" type="text" placeholder="for example: T123456789"/>

 <p id="msg"></p>

CSS

#searchRole { width:200px }

.Highligh {background-color:#FFEFD5;}
.Table { margin-top:10px; display:table; border-top: 1px solid black; border-left: 1px solid black;}
.Row {display:table-row;} 
.Col {padding: 5px; display:table-cell; border-right: 1px solid black;border-bottom: 1px solid black;}

JavaScript

var jsonStudent = [{id:"A123456789",name:"林同學",dep:"資管系"},{id :"T987654321",name:"王同學",dep:"數位媒體學程"}];
var jsonStaff = [{id :"Z123456789",name:"陳老師",dep:"媒體系"},{id:"T987654321",name:"蕭老師",dep:"資工系"}];


(function ( $ ) { 
    $.fn.search = function(role, option){  
        $this = this;
        
        var settings = $.extend({
            title : "title",
            jsonRoleData : [] 
        }, option);
        
        if( role === "student" ){
            settings.title = "Student Search";
            settings.jsonRoleData = jsonStudent;           
        } else if (role === "staff"){
            settings.title = "staff Search";
            settings.jsonRoleData = jsonStaff;                    
        } else {
            settings.title = "Error Search";                 
        }   
        //$("#msg").html( settings.title );
        //$("#msg").html( JSON.stringify(settings.jsonRoleData) );
 
        // dialog structure 
        var mordalForm = $("<div>", {
            title : settings.title
        });
        // dialog content
        var content = $("<div class='Table'>")
            .appendTo(mordalForm);
        $.each( settings.jsonRoleData, function(i, person){  
             $("<div class='Row'>").
                append("<span class='Col'>"+ person.id +"</span>").
                append("<span class='Col'>"+ person.name +"</span>").
                append("<span class='Col'>"+ person.dep +"</span>").
                appendTo(content).
                hover(function(){
                    $(this).addClass("Highligh");
                 }, function(){
                    $(this).removeClass("Highligh");
                 }).
                 click(function(){
                     $this.val(person.id);
                 });      
       });
        
       $this.click(function(){
           mordalForm.dialog({
              autoOpen: true,
              height: 300,
              width: 350,
              modal: true,
              close: function()...