Skip to content

Instantly share code, notes, and snippets.

@mlh758
Last active March 9, 2018 15:39
Show Gist options
  • Save mlh758/b1b24931db7705441f9786bd68cf3569 to your computer and use it in GitHub Desktop.
Save mlh758/b1b24931db7705441f9786bd68cf3569 to your computer and use it in GitHub Desktop.
Extra Demos
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<script type="text/javascript">
$(function () {
$("select").multiselect();
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a
jumbotron and three supporting pieces of content. Use it as a starting point to create something more
unique.</p>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
</p>
<p>
<select name="example-optgroup" multiple="multiple" size="5">
<optgroup label="Group One">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</optgroup>
</select>
</p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
euismod. Donec sed odio dui. </p>
<p>
<a class="btn btn-secondary" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
euismod. Donec sed odio dui. </p>
<p>
<a class="btn btn-secondary" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus.</p>
<p>
<a class="btn btn-secondary" href="#" role="button">View details &raquo;</a>
</p>
</div>
</div>
<hr>
</div>
<!-- /container -->
</main>
<footer class="container">
<p>&copy; Company 2017-2018</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.filter.js"></script>
<script type="text/javascript">
$(function () {
$("#diagButton").click(function() {
$("#dialog").dialog('open')
});
$("#dialog").dialog({
buttons: [
{
text: "OK",
click: function () {
$(this).dialog("close");
}
}
],
height: 300,
modal: true,
title: "Some Modal"
});
$("select").multiselect().multiselectfilter();
});
</script>
</head>
<body>
<h1>There's a dialog here.</h1>
<button id="diagButton">Open Dialog</button>
<div id="dialog">
<select name="example-optgroup" multiple="multiple" size="5">
<optgroup label="Group One">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3 is extra long to check width</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</optgroup>
</select>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function () {
var optCount = 1;
var el = document.getElementById('selectTest');
var content = el.innerHTML;
for (var groupCount = 1; groupCount < 50; groupCount++) {
content += `<optgroup label="Group ${groupCount}">`;
for (var subCount = 1; subCount < 100; subCount++) {
content += `<option value=${optCount}>Option ${optCount}</option>`;
optCount++;
}
content += '</optgroup>';
}
el.innerHTML = content;
var begin = new Date();
$(el).multiselect();
var end = new Date();
document.getElementById('test').innerHTML += `<h1>Widget time: ${(end - begin) / 1000} seconds</h1>`
});
</script>
</head>
<body id="test" onload="prettyPrint();">
<h2>Basic Demos</h2>
<p>Both multiselects are created with the following one-liner. Optgroup support is built in out of the box:</p>
<pre class="prettyprint">
$(function(){
$("select").multiselect();
});
</pre>
<h3>With Optgroups</h3>
<p>Click on an optgroup's heading to toggle the checked state of the entire group.</p>
<p>
<select name="example-optgroup" multiple="multiple" id="selectTest"></select>
</p>
</body>
</html>
@SteveTheTechie
Copy link

"${optCount}" ES6, huh? Nice! I am aware of it, but prior to this have yet to see anyone actually use it.

BTW, my server code is Perl, so "string interpolations" = No problem

@SteveTheTechie
Copy link

You will soon need the css/ folder added since I moved css files to the subfolder.

@mlh758
Copy link
Author

mlh758 commented Feb 6, 2018

Steve, I added the css folder. And yeah, most of my front end work now is with applications that use build tools like Webpack. You get to use all the ES6 syntax and Babel turns it back into stuff Internet Explorer understands.

@SteveTheTechie
Copy link

Webpack... cool. I am aware of it but never used it.

I just do all this coding stuff as a hobby... I actually do the code maintenance on a large CMS system used by most Toastmasters public speaking clubs, but even that is as a volunteer in my spare time. It was implemented w/ a large MySQL db in poorly written Perl server code and poorly written Javascript w/ jQuery/jQuery UI back in 2011, and i have been trying to keep it from dying a slow death because so many Toastmasters clubs depend on it--the prior developer ditched on it. It is not a responsive design layout, it lacks translations, and it is still a bit clunky around the edges. I actually learned all the JavaScript stuff and Perl stuff from fiddling w/ this system. I had done some C/C++ and VB in the past, so not that difficult to pick up except for some of the tricks and subtle nuances of not strongly typed languages.

I have considered moving the system to something like React or Vue, but I am on the fence as to whether I want to expend the effort to do that. I am pretty clear that jQuery UI is dying a slow death with little effort expended for updates, but I just need to keep using it for now. I would also like to get away from Perl on the server, but PHP is unwanted as an alternative, and I think Python and Node are still a bit too new. I have done some Node (Gulp scripts), but it is a bit challenging to figure out how to do some of the Perl stuff in Node.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment