Is there a (simple) way to get the events functionality of jQuery mobile without any of the UI elements?
This is for upgrading a set of already written UI components to play nice in a mobile environment.
You will have to use data-role=page since those are what the JQM events are fired for.
For rest of the elements within the page you can prevent JQM from styling them using the data-enhance=false flag.
Read the Enhancement Section
From JQM Source
// The current version exposes the following virtual events to jQuery bind methods:
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
You should be able to bind to all these just like any other events using live/on/delegate
Related
i already build a website using bootstrap UI . and now i want implement small portion in that website using jquery mobile .bootstrap use keyword role and jquery mobile use keyword data-role so my question can use bootstrap and jquery mobile together . will it cause and conflict when using both in same page ?
No there is no conflict and you can use the libraries together. Try to load only the Jquery UI components that you need, this can be done by building a custom jQuery UI js file asset. It would include jQuery UI core and components such as the DatePicker and Draggable. That way you keep your 3rd party libraries smaller and thus increase page load speed.
I am working on a experiment of making JQuery mobile custom components with JQuery tmpl(Templating plugin). The component are building using existing JQuerymobile items and also they are programmatic components. I am using plain JavaScript functions and prototypes to create these components. The purpose behind this and I wanted to made a component that can be easily generate pragmatically, i.evar myAccordian = new Accordian() like that.
So is there a more structured way of doing these components(can say widgets) and also the event binding for each.
jQuery Mobile component is created using the $.widget () method defined internally in jQuery Mobile. This method allows to create and initialize the component and add any specific methods.
There are multiple tutorials available which explains the process such as
https://www.hiddentao.com/archives/2011/11/07/how-to-write-a-custom-widget-for-jquery-mobile/
http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH09.php
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 using jQuery 1.6, and jQuery Mobile Beta 1. I have a jQuery Mobile themed button which I initialize as disabled. During a certain event, I'd like to enable the button. The following code is what I'd expect to work:
$("#id").prop("disabled", false);
But it seems like this doesn't propagate up to the jQuery Mobile wrapping DOM elements.
The solution, per the jQuery Mobile docs page Form Plugins Method is as follows:
$('#id').button('enable');