On version 3.1 I could see icons on headers embebed in 'controlgroups', now with versions 4.0 or 4.1 they does´n show.
<div data-role='header' data-position='fixed' data-theme='b'>
<div data-role='controlgroup' class='ui-btn-right' data-type='horizontal'>
<a href='#Pag_Audita' class='ui-btn ui-icon-grid ui-btn-inline'>Regs</a>
<a href='#Pag_Info' class='ui-btn ui-icon-gear ui-btn-inline'>Info</a>
<button onclick ='Refresh()' class='ui-btn ui-icon-refresh ui-btn-inline'>Update</button>
</div>
<h1 class='ui-title' role='heading'></h1>
</div>
Is there any deprecation thing that I am missing?
Thanks
You don't need ui-btn-inline in a controlgroup, so remove that and add ui-btn-icon-left or ui-btn-icon-right depending where you want the icon to show:
<div data-role='controlgroup' class='ui-btn-right' data-type='horizontal'>
<a href='#Pag_Audita' class='ui-btn ui-icon-grid ui-btn-icon-left'>Regs</a>
<a href='#Pag_Info' class='ui-btn ui-icon-gear ui-btn-icon-left'>Info</a>
<button onclick ='Refresh()' class='ui-btn ui-icon-refresh ui-btn-icon-left'>Update</button>
</div>
Related
I have an app where I'm using custom svg icons using Materials 'MatIconRegistry'.
The import works fine, but a strange thing is happening when I have multiple icons on a page. For some reason, any icons that following an initial icon end up bing the same as the first, even though they are clearly labeled as another icon.
When I comment out the initial icon, the next instance changes to the one being called by that instance, but then all the following icons then change to that icon.
What could be causing this?
Here is the code:
<mat-sidenav-container>
<mat-sidenav mode="side" opened="true" class="app-sidenav">
<div class="logo-wrapper">
<img
class="menu-logo"
alt="Avocado"
src="./assets/logo.png"
/>
</div>
<div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/"
mat-button
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<div>
<mat-icon svgIcon="dashboard"></mat-icon>
</div>
<div class="button-label">
Dashboard
</div>
</a>
</div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/sessions"
mat-button
routerLinkActive="active"
>
<div>
<mat-icon svgIcon="sessions"></mat-icon>
</div>
<div class="button-label">
Sessions
</div>
</a>
</div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/users"
mat-button
routerLinkActive="active"
>
<div>
<mat-icon svgIcon="users"></mat-icon>
</div>
<div class="button-label">
Users
</div>
</a>
</div>
</div>
</mat-sidenav>
<mat-toolbar class="app-toolbar">
<h2 class="page-title">{{pageTitle}}</h2>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-container>
Hi can you please tell me how to hide and show a div in query mobile.
May be i have two solution use hide and show function.
Or use toggle class ?
here is my fiddle.
http://jsfiddle.net/ravi1989/3LEdJ/2/
I need to show or hide on click of "openclosebutton" .This div
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
<div class="ui-block-e">
close
</div>
</div>
The probem you have is the width of the text field. I suggest you to use a grid layout to achieve the desired effect:
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
</div>
See the documentation here.
I Did do my home work but i cannot get it to work.The Button Styles Are Not Refreshing Please Help.
<div id="qpage" data-role="page">
<div data-role="header">
<a id="exit-quiz" data-role="button" data-icon="arrow-l" >Exit</a>
<h1 id="ques-title">#ques-title</h1></div>
<div data-role="content">
<div class="ui-bar-a" id="ques-timer">
#ques-timer
</div>
<div id="question"><h3>#Question</h3></div>
<div class=".button-set" data-role="controlgroup" id="answerbox">
<a data-role="button" id="answer_1">#answer_1</a>
<a data-role="button" id="answer_2">#answer_2</a>
<a data-role="button" id="answer_3">#answer_3</a>
<a data-role="button" id="answer_4">#answer_4</a>
</div>
<div id="explanation">
</div>
</div>
<div data-role="footer"><h2>Copyright Kaveen</h2></div>
</div>
This is Th Javascript I wrote
$("#subject1").bind('click',function(){
var json = $.get("test.json",function(data){
$("#question").html(data.question);
$("#answer_1").html(data.mcq_1);
$("#answer_2").html(data.mcq_2);
$("#answer_3").html(data.mcq_3);
$("#answer_4").html(data.mcq_4);
});
i did try $( "div[data-role=page]" ).page( "destroy" ).page(); But it wont work Plese Help Me Thank you. JSFIDDLE http://jsfiddle.net/xRTCu/
Try this, it should work:
$("#answer_1").button("refresh");
If that is also not working, try this
$("#answer_1").buttonMarkup();
EDIT: jsfiddle updated http://jsfiddle.net/androdify/xRTCu/4/
Use this:
$("#answer_1 .ui-btn-text").text(data.mcq_1);
Why? Because jquery mobile adds a span around the button which has class="ui-btn-text"
Try $( "div[data-role=page]" ).trigger ("create") if you're using the latest version of jQuery mobile. page was deprecated some versions ago.
If you're using an older version of jQM, then you could use $("[data-role=button]").button().button ("refresh") after you're done appending your JSON data into those buttons.
EDIT
From your fiddle I can see that you're using html() and that's erasing jQM's markup. This is what data-role=button converts your markup:
<a data-role="button" id="answer_1">#answer_1</a>
//becomes
<a data-role="button" id="answer_1" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-first-child ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">mcq wrong</span>
</span>
</a>
So by using html() youre effectively erasing everything inside a. Try searching for ui-btn-text class inside a like this and then run html with your text in it:
$(".ui-btn-text", "#answer_1").html(data.mcq_1);
//OR
$("#answer_1").find(".ui-btn-text").html(data.mcq_1);
Here's your updated demo : http://jsfiddle.net/hungerpain/xRTCu/3/
I have a popup set up on the index.html as follows:
<!-- Choice Popup -->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog-screen"></div>
<div data-role="popup" class="ui-popup-container ui-overlay-a" data-transition="pop" id="choicePopup">
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="slidedown" data-position-to="window" data-arrow="true" data-arrow-sides="t,b,l,r">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h1 class="ui-title" role="heading" aria-level="1">Your decision has been made:</h1>
<h2 align="center" id="choice-p"></h2>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Thanks</span>
</span>
</a>
<a href="#" onclick="eatsome('Food'); return false;" data-role="button" data-inline="true" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Again!</span>
</span>
</a>
</div>
</div>
The problem is, I don't know why its booting on loading, some attribute is triggering it, can anyone find the issue? Thank you
There are several issues with your markup and code:
First of all your markup for the popup looks already jQM-enhanced like being copied from the browser's developer view. Therefore make it normal first. It might look like
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1></h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Your decision has been made:</h3>
<a id="btnThanks" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Thanks</a>
<a id="btnAgain" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Again!</a>
</div>
</div>
Second a popup markup should reside inside the same page as the link that opens it.
<div data-role="page" id="main">
...
<div data-role="popup" id="choicePopup">
...
</div>
</div>
Third use proper jQM events to place your code that manipulates the content.
Forth Stop using onclick and other on* event attributes with jQM. Once again use proper jQM or jQuery events.
So instead of
<a href="#" onclick="eatsome('Food'); return false;" ... >Again!</a>
use
<a id="#btnAgain" href="#" ... >Again!</a>
$("#btnAgain").click(function(){
eatsome('Food');
return false;
});
Fifth After injecting html you need to call trigger('create') on a parent element to let jQM enhance and style the markup that you injected.
var content = '<form>;
...
content += '</form>;
$("div.settings-content").html(content).trigger("create");
And here is working jsFiddle based on your markup. As you can see the popup doesn't pop up on its own. There are two buttons that show how to open the popup declaratively and programmatically. And content for settings page is injected and styled properly.
I want to use some collapsible elements inside a listview in jquery mobile. I can set well the collapsible adding a inside the corresponding part, but when the collapsible is not collapsed, the info of collapsible is not inside the collapsible bubble, how can I fix that to have a bubble that include title and description?
Thanks
<div id="dispositivo" data-role="page" data-theme="c" data-cache="refresh">
<div data-role="content" role="main">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role='list-divider'>Titulo</li>
<form id="form_disp" name="form_disp" method="post" action="test.php">
<li data-role='fieldcontain'>
<a id="estado" name="estado" href="#" data-theme="b" data-role="button" data-inline="true">Boton</a>
<div data-role="content" data-inset="true">
<div data-role="collapsible" data-inset="true">
<h3>Info1</h3>
<p>Ahora estamos viendo el info 1</p>
</div>
<div data-role="collapsible">
<h3>Info 2</h3>
<p>Ahora estamos viendo el info 2</p>
</div>
</div>
<button data-theme="b" id="b_conf_disp" data-role="button" data-inline="true" type="submit">Boton 2</button>
</form>
</ul>
</div>
</div>
I think you missed </li> tag.
For something similar you can try using the plugin I wrote that allows certain listview items to be opened inline within the listview.
The Github Repo