JSFiddle - React, Tailwind, and code Playground

by doriansao

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<div id="myDiv"></div>

JavaScript

(function( $ ){

  $.fn.UniversalSearch = function() {
  
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));
      
      
    var universalSearchHtml = '<div id="universalSearchTabstrip">               '
                            + '   <ul>                                          '
                            + '      <li>Simple Search</li>                     '
                            + '      <li>Advanced Search</li>                   '
                            + '      <li>Custom Search</li>                     '
                            + '      <li>Saved Searches</li>                    '
                            + '   </ul>                                         '
                            + '   <div id="universalSearchSimpleSearch"></div>  '
                            + '   <div id="universalSearchAdvancedSearch"></div>'
                            + '   <div id="universalSearchCustomSearch"></div>  '
                            + '   <div id="universalSearchSavedSearch"></div>   '
                            + '</div>                                           ';

        
    this.html(universalSearchHtml);
      
    var universalSearchtabstrip = $("#universalSearchTabstrip").kendoTabStrip().data("kendoTabStrip");
    universalSearchtabstrip.select(0);
      
  };
})( jQuery );

$('#myDiv').UniversalSearch();

 $(document).on("click", "#clickMe", function () {
      alert('clicked!');
});