I have a jquery mobile page which has a panel. Inside the panel I have a listview, and on each listitem there is a where I've added a data-rel="close" attribute. I want to be able to close the panel when ever a listitem is clicked.
Note that I also has a binding to angular.
<ul data-role="listview" data-icon="arrow-l" class="ui-icon-alt" data-inset="true" >
<li ng-repeat="task in tasks" >
{{task.Name}}
</li>
</ul>
I've testes on a link outside the listview and it works fine. I'm not sure id angularjs is playing a trick on me here or it is something else.
best regards
Rasmus
Markup
{{task.Name}}
JS
$('#closepanel').on('click', function {} {
$( "#PanelID" ).panel( "close" );
});
Related
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I load a html-partial into a ng-view directiv via a controller in AngularJS. The html-partial looks like this:
<div>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
The problem is that the listview does not get rendered into a jquery-mobile-control. What is wrong?
I got it to work. Here is what I did:
I made a new directive that I append on the ul-element. It waits until the last li-element is rendered, then I call the trigger on the jqueryMobileTpl directive.
app.directive('jqueryMobileTpl', function () {
return {
link: function (scope, elm, attr) {
//elm.trigger('create');
}
};
});
app.directive('repeatDone', function () {
return function (scope, element, attrs) {
// When the last element is rendered
if (scope.$last) {
element.parent().parent().trigger('create');
}
}
});
and
<div jquery-mobile-tpl>
<ul data-role="listview" data-inset="true" data-theme="c" data-ng-repeat="customer in customers | orderBy:'lastName'" repeat-done="" ng-cloak>
<li>{{customer.firstName + ' ' + customer.lastName}}</li>
</ul>
</div>
Thank you #CaioToOn and #Omar !!!
This problem is not related to AngularJs. It happend that jQuery Mobile is not aware of every DOM change, and you need to give it a tip. To adivice jQuery Mobile about the change, you need to trigger a create event on the element.
According to the docs (look at "Enhancing new markup"):
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
So all you got to do is to trigger the create event just after the content has been included.
I'd suggest you to create a directive that simply triggers the event on the templates for you. Something like:
app.directive('jqueryMobileTpl', function() {
return {
link: function(scope, elm, attr) {
elm.trigger('create');
}
};
});
Then you just add this directive to the root element of the template:
<div jquery-mobile-tpl>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
You could make this directive low priority, so if you use other directives that might change the template, this one would wait for all changes before telling jQuery Mobile to render. Working sample here.
I'm using jQuery Mobile and KnockoutJS and can't get the Accordion widget to work. You can find an example of what I'm trying to do here: http://jsfiddle.net/NYTQC/1/. The accordion panels does not expand when clicked. Can anyone explain what I have done wrong and perhaps show how to correct the code? In my real project the observable knockout collection will be updated dynamically via a REST service depending on user actions.
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<!-- ko foreach: collection -->
<div data-role="collapsible">
<h3><span data-bind="text: caption"></span></h3>
<span>TODO</span>
</div>
<!-- /ko -->
</div>
I have the similar problem and found the solution in the following link
http://jsfiddle.net/MauriceG/8QGU5/show/light/
// clean up borders
collapsiblesInSet.each( function() {
$( this ).jqmRemoveData( "collapsible-last" )
.find( $.mobile.collapsible.prototype.options.heading )
.find( "a" ).first()
.removeClass( "ui-corner-top ui-corner-bottom" )
.find( ".ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});
The code accomponied is just a portion of what is required, You just view page source of the attached link and come to your own understanding about how the solution works.
i am using jQuery Mobile Navigation Tabs. i take a common footer for all pages like footer.html, and load this footer on a footer div at run time. this is working good as i want.
here is my code of footer.html
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul id="footertab">
<li id="home"><a href="#page1" data-transition="none" data-icon="tab-home" ></span>Home</a></li>
<li>6</span>Alerts</li>
<li><a href="#page3" data-transition="none" data-icon="tab-services" >Services</a></li>
<li>Learn</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
And i add this footer on run time using this code.
$(document).on('pageinit', function(event){
$(".addfooter").load('footer.html', function(){
$(this).trigger("create");
});
});
this running fine. but i have some issue with this code.it does not show the active tab.
i know that i have to add class='ui-btn-active ui-state-persist' in my selected tab.
but i do not sure that how to add and replace it with java script.
i dont want to use to write this footer at all pages.
for this task i use this code in side my script
$(document).delegate('[data-role="navbar"] a', 'click', function () {
alert("calling tab click");
$(this).addClass('ui-btn-active ui-state-persist');
});
This function call every time when i click any tab. but it does show selected tab.
all tabs are deselected.
How can i solve this problem.
please suggest me
Hello try this code.
$(document).live('pageshow',function(event,ui){
// disable previous selected links
$('[data-role=navbar] a').removeClass("ui-btn-active");
// select link
var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]');
menuLink.addClass("ui-btn-active");
});
I have a list which consists of two sections:
<ul data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
<a href="http://some address" ></a>
</li>
What I would like to do is when the user clicks anywhere in the left-hand section of a row I would like to play an audio file (using the html5 tag) and for the text in this section to be removed and replaced with the audio controls for the playing audio. When the user stops the audio I'd like things to return to as they were.
I'm new to JQuery and JQueryMobile and not sure where to begin with this.
Ideally if it is possible when the audio controls appear it would be great if there could be some sort of flipping animation i.e. such as that section of the row rotates and on one side is the audio controls and on the other is the text.
Is such a thing possible?
TIA
You can nest whatever you want in your li, so you can just put two div containers in there and bind to the appropiate events and show and hide them based on that.
For example:
Markup:
<ul id="parentUL" data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<div class="txtCnt">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
</div>
<div class="audioCnt displayNone">
<h1>Audio Controls</h1>
</div>
<a href="http://some address" ></a>
</li>
</ul>
JavaScript:
$('#parentUL').on('click', '.txtCnt', function () {
$(this).hide().parent().find('.audioCnt').show();
});
$('#parentUL').on('click', '.audioCnt', function () {
$(this).hide().parent().find('.txtCnt').show();
});