I'm using Bootstra 3 nav-tabs component as my primary navigation bar but I cant figure out how to set the active menu based on an class binding.
in side of any button for dropdown navigation to show/hide next menu bar, but the active class doesn't run
can you help me?
Expected: menu can show tab is active, when click button dropdown active tab is active click button
Here what I've been trying:
<li :class="{ active : active_el == 1 }" data-wow-delay="0.14s">
<a #click="activateProfile" data-toggle="tab" aria-expanded="false">profile</a>
</li>
...
activateProfile() {
this.initTabsState()
this.isProfile = true
this.isTabMore = false
}
and here my fiddle
https://jsfiddle.net/dede402/x62p6xwm/
The problem in in your activateProfile() function you have to set active_el = 1 for profile and vice versa. Everything is working fine. you need to modify your activate...() functions as such:
activateProfile() {
// you need to instantiate the `active_el` as well for it to work.
this.active_el = 1
this.initTabsState()
this.isProfile = true
this.isTabMore = false
}
heres a fiddle of the working example.
Related
I'm building a list of v-checkboxes using this code
<div class="row form-group" v-for="(author, key) in authorData" :key="key">
<v-layout row wrap>
<v-flex xs1 sm1 md1 text-xs-center>
<div>
<v-checkbox
label
:key="author.PmPubsAuthorID"
v-model="authorData[key].checked"
v-bind:id="author.PmPubsAuthorID.toString()"
color="success"
#change="authorCBClicked(authorData[key])"
></v-checkbox>
</div>
The PmPubsAuthorID is a number like 1047602 and is a sequential number in the entire database, no 2 records are the same. When I run the code to build the list it works fine and shows a checkbox if the value is true. What I am trying to do is when a checkbox is checked in the
authorCBClicked(author) {
//PmPubsAuthorID = 1047602
// alert(author.PmPubsAuthorID + " " );
// author.checked = false; does not work
this.authorData[author.PmPubsAuthorID].checked = false; does not work
this.authorData["1047602"].checked = false; does not work
this.authorData[1047602].checked = false; does not work
this.authorData[2].checked = false; does work
},
As you can see I have tried various ideas and the only one that seems to work is passing in an ordinal but I have no way of knowing that. Do I need to use an index when building the checkboxes?
The reason: I have a checkbox then when checked calls a dialog box that asks " Are you sure you want to "Add this item to the list" if they say yes I want the original checkbox to be checked but if they say no then the original checkbox needs to be false. I have found that if I try to set the checked status of the calling checkbox to false it does not work but works fine once outside that method. I have passed the key and author information to the new dialog and let it change the checkbox to false if needed
Thanks for the help.
Just pass the key instead of the whole item to your method :
#change="authorCBClicked(key)"
and on your method :
authorCBClicked(key) {
this.authorData[key].checked = !this.authorData[key].checked;
}
Or :
you can do it directly on the template :
#change="author.checked = !author.checked"
Issue: How to select multiple paper-cards and know which ones is selected on user long press/tap on the card.
Description:
I have dynamically generated paper-cards and I render them on the page using template Dom-repeat. At present I have included checkboxes on each paper-card so that the user can select those checkbox associated with the paper-card. That way the user on the screen can select multiple cards on which I can action the next functionality.
I guess the better user experience will be that the user be able to tap or click on the paper-card and be able to hold his finger/mouse for say .5sec and be able to select that card rather than checkbox style selection.
If I am able to get a working code snippet of how a multiple paper-card selection is used then I will be able to provide a better UX for the app.
Current Code Snippet:
(here I am using a paper-icon-button to get the user selected paper-card element).
<template is="dom-repeat" items="{{itemsList}}" as="item">
<paper-card style="float:center; width: 95%" class$="
{{_computeCardColorTran(item.type)}}" data-index$="{{item._id}}">
<paper-icon-button icon="icons:arrow-drop-down" style="color:
grey;" id$="bttn#{{item._id}}" item="[[item]]" on-
tap="doSomeDiffAction">
</paper-icon-button>
<iron-image class="pad"
src="../images/image1"
preload
sizing="contain"
style="" >
</iron-image>
</paper-card>
</template>
What I wish to have (something like below) -->
<template is="dom-repeat" items="{{itemsList}}" as="item">
<paper-card style="float:center; width: 95%" class$="
{{_computeCardColorTran(item.type)}}" data-index$="{{item._id}}"
something-like-user-pressed-longed="
callFunctionUserPressedForLong"
>
<paper-icon-button icon="icons:arrow-drop-down" style="color:
grey;" id$="bttn#{{item._id}}" item="[[item]]" on-
tap="doSomeDiffAction">
</paper-icon-button>
<iron-image class="pad"
src="../images/image1"
preload
sizing="contain"
style="" >
</iron-image>
</paper-card>
</template>
And in script javascript function in dom-module I can extract the paper-card selected
function callFunctionUserPressedForLong(e){
var id = e.model.item._id;
console.log('User pressed for long time on the paper-card = '+ id);
}
function doSomeDiffAction(e){
var id = e.model.item._id;
console.log('Not a long press event. User taped or clicked paper card button. Do different action e.g. open popup. = '+
id);
}
Thanks
You have to use on-down and on-up events from Polymer and watch time diff between these two events yourself.
In example below, on-down and on-up event functions are the same for both components (paper-card and paper-icon-button). Inside the on-down function (_onDown), the current time is saved to variable. Inside on-up method (_onUp) is detection for tap/click on button (if time diff between on-down and on-up is <0.5s and event target is the element with id=bttn#{{item._id}} and long-press somewhere inside paper-card (including paper-icon-button).
_onDown(e) {
this.startTime = Date.now()
}
_onUp(e) {
let id = e.model.item._id;
//stopPropagation because this is otherwise called twice - from paper-card and from paper-icon-button
e.stopPropagation()
let id = "1"
if (Date.now() - this.startTime > 500) {
console.log(`long press somewhere inside paper-card :: id=${id}`);
} else if (e.target.id == `bttn#${id}`) {
console.log(`Not a long press event. User taped or clicked paper card button :: id=${id}`);
}
}
<paper-card on-down="_onDown" on-up="_onUp">
<paper-icon-button on-down="_onDown" on-up="_onUp">Tap me</paper-icon-button>
</paper-card>
I have multiple navigation bars in one page:
<ul class="nav nav-tabs">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav nav-tabs">
<li>Home</li>
<li>About</li>
</ul>
The status of a LI element becomes active when the belonging link was clicked. Problem: It stays active even when the user switches the tab in the other navigation.
It is not possible to switch back in the first navigation as the LI is already active there and can not be clicked. Things get even worse if you add a div.collapse.navbar-collapse in the main navigation bar and a simple link somewhere in the page:
<p><a data-toggle="tab" href="#about">About</a></p>
In many cases different nav (with tabs) will open a new page or interact on difference elements in the page. In your case being active of nav1 only will be a problem when nav2 removes or change the content related to your nav1 active state.
You could try to remove the active states with the tab event, see http://getbootstrap.com/javascript/#tabs. For your example this will be come something like;
$('.nav').on('show.bs.tab', function (e) {
$('.nav .active').removeClass('active');
})
I think the best solution is to set the active class manually in all the navs after each tab switch.
$(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// add active class where nav entry is active
$('.nav a[data-toggle="tab"][href="'+$(e.target).attr("href")+'"]')
.parent().addClass('active');
// remove active class where nav entry is no longer active
$('.nav a[data-toggle="tab"][href!="'+$(e.target).attr("href")+'"]')
.parent().removeClass('active');
});
});
I have a JQuery UI tab dialog that is the detail of a Master-Detail interface. When someone selects an element in the master, the tabs all get their href's populated with URLs giving details of that selected item.
For example, see
http://www.trirand.com/blog/jqgrid/jqgrid.html and browse to Advanced->Master Detail.
But instead of updating a second grid, I'm updating the links of a jquery-ui tabs element like so:
var urls = {
0 : "/url1",
1 : "/url2",
};
jqgrid(....
onSelectRow: function(location_id) {
for (url in urls){
$('#tabs').tabs('url', url , urls[url]+location_id );
}
var selectedTab = $('#tabs').tabs("option", "selected");
$('#tabs').tabs('load', selectedTab);
}
);
$(#tabs.tabs({});
With html like:
<div id="tabs">
<ul>
<li><a id="URL1" href="blank.html">Info</a></li>
<li><a id="URL2" href="blank.html">History</a></li>
</ul>
</div>
I shouldn't have to use a blank.html dummy link. Is there something I can do (when I don't have anything selected in the master) that doesn't cause my tabs to cause a fetch and instead just be empty?
If you set the tab to be blank in your coding nothing will appear in it (obviously), but if you need to empty it on page load use this:
$(document).ready(function() {
$('#divID').empty();
});
I have a DataGrid that has items in it. When you right-click on one of the rows, a Dojo Context Menu is displayed with the option to delete that row. If you try to right-click on a blank area of the DataGrid, the context menu is NOT displayed.... BUT, if you first right click on a row, and then click the Cancel menu option (which does nothing) or if you left-click somewhere else on the page (which hides the Context Menu) and the go to right click on a blank area of the DataGrid, the Context Menu IS displayed and if you click the Delete Item option in the Context Menu, it removes the last item you right clicked on.
Why is it allowing the context menu to show when you right click in a blank area of the DataGrid but only AFTER you've already right clicked on a item in the DataGrid?
Any tips would be appreciated. Here is my code so far:
var selectedItem; // This has to be declared "globally" outside of any functions
function onRowContextMenuFunc(e) {
grid5_rowMenu.bindDomNode(e.grid.domNode);
selectedItem = e.grid.getItem(e.rowIndex);
}
function gridRowContextMenu_onClick(e) {
store3.deleteItem(selectedItem);
}
.
<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Delete</div>
<div dojoType="dijit.MenuItem">Cancel</div>
</div>
.
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenuFunc"></div>
Well, I'm not exactly sure why it's allowing the context menu to show when right clicking in a blank area only after first right clicking on an item, but I did come up with a work around to fix my root problem: Right clicking on a row item in a data grid, then clicking off to hide the context menu, then right clicking in a blank area of the data grid and selecting a menu item causes the rowIndex of the first right click to be passed
Here is my code; I hope this helps anyone in the future which has the same problem:
var selectedItem;
function onRowContextMenu(e) {
grid5_rowMenu.bindDomNode(e.grid.domNode);
selectedItem = e.grid.getItem(e.rowIndex);
}
function gridRowContextMenuExecute(task) {
if((task == "remove") && (selectedItem != null)) {
store3.deleteItem(selectedItem);
}
else {
selectedItem = null;
}
}
.
<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;" onBlur="gridRowContextMenuExecute('cancel')">
<div dojoType="dijit.MenuItem" onMouseDown="gridRowContextMenuExecute('remove')">Remove from Transaction</div>
<div dojoType="dijit.MenuItem">Cancel</div>
</div>
.
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenu"></div>
grid5_rowMenu is a menu.
e.grid.domNode is the DOM node of the datagrid.
*grid5_rowMenu.bindDomNode(e.grid.domNode);*
It is : give the context menu to the grid(anywhere inside the DOM node).
Because the content in datagrid changes allways, so it is not easy to assign the menu to the element inside the grid.
If your grid does not change its contents, you can do like this:
*grid5_rowMenu.bindDomNode(e.target.parentElement);*