how can I add a custom attribute to an html list element?
I tried the following but got markup exception:
WebMarkupContainer con = new WebMarkupContainer("Temp");
con.add(new AttributeAppender("note",true, new Model<String>("Alpha")));
add(con);
HTML:
<li class="segment" wicket:id="Temp">Data Usage</li>
Any suggestions for custom attributes?
Thanks.
You have to use valid markup (note the closing li tag):
<li class="segment" wicket:id="Temp">Data Usage</li>
Related
I have to write a specific selector in jQuery it has to choose all elements in numeric list (with given class "a") which has class "b" and no links inside. And them give them certain class(which give them certain formatting).
So for example for such list:
<ol class="a">
<li>List element</li>
<li class="b">List element</div></li>
<li class="b">List element</a></li>
</ol>
Only the last element should get that class.
Though when I tried to do it like this:
$('ol.a li.b:not(a)').addClass('someclass');
then the second element gets that class too.
I also tried to do this with space before ":not(a)", but this way nothing get that class.
Is this what you're looking for? I think I understood what you were asking. Please let me know if it's not so I can amend my answer. :)
Essentially 'ol.a li.b:not(:has(a))' means to search for an ordered list with a class of a, with any descendent li item with a class of b that doesn't have any children that are an anchor a.
const nonLinks = $('ol.a li.b:not(:has(a))');
nonLinks.addClass("red");
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="a">
<li>First</li>
<li class="b">Second Element</li>
<li class="b">Shouldn't Be Included</li>
</ol>
Can I execute that line of code
nav = request().path().toString()
inside of scala template like index.scala.html
I would like to have that code to check on witch side is user and to mark it on menu
using code like this in main.scala.html:
<li class="#("active".when(nav == "contact"))">
Contacts
</li>
I would recommend you different approach, create tag - resuable template, which takes Integer as an argument,
it will render menu and mark as an active different menuitem depends on value.
#(menuItem: Int)
<ul >
<li #if(menuItem==1){ class="active" } >
////
</li>
<li #if(menuItem==2){ class="active" }>
</li>
<li #if(menuItem==3){ class="active" }>
///
</li>
</ul>
from your contact page and any other page, call this tag with corresponding value, #views.html.tags.menu(1)
You can define variables like that if that is your question. If it is not your question than please try to explain your problem in more detail.
#nav = { #request().path().toString() }
I'm trying to implement a simple CSS-based menu in GWT UIBinder, but I'm having some difficulties with one particular part.
The menu has two main-level items: "New session" and "Current sessions." When the user clicks "New session", a new list item should be added to the sublist under "Current sessions."
Here is the plain HTML version of the menu:
<div id="cssmenu">
<ul>
<li>New Session</li>
<li class="has-sub">Current Sessions
<ul>
<li>Session 1</li>
<li>Session 2</li>
</ul>
</li>
</ul>
</div>
The basic format was pretty simple to implement in UIBinder, but the dynamic sublist is giving me difficulties.
Here's the basic UIBinder template that I came up with:
The XML:
<!-- Menu.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel id="cssmenu" ui:field="menuDiv">
<ul>
<li ui:field="newSessionItem">New Session</li>
<li class="has-sub" ui:field="currentSessionItem">
Current Sessions
<ul id="currentSessionSublist" ui:field="currentSessionSublistItem">
<li>Session 1</li>
<li>Session 2</li>
</ul>
</li>
</ul>
</g:HTMLPanel>
</ui:UiBinder>
The Java:
// Menu.java
public class Menu extends UIObject {
interface MenuBinder extends UiBinder<DivElement, Menu> {}
private static MenuBinder uiBinder = GWT.create(MenuBinder.class);
#UiField HTMLPanel menuDiv;
#UiField LIElement newSessionItem;
#UiField LIElement currentSessionItem;
#UiField UListElement currentSessionSublistItem;
public Menu() {
setElement(uiBinder.createAndBindUi(this));
}
#UiHandler("newSessionItem")
void handleClick(ClickEvent e) {
addCurrentSession();
}
private void addCurrentSession() {
// dynamic LI should be added here
}
}
I'm unsure how to add the dynamic list items in addCurrentSession(). I tried adding a custom widget that compiles to a <li> element, but was unable to add it using RootPanel.get("currentSessionSublist").add(item). I read somewhere that while it's possible to nest both HTML and Widgets inside an HTMLPanel, Widgets cannot be nested within HTML. If this is the case, how would I go about adding items to the sublist? I was hoping to go the widget route so I could later add the ability to remove a specific list item programmatically.
I don't want to use GWT's Menu, MenuItem, etc because those compile to tables.
Try this to dynamically add an item to a list (ordered/unordered):
final LIElement listItem = Document.get().createLIElement();
listItem.setInnerText("your text"); // or setInnerHTML("...")
this.currentSessionSublistItem.appendChild(listItem);
The crux is to go through the HTMLPanel:
menuDiv.add(item, currentSessionSublistItem);
I have a page of nested ULs and LIs, I need to get the last LI of each UL, so I'm doing:
$('li:last-child')
this works great.
But I need to extend this so it gets the last child LI of each UL, where the LI doesn't have a given class (x). For example:
<ul>
<li class="x">1</li>
<li>2</li>
<li class="x">3</li>
<li>4</li>
<li>5</li>
<li class="x">
6
<ul>
<li class="x">7</li>
<li>8</li>
<li class="x">9</li>
<li>10</li>
<li>11</li>
<li class="x">12</li>
<li class="x">13</li>
</ul>
</li>
</ul>
I need to return LI 5 and 11 (as these are the last children within their parent ul that don't have .x)
How can I do this elegantly?
Use the map()(docs) method to create a jQuery object by iterating over the <ul> elements, and returning the last child <li> element without an x class.
Example: http://jsfiddle.net/e2Da7/2/
var lastLisNoX = $('ul').map(function() {
return $(this).children('li:not(.x)').get(-1);
});
EDIT: Updated my jsFiddle example with the HTML that was posted in the question.
Filter out the elements with a class.
$('li:not(.x):last-child')
If the classes are different amongst the li elements, that is if all the elements are not class="x" then something like
$('li[class=""]:last-child')
I am trying to create divs dynamically in a view page of an asp.net mvc project. This is the pseudo code:
<%
foreach (element in Model)
{
create the html div element with Div.id = Model.id
}
%>
I looked in the system.web.mvc.htmlhelper object. It provides support for a lot of html elements but not a div. Any Hints ?
There is no such helper for div. But, you can create your own HTML helper for it.
or simply you can go ahead and create divs in view page as
<%
foreach (element in Model)
{
%>
<div id="<%:element.id%>">
.. some html..
</div>
<%}
%>