update to bootstrap 3.3.7

This commit is contained in:
David Miller
2016-07-25 16:48:58 -04:00
parent 8eee15719f
commit 4eb66ac3b5
83 changed files with 3287 additions and 380 deletions

View File

View File

@@ -13,6 +13,7 @@ $(document).ready(function() {
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" },
{ "data": "extn" }
@@ -46,7 +47,7 @@ Additionally, there are three special class names:
Please [refer to the Responsive manual](//datatables.net/extensions/responsive/) for further details of these options.
This example shows the `salary` column visible on a desktop only - `office` requires a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
This example shows the `salary` column visible on a desktop only - `office` and `age` require a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of `mobile` and `not-mobile` on two different columns would allow information to be formatted suitable for each device type.
@@ -60,6 +61,7 @@ This can be useful if you wish to change the format of the data shown on differe
<th class="all">Name</th>
<th class="min-phone-l">Position</th>
<th class="min-tablet">Office</th>
<th class="min-tablet">Age</th>
<th class="never">Start date</th>
<th class="desktop">Salary</th>
<th class="none">Extn.</th>
@@ -71,6 +73,7 @@ This can be useful if you wish to change the format of the data shown on differe
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>

View File

@@ -6,7 +6,7 @@
position: relative;
min-height: 41px;
}
th span {
span {
display: block;
position: absolute;
left: 0;
@@ -46,7 +46,7 @@ This example shows how Responsive can be used with _complex headers_ (i.e. heade
We use jQuery to find the header cells which have a `colspan` attribute and wrap their contents in a `-tag span` tag. That `-tag span` is then set to `position: absolute;` using `text-overflow: ellipsis`. The result is that the text of the `colspan` cell will reduce automatically to fit the available area based on the contents of the column cells below it.
This functionality is not currently built into Responsive. It might be included in future.
This functionality is not currently built into Responsive. It likely will be for v1.1.
]]></info>

View File

View File

@@ -13,6 +13,7 @@ $(document).ready(function() {
{ "data": "name", className: "all" },
{ "data": "position", className: "min-phone-l" },
{ "data": "office", className: "min-tablet" },
{ "data": "age", className: "min-tablet" },
{ "data": "start_date", className: "never" },
{ "data": "salary", className: "desktop" },
{ "data": "extn", className: "none" }
@@ -39,6 +40,7 @@ This example exactly matches the functionality of the [class control example](cl
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
@@ -50,6 +52,7 @@ This example exactly matches the functionality of the [class control example](cl
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>

0
bower_components/datatables-responsive/examples/index.xml vendored Normal file → Executable file
View File

View File

View File

@@ -20,7 +20,7 @@ $(document).ready(function() {
<info><![CDATA[
Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it finds the `r-init responsive` option or `responsive` class name on the table, as shown in the other examples.
Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it find the `r-init responsive` option or `responsive` class name on the table, as shown in the other examples.
The third way of initialising Responsive is manually creating a new instance using the `$.fn.dataTable.Responsive` class, as shown in this example (the other two methods are provided using this constructor in a `dt-event init` event handler!).

View File

@@ -1,8 +1,15 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display dt-responsive nowrap" order="1" framework="bootstrap">
<dt-example table-type="html-wide" table-class="table table-striped table-hover dt-responsive" order="1">
<css lib="datatables responsive"/>
<js lib="jquery datatables responsive">
<css lib="bootstrap datatables-bootstrap responsive">
body { font-size: 140% }
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</css>
<js lib="jquery datatables responsive datatables-bootstrap">
<![CDATA[
$(document).ready(function() {
@@ -16,7 +23,7 @@ $(document).ready(function() {
<info><![CDATA[
This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) framework providing the styling. The [DataTables / Bootstrap integration](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) framework providing the styling. The [DataTables / Bootstrap integration files](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
Note that the `dt-responsive` class is used to indicate to the extension that it should be enabled on this page, as `responsive` [has special meaning in Bootstrap](http://getbootstrap.com/css/#tables-responsive). The `r-init responsive` option could also be used if required.

View File

@@ -8,9 +8,9 @@
<![CDATA[
$(document).ready(function() {
var table = $('#example').DataTable( {
responsive: true
} );
var table = $('#example').DataTable();
new $.fn.dataTable.Responsive( table );
} );
]]>

View File

@@ -1,8 +1,13 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="2" framework="foundation">
<dt-example table-type="html-wide" table-class="tdisplay responsive" order="2">
<css lib="datatables responsive"/>
<js lib="jquery datatables responsive">
<css lib="foundation datatables-foundation responsive">
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</css>
<js lib="jquery datatables responsive datatables-foundation">
<![CDATA[
$(document).ready(function() {
@@ -16,7 +21,7 @@ $(document).ready(function() {
<info><![CDATA[
This example shows DataTables and the Responsive extension being used with the [Foundation](http://foundation.zurb.com) framework providing the styling. The [DataTables / Foundation integration](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
This example shows DataTables and the Responsive extension being used with the [Foundation](http://foundation.zurb.com) framework providing the styling. The [DataTables / Foundation integration files](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
]]></info>

0
bower_components/datatables-responsive/examples/styling/index.xml vendored Normal file → Executable file
View File

View File

@@ -1,24 +0,0 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="3" framework="jqueryui">
<css lib="datatables responsive"/>
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable();
} );
]]>
</js>
<title lib="Responsive">jQuery UI styling</title>
<info><![CDATA[
This example shows DataTables and Responsive being used with [jQuery UI](http://jqueryui.com/) providing the base styling information.
]]></info>
</dt-example>

View File

@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="5">
<dt-example table-type="html-wide" table-class="display nowrap" order="3">
<css lib="datatables responsive">
div.container { max-width: 1200px }
@@ -12,6 +12,8 @@ $(document).ready(function() {
scrollY: 300,
paging: false
} );
new $.fn.dataTable.Responsive( table );
} );
]]>