Add a fixed sidebar with anchor navigation to the sidebar.
Borrowed from the Bootstrap doc implementation.
This commit is contained in:
parent
f8ecee7783
commit
d98cbcec21
@ -20,6 +20,148 @@
|
||||
<link href="vendor/css/anchor.css" type="text/css" rel="stylesheet" />
|
||||
|
||||
<style type="text/css">
|
||||
/*
|
||||
* Side navigation
|
||||
*
|
||||
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
|
||||
* sections of docs content.
|
||||
*/
|
||||
|
||||
/* By default it's not affixed in mobile views, so undo that */
|
||||
.s2-docs-sidebar.affix {
|
||||
position: static;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.s2-docs-sidebar {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* First level of nav */
|
||||
.s2-docs-sidenav {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* All levels of nav */
|
||||
.s2-docs-sidebar .nav > li > a {
|
||||
margin-left: -1px;
|
||||
display: block;
|
||||
padding: 4px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #767676;
|
||||
}
|
||||
.s2-docs-sidebar .nav > li > a code {
|
||||
background-color: inherit;
|
||||
color: #666;
|
||||
}
|
||||
.s2-docs-sidebar .nav > li > a:hover,
|
||||
.s2-docs-sidebar .nav > li > a:focus {
|
||||
padding-left: 19px;
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-left: 1px solid #428BCA;
|
||||
}
|
||||
.s2-docs-sidebar .nav > .active > a,
|
||||
.s2-docs-sidebar .nav > .active:hover > a,
|
||||
.s2-docs-sidebar .nav > .active:focus > a {
|
||||
padding-left: 18px;
|
||||
font-weight: bold;
|
||||
color: #428BCA;
|
||||
background-color: transparent;
|
||||
border-left: 2px solid #428BCA;
|
||||
}
|
||||
|
||||
/* Nav: second level (shown on .active) */
|
||||
.s2-docs-sidebar .nav .nav {
|
||||
display: none; /* Hide by default, but at >768px, show it */
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.s2-docs-sidebar .nav .nav > li > a {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.s2-docs-sidebar .nav .nav > li > a:hover,
|
||||
.s2-docs-sidebar .nav .nav > li > a:focus {
|
||||
padding-left: 29px;
|
||||
}
|
||||
.s2-docs-sidebar .nav .nav > .active > a,
|
||||
.s2-docs-sidebar .nav .nav > .active:hover > a,
|
||||
.s2-docs-sidebar .nav .nav > .active:focus > a {
|
||||
padding-left: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Back to top (hidden on mobile) */
|
||||
.back-to-top,
|
||||
.s2-docs-theme-toggle {
|
||||
display: none;
|
||||
padding: 4px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.back-to-top:hover,
|
||||
.s2-docs-theme-toggle:hover {
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
}
|
||||
.s2-docs-theme-toggle {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.back-to-top,
|
||||
.s2-docs-theme-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show and affix the side nav when space allows it */
|
||||
@media (min-width: 992px) {
|
||||
.s2-docs-sidebar .s2-docs-sidenav {
|
||||
border-left: 1px solid #eee;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.s2-docs-sidebar .nav > .active > ul {
|
||||
display: block;
|
||||
}
|
||||
/* Widen the fixed sidebar */
|
||||
.s2-docs-sidebar.affix,
|
||||
.s2-docs-sidebar.affix-bottom {
|
||||
width: 213px;
|
||||
}
|
||||
.s2-docs-sidebar.affix {
|
||||
position: fixed; /* Undo the static from mobile first approach */
|
||||
top: 0px;
|
||||
}
|
||||
.s2-docs-sidebar.affix-bottom {
|
||||
position: absolute; /* Undo the static from mobile first approach */
|
||||
}
|
||||
.s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
|
||||
.s2-docs-sidebar.affix .s2-docs-sidenav {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
/* Widen the fixed sidebar again */
|
||||
.s2-docs-sidebar.affix-bottom,
|
||||
.s2-docs-sidebar.affix {
|
||||
width: 263px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Footer */
|
||||
.s2-docs-footer {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
@ -63,14 +205,18 @@
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
background-color: #428BCA;
|
||||
color: #fff;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.jumbotron h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.btn-outline-inverse {
|
||||
color: #FFF;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.btn-outline-inverse:hover {
|
||||
@ -101,4 +247,56 @@
|
||||
font-size: 60%;
|
||||
vertical-align: .2em;
|
||||
}
|
||||
|
||||
/* Inline code within headings retain the heading's background-color */
|
||||
h2 code,
|
||||
h3 code,
|
||||
h4 code {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* Back to top (hidden on mobile) */
|
||||
.back-to-top {
|
||||
display: none;
|
||||
padding: 4px 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
.back-to-top:hover {
|
||||
color: #428BCA;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.back-to-top {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.s2-docs-nav {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.s2-docs-nav .navbar-brand {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1[id] {
|
||||
padding-top: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.alert {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
54
docs/_includes/nav/options.html
Normal file
54
docs/_includes/nav/options.html
Normal file
@ -0,0 +1,54 @@
|
||||
<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
|
||||
<ul class="nav s2-docs-sidenav">
|
||||
<li>
|
||||
<a href="#core-options">Core Options</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#data-attributes">Declaring configuration in the data-* attributes</a></li>
|
||||
<li><a href="#amd">AMD compatibility</a></li>
|
||||
<li><a href="#core-options-display">Display</a></li>
|
||||
<li><a href="#core-options-results">Results</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#dropdown">Dropdown</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#dropdownParent">Attached to body</a></li>
|
||||
<li><a href="#dropdown-attachContainer">Attached below the container</a></li>
|
||||
<li><a href="#dropdown-search">Search</a></li>
|
||||
<li><a href="#dropdown-select-on-close">Select the highlighted option on close</a></li>
|
||||
<li><a href="#closeOnSelect">Close the dropdown when a result is selected</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#events">Events</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#events-public">Public events</a></li>
|
||||
<li><a href="#events-internal">Internal events</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#adapters">Adapters</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#adapters-all">All adapters</a></li>
|
||||
<li><a href="#selectionAdapter">Container (selection)</a></li>
|
||||
<li><a href="#dataAdapter">Data set</a></li>
|
||||
<li><a href="#dropdownAdapter">Dropdown</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#setting-default-options">Setting default options</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#backwards-compatibility">Backwards compatibility</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#compat-matcher">Simplified function for matching data objects</a></li>
|
||||
<li><a href="#initSelection">Old initial selections with initSelection</a></li>
|
||||
<li><a href="#query">Querying old data with <code>query</code></a></li>
|
||||
<li><a href="#input-fallback">Compatibility with <code><input type="text" /></code></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="back-to-top" href="#top">
|
||||
Back to top
|
||||
</a>
|
||||
</nav>
|
@ -1,4 +1,4 @@
|
||||
<header class="navbar navbar-static-top" id="top" role="banner">
|
||||
<header class="s2-docs-nav navbar navbar-static-top" id="top" role="banner">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
|
||||
|
@ -10,9 +10,41 @@
|
||||
|
||||
{% include footer.html %}
|
||||
<script>
|
||||
(function ($) {
|
||||
'use strict';
|
||||
$(function () {
|
||||
var $window = $(window);
|
||||
var $body = $(document.body);
|
||||
var $sidebar = $('.s2-docs-sidebar');
|
||||
|
||||
$body.scrollspy({
|
||||
target: '.s2-docs-sidebar',
|
||||
offset: 40
|
||||
});
|
||||
|
||||
$window.on('load', function () {
|
||||
$body.scrollspy('refresh');
|
||||
});
|
||||
|
||||
$sidebar.affix({
|
||||
offset: {
|
||||
top: function () {
|
||||
var offsetTop = $sidebar.offset().top;
|
||||
var navOuterHeight = $('.s2-docs-nav').height();
|
||||
|
||||
return (this.top = offsetTop - navOuterHeight);
|
||||
},
|
||||
bottom: function () {
|
||||
return (this.bottom = $('.s2-docs-footer').outerHeight(true));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
addAnchors('.container h1, .container h2, .container h3, .container h4, .container h5');
|
||||
addAnchors('.s2-docs-container h1, .s2-docs-container h2, .s2-docs-container h3, .s2-docs-container h4, .s2-docs-container h5');
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
@ -4,11 +4,22 @@ title: Options - Select2
|
||||
slug: options
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<section id="core">
|
||||
<div class="page-header">
|
||||
<h1>Core options</h1>
|
||||
<section class="jumbotron">
|
||||
<div class="container">
|
||||
<h1>
|
||||
Options
|
||||
</h1>
|
||||
<p class="lead">
|
||||
Lorem ipsum.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container s2-docs-container">
|
||||
<div class="row">
|
||||
<div class="col-md-9" role="main">
|
||||
<section id="core">
|
||||
<h1 class="page-header">Core options</h1>
|
||||
|
||||
<p>
|
||||
Select2 supports a small subset of options in every build that is
|
||||
@ -148,7 +159,7 @@ $("select").select2({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<h2 id="core-options-display">
|
||||
Display
|
||||
</h2>
|
||||
|
||||
@ -169,7 +180,7 @@ $("select").select2({
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-6">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Key</dt>
|
||||
<dd>
|
||||
@ -197,7 +208,7 @@ $("select").select2({
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-6">
|
||||
<div class="alert alert-warning">
|
||||
<strong>Heads up!</strong>
|
||||
Because browsers assume that the first <code>option</code> in
|
||||
@ -312,7 +323,7 @@ placeholder: {
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-6">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -348,7 +359,7 @@ placeholder: {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-6">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Key</dt>
|
||||
<dd><code>width</code></dd>
|
||||
@ -373,7 +384,7 @@ placeholder: {
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-6">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Key</dt>
|
||||
<dd><code>language</code></dd>
|
||||
@ -392,7 +403,7 @@ placeholder: {
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-6">
|
||||
<p class="alert alert-warning">
|
||||
<strong>Heads up!</strong> When using translations provided by Select2,
|
||||
you must make sure to include the translation file in your page after
|
||||
@ -532,7 +543,7 @@ language: {
|
||||
malicious input provided by users.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
<h2 id="core-options-results">
|
||||
Results
|
||||
</h2>
|
||||
|
||||
@ -819,7 +830,7 @@ matcher: function (params, data) {
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-6">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Key</dt>
|
||||
<dd><code>dropdownParent</code></dd>
|
||||
@ -841,7 +852,7 @@ matcher: function (params, data) {
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-6">
|
||||
<div class="alert alert-warning">
|
||||
<strong>Heads up!</strong>
|
||||
This will cause DOM events to be raised outside of the standard
|
||||
@ -870,7 +881,7 @@ matcher: function (params, data) {
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="col-sm-6">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>Adapter</dt>
|
||||
<dd>
|
||||
@ -884,7 +895,7 @@ matcher: function (params, data) {
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="col-sm-6">
|
||||
<div class="alert alert-warning">
|
||||
<strong>Check your build.</strong> This module is only included in the
|
||||
<a href="index.html#builds-full" class="alert-link">full builds</a> of
|
||||
@ -1130,7 +1141,7 @@ matcher: function (params, data) {
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h2>
|
||||
<h2 id="events-public">
|
||||
Public events
|
||||
</h2>
|
||||
|
||||
@ -1142,7 +1153,7 @@ matcher: function (params, data) {
|
||||
by jQuery.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
<h2 id="events-internal">
|
||||
Internal events
|
||||
</h2>
|
||||
|
||||
@ -1177,7 +1188,7 @@ matcher: function (params, data) {
|
||||
methods must be implemented.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
<h2 id="adapters-all">
|
||||
All adapters
|
||||
</h2>
|
||||
|
||||
@ -1608,7 +1619,12 @@ $.fn.select2.defaults.set("theme", "classic");
|
||||
<code title="select2/compat/inputData">InputData</code>
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-md-3" role="complementary">
|
||||
{% include nav/options.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
11
docs/vendor/css/prettify.css
vendored
11
docs/vendor/css/prettify.css
vendored
@ -8,14 +8,15 @@
|
||||
.pln { color: #48484c; }
|
||||
|
||||
.prettyprint {
|
||||
padding: 8px;
|
||||
padding: 9px 14px;
|
||||
margin-bottom: 14px;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
}
|
||||
.prettyprint.linenums {
|
||||
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
-webkit-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
|
||||
-moz-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
|
||||
box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
@ -23,7 +24,7 @@ ol.linenums {
|
||||
margin: 0;
|
||||
}
|
||||
ol.linenums li {
|
||||
padding-left: 12px;
|
||||
padding-left: 4px;
|
||||
color: #bebec5;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user