I'm using jquery ui in my page for a dropdown menu. But this file has a large size (198KB) and increased my page load time.
Is there any alternative for this file? or is it possible to edit this file and remove some useless codes?
if you go to this page at jQuery UI:
http://jqueryui.com/download
you can pick what all you need to download. Also, make sure you get the minimized version.
Related
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 struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
I wanna have a dropdown menu like this link: http://datatables.net/release-datatables/examples/basic_init/table_sorting.html
(The one that are right below "Live example" line);
I haven't got many experience of working with jQuery UI, and I guess that result is produced by using it. Could you suggest me a way to create that dropdown.
Thank you.
P/S: that may be ok if it is not using jQuery UI (it's just my guess)
That solution doesn't appear too complex - they've got all the data already, and they're just hiding rows depending on what's selected.
On the other hand, as that's an open source project, you could just download it or use the hosted versions and integrate it on your site, which is probably easier than rolling your own solution.
Ok, got it. This is just default style in Firefox (There's no style applying for it yet). I got this misunderstand due to changing browser.
I only need a JQuery UI Tabs, so I access http://jqueryui.com/download and only select Core, Widget and Tabs 3 check boxs, then download the package jquery-ui-1.8.17.custom.zip
I find that there are many files I needn't in the package, but I don't know how can I delete these files.
And more css\ui-lightness\jquery-ui-1.8.17.custom.css inculde many content I don't need if I only use Tabs, it seems that I can delete the whole folder css\ui-lightness\images and don't cause error.
Go to http://jqueryui.com/download and select core, widget and tabs then download the package.
This is almost the minimum requirement. You only need files which in the js and css folder.
If you remove css\ui-lightness\images when you page using ui-lightness theme you will found that there is little difference between the brightness of the tab labels.
Of course. If you did not using ui-icon, you can remove ui-icons_*.png and rules ui-icon-* on jquery-ui-1.8.17.custom.css
Is there an easy way to change the theme of the jQuery UI by replacing certain files? It seems like I have to keep downloading the entire jQuery UI every time I want to change the theme.
You can build your own theme at http://jqueryui.com/themeroller/.
once you build your theme you will have link both in address bar that you can bookmark and
in your css file jquery-ui-1.8.6.custom.css that you download:
http://jqueryui.com/themeroller/#ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-ser...
for each modification you can use these link instead of start from beginning.
EDIT
by using totalcommander compare tool or winmerge, you just do syncronize existing jquery ui files and the new jquery ui files, if you build new one
The only thing you need to change is the stylesheet and the images.
Referring to this answer, you can find ThemeRoller edit link in your css file. This url contains whole theme settings and this is the best way how migrate/upgrade it.