Organize file structure
In this screenshot of my file structure above, I downloaded the theme and the UI creation module, jQueryUI. By default, it comes with a predefined theme and style.
Download the template here
Here is a screenshot of where the themes are.
Configure paths for your project
The page that is using jquery example: index.html, in the header add
- ./js/jquery-ui-themes/themeS/black-tie/jquery-ui.css
- ./js/jquery-ui-themes/themeS/black-tie/jquery-ui.min.css
- ./js/jqueryui/jquery-ui.js
Remember to add jQuery from an external source or download the latest version. It's important to configure the events.
To fix the issue with the close icon, you can use this creation method
create: function(event, ui) { // Customize close button $(this).parent().find('.ui-dialog-titlebar-close') .html('<span class="ui-icon ui-icon-closethick"></span>') .addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only') .attr({ title: "Close", role: "button" }); },
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Theme Switcher Modal Example</title> <!-- jQuery UI Theme - Único link que será alterado --> <link id="jquery-ui-theme" rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <!-- jQuery and jQuery UI --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <style> body { padding: 20px; font-family: Arial, sans-serif; } .ui-dialog { font-size: 14px; } .theme-selector { margin-bottom: 20px; } .demo-content { padding: 15px; background: #f9f9f9; border-radius: 4px; } </style> </head> <body> <!-- Open Modal Button --> <button id="openModal">Open Configuration</button> <!-- Configuration Modal --> <div id="configModal" title="Theme Configuration"> <div class="theme-selector"> <label for="themeSwitcher">Select Theme:</label> <select id="themeSwitcher"> <option value="base">Base Theme (Default)</option> <option value="smoothness">Smoothness Theme</option> <option value="le-frog">Le Frog Theme</option> </select> </div> <div class="demo-content"> <h2>Theme Preview</h2> <p>This is a demonstration of jQuery UI theme switching.</p> </div> </div> <script> $(function() { // Mapeamento de temas para seus URLs const themeUrls = { 'base': 'https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css', 'smoothness': 'https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css', 'le-frog': 'https://code.jquery.com/ui/1.13.1/themes/le-frog/jquery-ui.css' }; // Initialize Dialog $("#configModal").dialog({ autoOpen: false, modal: true, width: 400, resizable: false, create: function(event, ui) { // Customize close button $(this).parent().find('.ui-dialog-titlebar-close') .html('<span class="ui-icon ui-icon-closethick"></span>') .addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only') .attr({ title: "Close", role: "button" }); }, buttons: { "Save": { text: "Save Changes", class: 'ui-button ui-widget ui-state-default ui-corner-all', click: function() { alert("Settings saved!"); $(this).dialog("close"); } }, "Cancel": { text: "Cancel", class: 'ui-button ui-widget ui-state-default ui-corner-all', click: function() { $(this).dialog("close"); } } } }); // Open Modal Handler $("#openModal").click(function() { $("#configModal").dialog("open"); }); // Theme Switcher Logic - Simplificado $('#themeSwitcher').change(function() { const selectedTheme = $(this).val(); // Atualiza o href do link para o tema selecionado $('#jquery-ui-theme').attr('href', themeUrls[selectedTheme]); // Force UI refresh $('.ui-widget').each(function() { $(this).removeClass('ui-widget').addClass('ui-widget'); }); }); }); </script> </body> </html>
