JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/cross-domain-ajax/jquery.xdomainajax.js"></script>
<link type="text/css" id="jTheme" rel="stylesheet" media="all" href="http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/hot-sneaks/jquery-ui.css" />
<script>
$(function () {
//Theme click handler
var $themes = $('#themes');
var $themelist = $('#theme-list');
var $themesSelect = $('.themes-el');
var themeLinkPos = $themes.position();
$themelist.dialog({
position: [themeLinkPos.left - 200, themeLinkPos.top + 20],
autoOpen: false,
title: 'Select a theme',
/*hide: { effect: 'drop', direction: "down" },
show: { effect: 'drop', direction: "up" },*/
hide: "fade",
show: "slide",
draggable: false,
height: 300
});
$themes.click (function (e) {
e.stopPropagation();
$themelist.dialog('open');
}).hover(function () {
$(this).addClass('ui-state-highlight');
}, function () {
$(this).removeClass('ui-state-highlight');
});
$themelist.click (function (e) {
e.stopPropagation();
});
$themesSelect.click (function () {
$themesSelect.removeClass('ui-state-highlight');
$(this).addClass('ui-state-highlight');
var selectedTheme = $(this).data('theme');
$themelist.dialog('close');
util.showOverlay($('body'), 'Loading the new theme, Please wait..', function (selectedTheme) {
var linkURL = $('#jTheme')[0].href;
linkURL = linkURL.substring(0, linkURL.indexOf('\/themes\/') +...
CSS
body {
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 8pt;
background-color: #f2f2f2;
}
a, a:link, a:visited, a:active, a:hover { text-decoration: none; }
ul li { list-style: none; }
#header {
padding: 8px;
padding-bottom: 0px;
}
#theme-list { padding: 5px; display: none; }
.themes-el { padding: 3px; font-size: 1.1em; cursor: pointer; }
.theme-text { display: inline-block; vertical-align: top; }
#themes { padding: 2px 5px; padding-bottom: 0px; cursor: pointer; }
h2 {
letter-spacing: 1px;
margin-bottom: 3px;
padding: 5px;
font-size: 1.2em;
}
h2.title { font-size: 1.1em; padding-left: 12px; }
h1 {
font-size: 1em;
letter-spacing: 1px;
margin-bottom: 3px;
padding: 5px;
}
#footer {
background-color: white;
border-bottom: 3px solid #c2c2c2;
padding: 7px 5px;
}
#page-content { padding: 7px 0px; margin: 2px; }
/*#sidebar, #main-content { margin: 3px 1px; }
#sidebar {
width: 130px;
background-color: white;
float: left;
padding: 6px;
}*/
#main-content {
border: 1px solid #a2a2a2;
padding: 6px;
padding-bottom: 10px;
/*background-color: #ebf1f9;
margin-left: 145px;*/
}
#main-content { min-height: 600px; }
#c_overlay {
/*filter:alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;*/
z-index: 1010;
position: absolute;
top: 0;
left: 0;
background-color: white;
}
#c_overlay_status {
border: 1px solid black;
font-size: 0.9em;
...
JavaScript
$(function() {
$.ajax({
url: 'http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/',
type: 'GET',
success: function(data) {
$('#main-content').html(data.responseText.substring(data.responseText.indexOf('<ul>'), data.responseText.lastIndexOf('</ul>') + 4));
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown + ' ' + textStatus + ' ' + jqXHR.responseText);
}
});
});