Is there an equivalent of ASP.NET's ModalPopup in jQuery UI?
I'm not sure about ASP.net's implementation, but jQuery DEFINITELY has these types of popups.
Here's your basic popup: http://jqueryui.com/demos/dialog/
Here's a list of plugins that are specifically modal popups: http://plugins.jquery.com/search/node/modal
http://jqueryui.com/demos/dialog/#modal
$( ".selector" ).dialog({ modal: true });
IMO, the jQuery UI popups behave much better than their ASP.Net equivalents (including when used with ASP.Net).
I've a great personal collection of top 15+ jquery modal plugins which really satisfies all our modal pop requirements using jQuery. Please feel free to comment about it.
http://itswadesh.wordpress.com/2011/04/13/15-jquery-popup-modal-dialog-plugins-and-tutorials/
You can try this http://www.ericmmartin.com/projects/simplemodal-demos/. Here variety of Modal Pop ups are available. They all are really awesome. Choose and modify them as per your requirement.
Related
I'm using jQuery mobile to build a simple web app and I want to add a navigation bar common to all pages.
I've found this great example, which led me to this question: do I really need the attribute data-role="navbar"?
Because it adds unnecessary html and css to my code, obligating me to override all these unnecessary styles.
Thank you
I haven't seen the need for data-role="navbar". This page here might help: jQuery Mobile Data Attributes.
It looks like it might only be needed for styling.
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
Ive read alot about jQuery Mobile and Knockout.js not playing nice together. Should I ditch knockout.js for my mobile pages and stick with jquery mobiles javascript to handle my view updates? Is there a better option?
They work fine together. You will need to manually invoke jquery mobile's various widget methods if you are dynamically generating markup with ko's templating or if you are manipulating CSS or other properties. Custom bindings are another valid approach.
$('#myButon').button('refresh');
$('#myListview').listview('refresh');
$("#myCheckboxList").checkboxradio("refresh");
If your markup is static other than text values, it should be no-brainer.
I just started a new project for mobile website, JQM and KO are combined, they are great frameworks and I've never seen any big issue with them.
I'm not very great at javascript and i am having trouble mixing iscroll and jquery mobile. I am testing it on IOS
This is what I have;
http://m.filmrev.me
Both pages are scrolling but not in the correct way.
Would anybody be able to help with this.
Thanks
check this link
http://cubiq.org/dropbox/iscroll4/examples/simple/
And
yours example there are 2 same id for div and 'ul' .
try it change these ids.
ex..
in page, <div id='scroller '>
in page 2 ,
<div id='scroller''>
Have you tried the jQuery Mobile iscroll implementation - see here. This was done specifically for JQM.
However, the JQM devs have started their own scroller, called Overthrow. This is supposed to be more cross-platfrom compared to iscroll. I've used iscroll, scrollview (previous JQM scroller) and am now using Overthrow. Works ok and I found it fairly easy to implement.
I am working on a project that another developer started. They used jQuery UI for some of the effects, and I am not exactly sure how I can use jQuery for my AJAX functions and still have the jQuery UI stuff functional.
Any Suggestions?
Thanks in Advance.
jQuery UI is dependent on jQuery, so assuming the jQuery UI widgets/effects are actually working, you can just go ahead and start using the ajax API.
Like the others have said, jQuery UI uses jQuery and thus jQuery is a dependency. What that also means though, is that it needs to be included AFTER jQuery for jQuery UI to work.
jQueryUI uses jQuery. In other words, jQuery is a dependency for jQueryUI. You will need to include both javascript files