I have a navmenu that renders routes via a repeat:
<li repeat.for="row of router.navigation" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
I have a settings option set as so pos: "left".
I want to use the settings option that is set in each of the routes to split the menu items based on whether they are set left or right.
I wanted to enhance the line:
<li repeat.for="row of router.navigation" class="${ row.isActive ? 'link-active' : '' }">
sot it also checks the "pos" value in the settings option of the route. I thought I would use "&&" and check for the left or right option however I am unsure how to structure the code to reflect this.
How would I filter out only those "pos" items set to "left"?
Is this what you're looking for?
<li repeat.for="row of router.navigation"
if.bind="row.settings.pos == 'left'"
class="${ row.isActive ? 'link-active' : '' }">`
Related
Hi there,
I have a problem with my tabs in navbar.
The result I wish:
See the "Home" tab class active by default
Clicking on another tab must to remove active class from the <a> that is already active (at the starting point it is "Home" tab)
Add the same class active to the tab I click on (which also mean that app redirects me)
Keep the clicked tab active
What I've got so far:
I see the "Home" tab set active by default
Clicking on any tab removes class active as I mentioned above and adds the same class to the clicked tab
Redirection happens and "Home" tab returns its default state (becomes active again)
I share my code below:
HTML
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="navigation">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link active" id="home" asp-area="" asp-page="/home/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="declarations" asp-area="" asp-page="/declarations/Index">Declarations</a>
</li>
<li class="nav-item">
<a class="nav-link" id="topics" asp-area="" asp-page="/topics/Index">List of Topics</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contacts" asp-area="" asp-page="/contacts/Index">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="faq" asp-area="" asp-page="/faq/Index">FAQ</a>
</li>
</ul>
</div>
jQuery
$("#navigation .navbar-nav a").click(function() {
$("#navigation .navbar-nav").find("a.active").removeClass("active");
$(this).addClass("active");
localStorage.className = "active";
});
$(document).ready(function() {
stayActive();
});
function stayActive() {
$(this).children().addClass(localStorage.className);
}
Since you are using Razor page, everytime user clicks on a tab, the page will be rendered again on server and then sent back. Therefore I suggest that we set the active class on serverside based on the current route.
Add a new HtmlHelper class
public static class HtmlHelperExtensions
{
public static string ActiveClass(this IHtmlHelper htmlHelper, string route)
{
var routeData = htmlHelper.ViewContext.RouteData;
var pageRoute = routeData.Values["page"].ToString();
return route == pageRoute ? "active" : "";
}
}
Go to your _ViewImports.cshtml and add this import.
Without this, it will not recognize the helper we're about to add in step 3.
#using <Namespace of the class you wrote in step 1, if not already here>
Then your cshtml will be
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="navigation">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link #Html.ActiveClass("/home/Index")" id="home" asp-area="" asp-page="/home/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link #Html.ActiveClass("/declarations/Index")" id="declarations" asp-area="" asp-page="/declarations/Index">Declarations</a>
</li>
...Same for 3 other tabs, make sure that the route you pass in ActiveClass method
...must be the same as the route in asp-page
...If you're afraid of duplication, make some static class to store these routes as constants
</ul>
</div>
In addition to #Nam Le answer I suggest complete solution.
I've found the way how can we use the exception properly.
First of all, as we set active class on serverside based on the current route, we have to add asp-route-routeId="{routeId:int}" in the cshtml we work with.
Secondly, use this jQuery code:
jQuery
$("#navigation .navbar-nav a").click(function() {
$("#navigation .navbar-nav").find("a.active").removeClass("active");
$(this).addClass("active");
localStorage.className = "active";
});
$(document).ready(function() {
stayActive();
});
function stayActive() {
$(this).addClass(localStorage.className);
}
And the last step is to setup "launchUrl": "route/routeId" in the launchSetting.json file to run the application with certain route. This action make our HtmlHelper extension react and add active status to the tab we want.
Hope that here is no any gross mistakes in the solution I suggest :)
UPD: don't forget to add route in cshtml #page "/route/routeId"
How can I switch the selected style easily?
In the template I have a nav:
<ul class="nav">
<li class="nav-item selected" #click="clickLi(0)"><router-link to="/">首页</router-link></li>
<li class="nav-item" #click="clickLi(1)"><router-link to="/data-center">数据中心</router-link></li>
</ul>
in the methods:
clickLi(page_num){
// there I have to clear all the li `selected` style, then add the style to the page_num.
}
in Vue whether there is a better way to realize this effect?
Take a look at Cass and Style Binding Docs
pseudo example below, also added some shorcuts to vue-router to avoid the router-link component, you just can bind the :to to the <li>
<li
v-for="(item, $index) in routes"
#click="selectedIndex = $index"
:class="{'item-selected': $index == selectedIndex}"
:to="item.path">{{ item.name }}</li>
// on component
data() {
return {
selectedIndex: null,
routes: [{path:'/', name: 'home'},{path:'/data-center', name:'data center'}]
}
}
in the data you return a selected_num param:
data() {
return {
selected_num: 0
}
}
in your template:
<ul class="nav">
<li class="nav-item" :class="selected_num===0 ? 'selected' : ''" #click="selected_num=0"><router-link to="/">首页</router-link></li>
<li class="nav-item" :class="selected_num===1 ? 'selected' : ''" #click="selected_num=1"><router-link to="/data-center">数据中心</router-link></li>
</ul>
you even do not need the method.
I have a v-for and I need to change a style according to the return of a given data.
<div id="beerApp">
<ul>
<li v-for="cervejaria in cervejarias">
<span class="CHANGE Conditionally IF cervejaria.name == 'foo' ">{{cervejaria.name}}</span>
</li>
</ul>
</div>
In the angular it is like following:
ng-class="cervejaria.name == 'Foo' ? 'task-cat blue lighten-5 black-text' : 'task-cat green'"
You can use dynamic class binding via v-bind to dynamically change the class as following:
<li v-for="cervejaria in cervejarias">
<span v-bind:class="{'myClass' : cervejaria.name == 'foo'}"> {{cervejaria.name}}</span>
</li>
So in above code, myClass will be applied only if condition cervejaria.name == 'foo' is true.
I am getting Element not clickable error when click on dropdown developed with div tag.
Here the HTML Code:
<div class="form-control btn-group ui-multiselect-dropdown ng-isolate-scope ng-valid ng-valid-schema-form ng-touched" data-role="multiselect" ng-init="open=false" ng-class="{open: open}" autopopulate-to="form" populate-to="form" reload-options="form" schema-name="form" sf-changed="form" schema-validate="form" auto-tab-field="" ng-model="model['notifications']['preferredMedium']" tabindex="15" ng-disabled="form.readonly || (form.enabled && !evalExpr(form.enabled,{ model: model, 'arrayIndex': arrayIndex }))" preselected="model['notifications']['preferredMedium']" options="form.titleMap" name="notifications.preferredMedium" style="">
<div class="ui-multiselect-dropdown-description ng-binding" ng-bind="selectedDescription || 'Select'">Select</div>
<ul class="dropdown-menu" autofocus="autofocus">
<li class="ui-multiselect-dropdown-option" data-value="select-all" data-role="option" ng-click="selectAll()">Check All</li>
<li class="ui-multiselect-dropdown-option" data-value="unselect-all" data-role="option" ng-click="deselectAll();">Uncheck All</li>
<li class="divider"/>
<li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="email"> Email </li>
<li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="mobileNo"> SMS </li>
<li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="phoneNo"> Phone </li>
<li class="ui-multiselect-dropdown-option ng-binding ng-scope" ng-attr-data-checked="{{isChecked(option.value) ? 1 : 0}}" data-type="value" ng-attr-data-value="{{::option.value}}" data-role="option" ng-class="{selected: keyBoardPointer(option.value)}" ng-click="setSelectedItem(option)" ng-repeat="option in options" data-checked="0" data-value="fax"> Fax </li>
</ul>
I created the element as below:
#FindBy(css="div[name='notifications.preferredMedium']")
private WebElement profPrefMedium;
The error coming is as below: "Element is not clickable at point (1172.199951171875, 642.2999877929688).
Other element would receive the click: ".
Any one can help on this.
You can Try using Explicit wait with Expeceted condition as
WebDriverWait myWait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IWebElement buttonToClick = myWait.Until(ExpectedConditions.ElementToBeClickable(By.Id("yourelementid")));
if (buttonToClick != null) buttonToClick.Click();
Finally, I got answer.
It worked with javascriptExecutor.
`jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].click();",profPrefMedium);`
Thanks all for your help in solving my problem.
Please try to MovetoElement(Actions) and then perform the click()
Perhaps this will help you to work around the issue
Code should be formatted as above, as per the guidelines.
I am using aurelia and have a dropdown. It passes the GroupId correctly back into my save function however it isnt selecting anything when editing a item.
return this.dataContext.getBaseContent(this.id)
.then(baseContent => this.baseContent = baseContent);
<dropdown disabled.bind="readonly" options.bind="core.GetVariableGroups()" selected.bind="baseContent.GroupId" />
HTML of dropdown
<div class="chosen-container chosen-container-single" style="width: 877px;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Choose an option...</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off"></div>
<ul class="chosen-results">
<li class="active-result au-target" data-option-array-index="1">Option 1</li>
<li class="active-result au-target" data-option-array-index="2">Option 2</li>
<li class="active-result au-target" data-option-array-index="3">Option 3</li>
</ul>
</div>
</div>
<template>
<select disabled.bind="disabled" class="form-control" data-placeholder.bind="placeholder" value.bind="selected">
<option repeat.for="option of options" value.bind="option.Id" text.bind="option.Name"></option>
</select>
</template>
{"$type":"Admin.Contracts.Pocos.Development.ApplicationVariables.BaseContentModel, Admin.Contracts","Id":441,"GroupId":1,"GroupName":"Option 1"
Ive found the issue, unsure how to solve it. Its already bond the values before it goes off and grab the data from the db. I need it to rebind on 'complete' unsure how to do this though.
This is required: add just below the constructtor, you need to trigger a chosen:update.
selectedChanged(){
// if chosen item isnt = selected then set it
var currentSelected = $('select', this.element).find(':selected').val();
if(currentSelected != this.selected) {
if(this.options.some(o => o.Id == this.selected)){
$('select', this.element).val(this.selected);
$('select', this.element).trigger("chosen:updated");
}
else{
// new selected isnt in list of options..
// set back to prev value
this.selected = currentSelected;
}
}
}