JQuery UI Playground

Developer
Joo Vctor De Oliveira Santos
Size
5,215 Kb
Views
46,552
  1. JQuery UI Playground Previews
  2. JQuery UI Playground HTML Codes
  3. JQuery UI Playground CSS Codes
  4. JQuery UI Playground JS Codes

How do I make an jquery ui playground?

A jQuery UI Playground to help me learn jQuery UI.. What is a jquery ui playground? How do you make a jquery ui playground? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

JQuery UI Playground Previews
IQ Test

JQuery UI Playground - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery UI Playground</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section> <h1>Menu</h1><br/> <ul id="menu"> <li>Item 1 </li> <li>Item 2 <ul> <li>Sub-Item 1a</li> <li>Sub-Item 2b</li> <li>Sub-Item 3c</li> </ul> </li> <li>Item 3 </li> <li>Item 4 <ul> <li>Sub-Item 1a</li> <li>Sub-Item 2b</li> <li>Sub-Item 3c</li> </ul> </li> <li>Item 5 </li> </ul>
</section>
<section id="dialog-section"> <h1>Dialog</h1><br/> <button onclick="showDialogs();">Open</button> <div class="dialog" title="Testing Dialog"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis rerum, in dolorum aspernatur ullam hic expedita iusto quis et accusantium animi veniam voluptatum, minima, deleniti! Amet aliquid molestias, aperiam magni.</p> </div> <div id="dialog-confirm" title="Confirmation"> <p>Confirming something?</p> </div>
</section>
<section> <h1>DatePicker</h1><br/> <label for="datepicker">Enter a date:</label><br/> <input id="datepicker"/><br/> <div class="datepicker-inline"></div>
</section>
<section> <h1>Autocomplete</h1><br/> <label for="language">Enter a value: </label><br/> <input id="language"/>
</section>
<section> <h1>Accordion</h1> <div class="accordion"> <h3>Item 1</h3> <div class="accordion-content"> <p> Item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. At labore totam optio deleniti veritatis quo perspiciatis. Error minus perspiciatis sapiente enim. Eaque itaque distinctio amet possimus voluptates rerum deleniti quidem.</p> </div> <h3>Item 2</h3> <div class="accordion-content"> <p>Item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod animi dolorem eos blanditiis obcaecati, maiores quibusdam corporis inventore tempore ratione officia, debitis repellat dolores quos natus! Quibusdam natus eligendi temporibus.	</p> </div> <h3>Item 3</h3> <div class="accordion-content"> <p> Item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. At labore totam optio deleniti veritatis quo perspiciatis. Error minus perspiciatis sapiente enim. Eaque itaque distinctio amet possimus voluptates rerum deleniti quidem.</p> </div> <h3>Item 4</h3> <div class="accordion-content"> <p>Item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod animi dolorem eos blanditiis obcaecati, maiores quibusdam corporis inventore tempore ratione officia, debitis repellat dolores quos natus! Quibusdam natus eligendi temporibus.</p> </div> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery UI Playground - Script Codes CSS Codes

body { font-family: Helvetica;
}
section { background-color: #eceff1; min-height: 100vh;
}
section input { border-radius: 5px 5px 0 0; border: 2px solid #2962ff; height: 35px;
}
section #datepicker { width: 160px; border: 2px solid #004d40;
}
section .datepicker-inline { margin-top: 65px; width: 180px;
}
section .accordion h3 { background-color: #607d8b; color: white; display: block; padding: 20px; margin: 0 5px;
}
section .accordion h3.ui-state-active { background-color: #546e7a;
}
section .accordion .accordion-content { display: block; width: auto; margin: 0 20px; padding: 5px 20px; background-color: #cfd8dc;
}
.ui-autocomplete { list-style: none; padding: 5px 0; background-color: #2196f3; color: white; width: 100px; border-radius: 0 0 5px 5px;
}
.ui-autocomplete li { padding: 5px; margin: 0;
}
.ui-autocomplete li.ui-state-focus { background-color: #1976d2; cursor: pointer;
}
.ui-datepicker { background-color: #00897b; color: white; border-radius: 0 0 5px 5px;
}
.ui-datepicker a { color: white; text-decoration: none;
}
.ui-datepicker .ui-datepicker-header { text-align: center; background-color: #009688;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker .ui-datepicker-header .ui-datepicker-next { cursor: pointer; margin: 0 10px;
}
.ui-datepicker .ui-datepicker-calendar { margin: 0; padding: 0;
}
.ui-datepicker .ui-datepicker-calendar thead { background-color: #00695c;
}
.ui-datepicker .ui-datepicker-calendar tbody tr td:not(.ui-datepicker-unselectable) { background-color: #00796b;
}
.ui-datepicker .ui-datepicker-calendar tbody tr td:not(.ui-datepicker-unselectable) a.ui-state-active { color: #00bfa5;
}
.ui-dialog { background-color: #ff5722; border-radius: 5px; color: white; padding: 5px; position: relative;
}
.ui-dialog .ui-dialog-title { font-size: 1.2em; font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 5px;
}
.ui-dialog .ui-button { border: none; color: white; padding: 2px 6px; background-color: #d84315;
}
.ui-dialog .ui-button:hover { background-color: #ff7043;
}
.ui-menu { width: 150px; list-style: none; padding: 0; margin: 0; display: block; outline: none;
}
.ui-menu .ui-menu { position: absolute;
}
.ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px 0.4em; cursor: pointer; min-height: 0; list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px;
}

JQuery UI Playground - Script Codes JS Codes

//Menu
$( "#menu" ).menu();
//Dialog
$( ".dialog" ).dialog({	autoOpen: false
});
$( "#dialog-confirm" ).dialog({	autoOpen: false,	resizable: false,	height:140,	modal: true,	buttons: {	"Yes": function() {	alert("Yes");	},	"No": function() {	alert("No");	},	Cancel: function() {	alert("Cancel");	}	}
});
function showDialogs(){	$(".dialog").dialog( "open" );	$( "#dialog-confirm" ).dialog( "open" );
}
//DatePicker
$( "#datepicker" ).datepicker();
$( ".datepicker-inline" ).datepicker();
//Auto complete
var availableLanguages = [	"ActionScript",	"AppleScript",	"Asp",	"BASIC",	"C",	"C++",	"Clojure",	"COBOL",	"ColdFusion",	"Erlang",	"Fortran",	"Groovy",	"Haskell",	"Java",	"JavaScript",	"Lisp",	"Perl",	"PHP",	"Python",	"Ruby",	"Scala",	"Scheme"
];
$( "#language" ).autocomplete({	source: availableLanguages
});
// Accordion
$(".accordion").accordion();
JQuery UI Playground - Script Codes
JQuery UI Playground - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 5,215 Kb
Views 46,552
Do you need developer help for JQuery UI Playground?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Local Weather
Love Letter
Youtube Random Video With Cover Image
Price Table
Simon Game
Testimonial Gallery
Tic Tac Toe Game
JavaScript Calculator
Stylize Stories
Personal Portfolio
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!