magicsuggest
Version:
MagicSuggest is a multiple selection auto-suggest input box for Bootstrap 3.
113 lines (102 loc) • 5.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="MagicSuggest is a multiple selection combo box built for bootstrap themes">
<meta name="author" content="Nicolas Bize">
<link rel="shortcut icon" href="http://nicolasbize.com/magicsuggest/assets/ico/favicon.ico">
<title>MagicSuggest - Tutorial</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<link href="lib/gh-ribbon/gh-fork-ribbon.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/nicolasbize/magicsuggest">View on GitHub</a>
</div>
</div>
<a class="notice" href="../faviconx.html">Check out my new open source project, FavIconX!</a>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">MagicSuggest</h3>
<ul class="nav masthead-nav">
<li><a href="index.html">Home</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="doc.html">Documentation</a></li>
<li class="active"><a href="tutorial.html">Tutorial</a></li>
</ul>
</div>
</div>
</div>
<div class="tutorial">
<div class="container">
<h1>Tutorial</h1>
<p>The purpose of this tutorial is to walk through step-by-step and show you how the component can be used in your form.</p>
<div class="row">
<div class="col-md-12">
<h3>Part 1: Setting up the project.</h3>
<p>We will create some boilerplate HTML form rendered with Bootstrap 3.</p>
<h5>1. Setting up a basic HTML form</h5>
<h5>2. Setting up some basic PHP to output the results</h5>
<div class="text-center">
<a class="btn btn-default" href="tutorial-1.php.html">Jump to Part 1</a>
</div>
<h3>Part 2: Adding and displaying some data.</h3>
<p>We will add some data into our MySQL database then display it.</p>
<h5>1. Creating data for our combo</h5>
<h5>2. Displaying the data</h5>
<div class="text-center">
<a class="btn btn-default" href="tutorial-2.php.html">Jump to Part 2</a>
</div>
<h3>Part 3: Instanciating the MagicSuggest component.</h3>
<p>We will replace the checkboxes with our component.</p>
<h5>1. Displaying data with the combo</h5>
<h5>2. Viewing the results when the form is submitted</h5>
<div class="text-center">
<a class="btn btn-default" href="tutorial-3.php.html">Jump to Part 3</a>
</div>
<h3>Part 4: Using a custom renderer.</h3>
<p>We will style the way that our component renders elements.</p>
<h5>1. Using <code>renderer</code></h5>
<h5>2. Using <code>selectionRenderer</code></h5>
<div class="text-center">
<a class="btn btn-default" href="tutorial-4.php.html">Jump to Part 4</a>
</div>
<h3>Part 5: Setting initial values and remote functions.</h3>
<p>We will initialize the combo with some set values and remotely sort/trim the results.</p>
<h5>1. Setting initial values</h5>
<h5>2. Remotely sorting and trimming the results</h5>
<div class="text-center">
<a class="btn btn-default" href="tutorial-5.php.html">Jump to Part 5</a>
</div>
</div>
</div>
</div>
</div>
<div style="height:200px"></div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5470193-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>