A question about jquery UI widgets. Is there a way to get them without all the bloat of CSS that they carry and render out ? I'm having a complete mess with tabs rendering all those jquery-ui-widget, jquery-ui-panel etc. etc. classes.
This guy here does it somehow
http://www.davereederdesign.com/post/2010/04/23/Tabs-with-Memory.aspx
?
He doesn't use the JQuery Tab widget.
I know this as an old post, but I'm having a similar problem applying UI widgets to an already very heavy website. If you inspected the widget in Firebug you might be able to only grab the rules that the widget uses and create a custom CSS file to apply to it. I'm going to try this when I'm back at work tomorrow and I'll report back on my progress.
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.
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
I am using jquery mobile and custom i18n functionality. When the user changes the language from the settings I want to remove the existing pages and put them again into the DOM (I am using Handlebars.js so the new pages will be shown in the new language).
What is the proper way to accomplish this? Simply removing the pages with .remove() and then appending them to the DOM is definitely not the way to go - the history gets broken, the pages don't get enhanced and I'm not even sure if it is possible to change the current page this way.
Is this even possible or should I consider refactoring my i18n so it doesn't require refreshing the whole DOM?
I want to ba able to disable all ui classes and html formatting on every page and still be able to use transitions, load pages via ajax, etc...
I looked through the Jquery Mobile documentation and $.mobile js object but could not seem to find anything.
If anyone knows would be really helpful :)
Download builder: In the works
Now that we’ve decoupled most of the UI widgets, we’ve set the stage
for there to be a download builder. This will let you build a custom
version of jQuery Mobile to only include the parts you need. For
example, you could just use the core files to add Ajax-based
navigation with pushState and leverage some of the touch events and
other utilities with a very lightweight build (roughly 11k). Or, you
could add in specific UI widgets like form elements, listviews, etc.
to create an optimized build. We’re aiming to have a download builder
tool as part of 1.0.
Source:
http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/
I have used a tutorial to create a widget for my site.
This widget now needs to be dropped into a complex page with existing CSS rules on important tags like *, body, ul, and li.
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
Is there a way to drop in this widget (currently a separate page with html, css, and javascript) into my webpage without the webpage applying all of its own CSS on top?
The easiest way would be to use an iframe.
If you want an embedded widget, the wisest thing to do is to specify the CSS properties inline in the widget's markup. It's bad practice usually, but is the right thing here.
Check out for example what the Facebook Profile badge (you need to be a Facebook user to see it) looks like:
<!-- Facebook Badge START -->Pekka Gaiser<br/><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /><br/>Create Your Badge<!-- Facebook Badge END -->
They are very likely to have done a lot of testing on this, so the CSS properties they set in their code, I would recommend to set in your widget, too.
It can be done with an IFrame, but I wouldn't reccomend that. IFrames are messy and they usually don't work as expected. Some browsers block them, some don't support them at all, and interacting with the page they're in from the IFrame page is really hard.
The most clean way is by wrapping the widget in an extra div with an id like widgetwrapper. Then prefix every css rule with #widgetwrapper [space]. That way, the css from the widget won't affect the rest of the page. Make sure you put the css for the widget last in the css. If there's still page rules messing with your widget, overwrite them in the widget css.