I have a popup menu like this:
Menu
<div data-role="popup" class="popup" id="MenuBeobListe" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Menü:</li>
<li class="admin"><a class="menu_artengruppen_importieren" href="#">Artengruppen importieren</a></li>
<li class="admin"><a class="menu_arten_importieren" href="#">Arten importieren</a></li>
<li><a class="menu_hierarchischer_modus" href="#">hierarchischer Modus</a></li>
<li><a class="menu_felder_verwalten" href="#">Felder verwalten</a></li>
<li><a class="menu_beob_exportieren" href="#">Beobachtungen exportieren</a></li>
<li><a class="menu_einstellungen" href="#">Einstellungen</a></li>
<li><a class="menu_neu_anmelden" href="#">neu anmelden</a></li>
</ul>
</div>
When an admin logs in to my app I want to set additional menu items visible. These items are already included in the html and have class "admin". They are initially hidden like this:
.popup .admin {
display: none;
}
After an admin logs in I try to show them like this:
$(".popup").find(".admin").css("display", "block");
$(".popup").popup();
This doesn't work even though if I run
$(".popup").find(".admin").css("display", "block");
directly in the browser, the menu-items for admins are shown.
Can you help please?
Related
New to Bootstrap, CSS and HTML. My question is about side-navigation menu item behavior, particularly for collapsible menu items. I'd like the user to know that some items have sub-items, by showing the menu toggle item next to them. I have tried to use the data-bs-toggle class in Bootstrap to build collapsible menu item in the side nav bar. That works and correctly expands downwards/collapses upwards, except it doesn't have the toggle up/down arrow next to it. So the user doesn't know it is a dropdown menu. If I change my class on the list menu item to dropdown-menu then the sub-menu items overlay on top of the other menu items below, rather than sliding them down and expanding downwards.
Here is my code:
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline sidenavlink">Concepts</span></a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline sidenavlink">Item 1</span>
</li>
<li>
<span class="d-none d-sm-inline sidenavlink">Item 2</span>
</li>
</ul>
</li>
Here is the alternate code that I tried but it doesn't expand like the menu above...
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Resources
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">How To Guide</a></li>
<li><a class="dropdown-item" href="#">List Of All Words</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Contribute A Word</a></li>
</ul>
</li>
So all I'm missing is -- how do I retain my side navigation behavior exactly like it is, but add a toggle icon so the user knows to expand/collapse.
TIA for assistance.
I'm working on mobile app.I want pop-up to appear on click of icon(carat-r). Actually i'm not gettin where to link. Below is my code. Thanks in advance
<div data-role="page" data-theme="a" data-content-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>weekdays</h1>
</div>
<div data-role="tabs" id="tabs">
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true">
<li ><a href="#">
<h2>Sunday</h2>
</a></li>
<li><a href="#">
<h2>monday</h2>
</a></li>
</ul>
</div>
</div>
If you want to launch a popup when the icon is clicked, but still have the rest of the listitem be a regular link, you should use the split button option on the listview:
http://demos.jquerymobile.com/1.4.4/listview/#Splitbuttons
You can set the icon to carat-r using the data-split-icon attribute.
In your markup:
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-inset="true" data-split-icon="carat-r">
<li>
<h2>Sunday</h2>
</li>
</ul>
DEMO
I have problem of dynamically URL in a popup. Here my code:
<!-- content -->
<ul data-role="listview">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li>View details</li>
<li>Share</li>
</ul>
</div><!-- /popup-menu -->
Basically, when I click link on my popup, I'll go to the page where the callee's url is.
So, if I click List 1a the popup shows, then I click View details the page direct me to URL person.php?id=1
How can I do that?
I could just create popup divs multiple times according to the number of the list, but I think it's a waste of DOM object (my last resort if I don't find any elegant solution)
Thanks
Since you actually need to pass only an id of a person to your popup you can achieve your goal this way:
First of all simplify your listview markup and store an id in data-id attribute of an anchor of a listview item
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul>
and add an id tag to 'View Details` anchor in your popup for easier access later on
<li><a id="details" href="#">View details</a></li>
Second on click() event store current id to a globally available variable (let's call it currentId) and programmatically open the popup.
var currentId = 0;
...
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
Third in popupbeforeposition event construct your url and assign it to appropriate anchor.
var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
And finally here is working jsFiddle for you.
I try to create a listview where elements with no children can have an edit button. When the user clicks to this button a popup menu should appear.
Here is the code inside a singe JQM page.
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Colors</h3>
<ul>
<li>Blue
<p class="edit">
<a href="#" onclick="openEditMenu()" data-role="button"
data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a>
</p>
</li>
<li>Orange</li>
<li>Purple</li>
</ul>
</li>
<li><h3>Item</h3>
<p class="edit">
<a href="#" onclick="openEditMenu()" data-role="button"
data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a>
</p></li>
</ul>
</div>
<div data-role="popup" id="popupMenu">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Edit Element</li>
<li>Edit</li>
...
</ul>
</div>
<script>
function openEditMenu() {
$('#popupMenu').popup('open');
}
</script>
On the first level this works like expected. If you navigate to the second level of the nested list, the popup is not shown.
I saw that popups in JQM has to be placed on the same page. It seems that JQM does not find the popup on the subpages of the listview.
Has somebody realized successfully such a solution or it is not possible with the popup feature of JQM 1.2?
On jsfiddle you can find my example code.
Thanks for tipps or suggestions.
As you said in the comments above, from the jQm documentation 'A popup div has to be nested inside the same page as the link.'.
What you could try is clone the popup and attach it to the other page. Then you have re-initialize and open it.
You could try something like:
var nestedLiPage = $(".ui-page-active");
$('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open');
[Solved]
http://jsfiddle.net/F9awk/
function openEditMenu() {
var nestedLiPage = $(".ui-page-active");
$('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open');
}
I am trying to create rounded style checkbox using Jquery mobile. In the below link, under multiple selects, choose option select menu i saw this type of checkbox. Is it possible to create that type of checkbox in listview of JQM?
http://jquerymobile.com/test/docs/forms/selects/custom.html#&ui-state=dialog
Thanks...
<ul data-role="listview" id="options">
<li data-icon="checkbox-off"><a>test</a></li>
<li data-icon="checkbox-on"><a>test</a></li>
</ul>
This code snippet makes round edges for listview, you can have any element inside it:
<ol data-role="listview">
<li class="ui-corner-bottom ui-corner-top" data-theme="a" >List Item 1</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 2</li>
<li class="ui-corner-bottom ui-corner-top" data-theme="a">List Item 3</li>
</ol>
See the Demo here
http://jsfiddle.net/qXr79/5/