Skip to content
Snippets Groups Projects
Commit d1c16f31 authored by Diego Guerra's avatar Diego Guerra
Browse files

updated README, demos fixes

parent 49009073
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
README.md
+ 32
− 4
View file @ d1c16f31
......@@ -92,18 +92,46 @@ var menu = new BootstrapMenu('#button', {
Extended example ([live demo](https://dgoguerra.github.io/bootstrap-menu/demos.html#demo4)):
```html
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
</tr>
<!-- the modal will open right-clicking anywhere inside a .demoTableRow -->
<tr class="demoTableRow" data-row-id="1">
<td>1</td>
<td>First row</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr class="demoTableRow" data-row-id="2">
<td>2</td>
<td>Second row</td>
<td>Nemo enim ipsam voluptatem quia voluptas</td>
</tr>
<tr class="demoTableRow" data-row-id="3">
<td>3</td>
<td>Third row</td>
<td>Ut enim ad minima veniam</td>
</tr>
</table>
```
```js
/* A centralized container of the table data. You could hold the
* row-specific data in a data-whatever-info="" attribute in each
* row, you decide what fetchElementData() does!
*/
var tableRows = {
'1': { name: 'First row', description: 'Lorem ipsum dolor sit amet' },
'2': { name: 'Second row', description: 'Nemo enim ipsam voluptatem quia voluptas' },
'3': { name: 'Third row', description: 'Ut enim ad minima veniam' }
'1': { name: 'First row', isEditable: true, isRemovable: true },
'2': { name: 'Second row', isEditable: true, isRemovable: true },
'3': { name: 'Third row', isEditable: true, isRemovable: true }
};
var menu = new BootstrapMenu('.demo4TableRow', {
var menu = new BootstrapMenu('.demoTableRow', {
/* $rowElem is the jQuery element where the menu was opened. The
* returned value is the `row` argument passed to each function. */
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
......
docs/demos.html
+ 13
− 13
View file @ d1c16f31
......@@ -216,7 +216,7 @@ var menu3 = new BootstrapMenu('#demo2HoverBtn', {
* row-specific data in a data-whatever-info="" attribute in each
* row, you decide what fetchElementData() does!
*/
var tableRows = {
var demo3Rows = {
'1': { name: 'First row', description: 'Lorem ipsum dolor sit amet' },
'2': { name: 'Second row', description: 'Nemo enim ipsam voluptatem quia voluptas' },
'3': { name: 'Third row', description: 'Ut enim ad minima veniam' }
......@@ -229,7 +229,7 @@ var menu = new BootstrapMenu('.demo3TableRow', {
* an argument. */
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
return demo3Rows[rowId];
},
actions: [{
name: 'Edit name',
......@@ -252,7 +252,7 @@ var menu = new BootstrapMenu('.demo3TableRow', {
* row-specific data in a data-whatever-info="" attribute in each
* row, you decide what fetchElementData() does!
*/
var tableRows = {
var demo3Rows = {
'1': { name: 'First row', description: 'Lorem ipsum dolor sit amet' },
'2': { name: 'Second row', description: 'Nemo enim ipsam voluptatem quia voluptas' },
'3': { name: 'Third row', description: 'Ut enim ad minima veniam' }
......@@ -265,7 +265,7 @@ var menu = new BootstrapMenu('.demo3TableRow', {
* an argument. */
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
return demo3Rows[rowId];
},
actions: [{
name: 'Edit name',
......@@ -322,7 +322,7 @@ var menu = new BootstrapMenu('.demo3TableRow', {
</div>
<div class="col-md-12 collapsibleContainer">
<p><a href="#" class="collapsibleBtn">View the code <i class="fa fa-fw fa-chevron-circle-left"></i></a></p>
<pre class="collapsible hidden"><code class="lang-js">var tableRows = {
<pre class="collapsible hidden"><code class="lang-js">var demo4Rows = {
'1': { name: 'First row', isEditable: true, isRemovable: true },
'2': { name: 'Second row', isEditable: false, isRemovable: true },
'3': { name: 'Third row', isEditable: true, isRemovable: false }
......@@ -331,7 +331,7 @@ var menu = new BootstrapMenu('.demo3TableRow', {
var menu = new BootstrapMenu('.demo4TableRow', {
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
return demo4Rows[rowId];
},
/* group actions by their id to make use of separators between
* them in the context menu. Actions not added to any group with
......@@ -400,7 +400,7 @@ var menu = new BootstrapMenu('.demo4TableRow', {
</div>
<script>
var tableRows = {
var demo4Rows = {
'1': { name: 'First row', isEditable: true, isRemovable: true },
'2': { name: 'Second row', isEditable: false, isRemovable: true },
'3': { name: 'Third row', isEditable: true, isRemovable: false }
......@@ -409,7 +409,7 @@ var menu = new BootstrapMenu('.demo4TableRow', {
var menu = new BootstrapMenu('.demo4TableRow', {
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
return demo4Rows[rowId];
},
/* group actions by their id to make use of separators between
* them in the context menu. Actions not added to any group with
......@@ -527,7 +527,7 @@ var menu = new BootstrapMenu('.demo4TableRow', {
<div class="col-md-12 collapsibleContainer">
<p><a href="#" class="collapsibleBtn">View the code <i class="fa fa-fw fa-chevron-circle-left"></i></a></p>
<pre class="collapsible hidden"><code class="lang-js">var tableRows = {
<pre class="collapsible hidden"><code class="lang-js">var demo5Rows = {
'1': { first_name: 'John', last_name: 'Martin', is_editable: true },
'2': { first_name: 'Peter', last_name: 'Roberts', is_editable: true },
'3': { first_name: 'Stuart', last_name: 'Smith', is_editable: false }
......@@ -536,7 +536,7 @@ var menu = new BootstrapMenu('.demo4TableRow', {
var menu = new BootstrapMenu('.demo5TableRow', {
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
return demo5Rows[rowId];
},
actions: [{
name: function(row) {
......@@ -545,7 +545,7 @@ var menu = new BootstrapMenu('.demo5TableRow', {
return 'Edit ' + row.first_name;
}
// basic HTML can also be rendered in the action name
return '<i>Not editable</i>';
return '&lt;i&gt;Not editable&lt;/i&gt;';
},
iconClass: 'fa-pencil',
classNames: function(row) {
......@@ -582,7 +582,7 @@ var menu = new BootstrapMenu('.demo5TableRow', {
</div>
<script>
var tableRows = {
var demo5Rows = {
'1': { first_name: 'John', last_name: 'Martin', is_editable: true },
'2': { first_name: 'Peter', last_name: 'Roberts', is_editable: true },
'3': { first_name: 'Stuart', last_name: 'Smith', is_editable: false }
......@@ -591,7 +591,7 @@ var menu = new BootstrapMenu('.demo5TableRow', {
var menu = new BootstrapMenu('.demo5TableRow', {
fetchElementData: function($rowElem) {
var rowId = $rowElem.data('rowId');
return tableRows[rowId];
return demo5Rows[rowId];
},
actions: [{
name: function(row) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment