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"
As per attached image '7' tabs are there.
for each tab the code is as follow. The nav tag contains 7 anchor tags.
<nav id="tblDetailsLinks" class="nav modal-patient-navtabs" xpath="1">
<a href="#" onclick="objDetail.SelectTab(this, '745'); return false;" name="DetailTabLink" id="tabCases" class="nav-link modal-patient-navtabs-tab TabWidthCss" data-name="CaseManagement" data-toggle="tab" role="tab" aria-controls="Cases" aria-selected="false" style="width: 12.5%; text-align: center;">
CASES
</a>
</a>
<a href="#" onclick="objDetail.SelectTab(this, '745'); return false;" name="DetailTabLink" id="tabIntake" class="nav-link modal-patient-navtabs-tab TabWidthCss" data-name="Intake" data-toggle="tab" role="tab" aria-controls="Intake" aria-selected="false" style="width: 12.5%; text-align: center; display: none;">
INTAKE
</a>
I have to click on each and every link and just wanted to verify whether the data has been displayed or not. I have tried with the following code:
public void SecondaryDetails() throws IOException, Exception {
for(int i=0; i<tabOptionsList.size(); i++)
{
tabOptionsList.get(i).click();
Thread.sleep(3000);
if(tabOptionsList.get(i).isDisplayed())
{
System.out.println(tabOptionsList.get(i).getText() + " details has been displayed");
}
else {
System.out.println("Clicked but details has been not displayed");
softAssert.fail("Failing as tab option has been not displayed");}
softAssert.assertAll();
}
}
On every click its showing completely different data, nothing common on each click which i can mention in above code like contains text() something like.
The code is running fine clicking on each and every tab and displays the data. My question is "my above code is right to verify whether the data has been displayed on screen for all tab options after clicking on each tab/link it. Please note its also not opening a new page after every click.[![https://i.stack.imgur.com/PovCK.png] Any help will be appreciated.
In the following code (react isn't important here), I'm using the bootstrapV4 class "text-sm-right". It works perfectly for my <button>, but it doesn't for my post.categories <span> which remain on the left. I can't make it work and I don't explain it. Is someone having an explanation ?
renderPosts() {
return this.props.posts.map((post) => {
return (
<li className="list-group-item" key={post.id}>
<span className="text-sm-right">{post.categories}</span>
<strong>{post.title}</strong>
</li>
);
});
}
render() {
return (
<div>
<div className="text-sm-right post-new-button">
<Link to="/posts/new" className="btn btn-primary">Add post</Link>
</div>
<h3>Posts</h3>
<ul className="list-group">
{this.renderPosts()}
</ul>
</div>
);
}
Here is a screenshot of the rendered site, button positioned as wanted but categories remaining on the left...
.list-group-item has display: flex by default. This means that all you have to do is to add justify-content-between class to your <li> and move your declaration one line bottom.
Your renderPosts method should look as follow:
renderPosts() {
return this.props.posts.map((post) => {
return (
<li className="list-group-item justify-content-between" key={post.id}>
<strong>{post.title}</strong>
<span>{post.categories}</span>
</li>
);
});
}
You can find an example of this approach on bootstrap documentation
I've written a on click function to show a simple dojo dialog, but instead it shows
NO_FAST_DRAW = false
This actually works in Nexus 4, 5 and other devices - but not in Samsung Galaxy S2.
on(dojo.byId("send_email"), "click", function()
{
console.log("emailClicked1");
dijit.registry.byId("emailDialog").show();
dojo.byId("emailsText").value="";
dojo.byId("dialogFlag").value="emailDialog";
console.log("emailClicked2");
});
I can see the console email Clicked1 and 2 but not able to see the dialog as well in UI.
<div id="emailDialog" data-dojo-type="dojox.mobile.SimpleDialog">
<form id="emailDialogForm">
<div id="emailDialogText">
<p class="blue_text" style="text-align: left;">To:</p>
<input id="emailsText" type="email"
style="line-height: 2em; width: 95%; margin: 3px; border: none; padding: 2px; font-size: 0.65em;"
placeholder="Enter email ID (Separate multiple IDs by ,)" />
</div>
<div class="button_grid">
<input type="submit" id="submitEmail" value="Send" /> <input
type="button" id="cancelEmail" value="Cancel" />
</div>
</form>
</div>
In the onclick function handler, "show()" action of dialog is asynchronous. So, any code that deals with the content of the dialog, needs to be done only after the show() is completed. i.e, the deferred action needs to be handled.
console.log("emailClicked1");
var def = dijit.registry.byId("emailDialog").show();
if(def) {
def.then(function(success) {
dojo.byId("emailsText").value="";
});
}
dojo.byId("dialogFlag").value="emailDialog";
console.log("emailClicked2");
I am learning you to use Jquery Mobile, and I have been combining several codes in order to make a list using listview where I can delete and item from the list or modify the position of the selected item into the list.
First of all I use the delete example from the jquery mobile help and add a extra button for testing purposes in the page footer in order to add a dummy item into the list. Up to here it works partially. If I do not click in a previous predefined list delete item, my adding function will do not work. But If I click first in the delete icon and then click my adding button this works however the new item delete button do not have enabled the delete button click event. Can any of you have an idea or suggestion how I can resolve this. Thanks in adavance and here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swipe list - jQuery Mobile Demos</title>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css">
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/css/jqm-demos.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/js/jquery.mobile.demos.js"></script>
<script src="http://jquerymobile.com/demos/1.3.0-beta.1/js/jquery.mobile-1.3.0-beta.1.js"></script>
<script>
$( document ).on( "pageinit", "#demo-page", function() {
// Swipe to remove list item
$( document ).on( "swipeleft swiperight", "#list li.ui-li", function( event ) {
var listitem = $( this ),
// These are the classnames used for the CSS transition
dir = event.type === "swipeleft" ? "left" : "right",
// Check if the browser supports the transform (3D) CSS transition
transition = $.support.cssTransform3d ? dir : false;
confirmAndDelete( listitem, transition );
});
// If it's not a touch device...
if ( ! $.mobile.support.touch ) {
// Remove the class that is used to hide the delete button on touch devices
$( "#list" ).removeClass( "touch" );
// Click delete split-button to remove list item
$( ".delete" ).on( "click", function() {
var listitem = $( this ).parent( "li.ui-li" );
confirmAndDelete( listitem );
});
}
function confirmAndDelete( listitem, transition ) {
// Highlight the list item that will be removed
listitem.addClass( "ui-btn-down-d" );
// Inject topic in confirmation popup after removing any previous injected topics
$( "#confirm .topic" ).remove();
listitem.find( ".topic" ).clone().insertAfter( "#question" );
// Show the confirmation popup
$( "#confirm" ).popup( "open" );
// Proceed when the user confirms
$( "#confirm #yes" ).on( "click", function() {
// Remove with a transition
if ( transition ) {
listitem
// Remove the highlight
.removeClass( "ui-btn-down-d" )
// Add the class for the transition direction
.addClass( transition )
// When the transition is done...
.on( "webkitTransitionEnd transitionend otransitionend", function() {
// ...the list item will be removed
listitem.remove();
// ...the list will be refreshed and the temporary class for border styling removed
$( "#list" ).listview( "refresh" ).find( ".ui-li.border" ).removeClass( "border" );
})
// During the transition the previous list item should get bottom border
.prev( "li.ui-li" ).addClass( "border" );
}
// If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list
else {
listitem.remove();
$( "#list" ).listview( "refresh" );
}
});
// Remove active state and unbind when the cancel button is clicked
$( "#confirm #cancel" ).on( "click", function() {
listitem.removeClass( "ui-btn-down-d" );
$( "#confirm #yes" ).off();
});
$("#btn-agre").click(function(listitem){
$("#list").append('<li><h3>Agregado</h3><p class="topic"><strong>Re: Agregado</strong></p><p>veamos si funciona en la hora y cosa adecuada</p><p class="ui-li-aside"><strong>4:48</strong>PM</p>Delete</li>');
$( "#list" ).listview( "refresh" );
});
}
});
</script>
<style>
/* Left transition */
li.ui-li.left {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(-100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(-100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(-100%);
transition: transform 250ms ease;
transform: translateX(-100%);
border-top-width: 0; /* We switch to border bottom on previous list item */
border-right-width: 1px;
}
/* Right transition */
li.ui-li.right {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(100%);
transition: transform 250ms ease;
transform: translateX(100%);
border-top-width: 0; /* We switch to border bottom on previous list item */
border-left-width: 1px;
}
/* Border bottom for the previous list item during the transition*/
li.ui-li.border {
border-bottom-width: 1px;
}
/* Hide the delete button on touch devices */
.touch .delete {
display: none;
}
.touch .ui-link-inherit {
padding-right: 15px !important;
}
/* Custom styling for the popup */
#confirm {
border: 1px solid;
border-color: #044062; /* Fallback for older browsers */
border-color: rgba(4,64,98,.4);
background: #456f9a; /* Fallback for older browsers */
background: rgba(69,111,154,.8);
-moz-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
-webkit-box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
box-shadow: 0 2px 6px rgba(69,111,154,.5), inset 0 1px rgba(255,255,255,.3), inset 0 6px rgba(255,255,255,.1), inset 0 10px 20px rgba(255,255,255,.25), inset 0 -15px 30px rgba(69,111,154,.3);
max-width: 250px;
}
#confirm p {
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
margin-bottom: .75em;
}
/* Make the buttons inherit the popup border-radius (.ui-corner-all) */
#confirm div, #confirm .ui-btn-corner-all {
-webkit-border-radius: inherit;
border-radius: inherit;
}
#confirm #cancel {
background-image: none;
}
#confirm .topic.ui-li-desc {
font-size: inherit; /* The cloned topic will have class ui-li-desc so we negate the font-size settings of this class */
text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="demo-page" data-title="Inbox" data-theme="d">
<!--
NOTE: If you modify this page make sure you copy your modifications over to
#sample-page below so that your modifications will be reflected in the source
code view
-->
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="gear" data-split-theme="d" data-inset="true">
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
Delete
</li>
</ul>
<div data-role="footer" data-position="fixed" data-theme="b">
<a id="btn-agre" data-role="button" data-shadow="false" data-theme="b" data-icon="gear" >agregar</a>
</div>
</div><!-- /content -->
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
<a id="cancel" href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">cerrar</a>
<p id="question">Are you sure you want to delete</p>
<a id="btn-arriba" data-role="button" data-shadow="false" data-theme="b" data-rel="back" data-icon="arrow-u" >subir</a>
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c">
<a id="yes" data-icon="delete" data-role="button" data-shadow="false" data-theme="d" data-iconpos="notext" data-rel="back" data-align="right">eliminar</a>
</div>
</div>
<a id="btn-bajar" data-role="button" data-shadow="false" data-theme="b" data-rel="back" data-icon="arrow-d" >bajar</a>
</div><!-- /popup -->
</div><!-- /page -->
<div data-role="page" id="sample-page" data-title="Inbox" data-theme="d">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
Back
Refresh
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="delete" data-split-theme="d">
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Avery Walker</h3>
<p class="topic"><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Amazon.com</h3>
<p class="topic"><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Mike Taylor</h3>
<p class="topic"><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Redfin</h3>
<p class="topic"><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Angela Smith</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>1:24</strong>PM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Stephen Weber</h3>
<p class="topic"><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>jQuery Team</h3>
<p class="topic"><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
Delete
</li>
</ul>
</div><!-- /content -->
<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
<p id="question">Are you sure you want to delete</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a id="yes" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Yes</a>
</div>
<div class="ui-block-b">
<a id="cancel" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Cancel</a>
</div>
</div>
</div><!-- /popup -->
</div><!-- /page -->
<div data-role="page" id="demo-mail" data-title="Demo" data-theme="d">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Demo</h1>
Back
</div><!-- /header -->
<div data-role="content">
<p>This is just a landing page for demo purposes.</p>
<p>Back</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
To add to a listview it is very simple, just use the .append method on whatever DOM element where the append method would take markup as its parameter.
Eg.
$('div').append("<h1>Hello World</h1>");