I am trying to build a page with dynamic tabs where if a user clicks on one tab, they are shown the content of that tab. Once they click another tab, the content of the new tab is displayed without refreshing the page.
I know there are a few options out there to use, mainly:
JQuery UI
Tabulous
TabsOnRails
I am not sure which one people have used and which one is "better" both in terms of ease of use/understanding as well as performance. Let me know what you guys think.
Also, since JQuery UI has a lot of other functions like draggable, etc. Is there a way I can install just the tabs portion of JQuery UI using homebrew?
Thanks a lot in advance.
EDIT
Let me clarify, this is for a product site so the tabs are the description and reviews for each individual product. Each product page will have those tabs and the content of each of the tabs changes with different products.
If the content is not a lot, then just show all of them as the page loads, and use jQuery to do the magic.
If the content is a lot, using Ajax or render a new page (with similar tab but different highlited tab) can be useful. I recommend rendering a new page for SEO sake.
I don't know why homebrew comes into picture in this. You can simply follow the examples in jQuery UI, and learn from it. Draggable is something difficult to learn though.
EDIT
Upon asker updates, I would suggest running it as a separate render. For example, in the product URL: http://abc.com/products/1234, then for the tab for reviews: http://abc.com/products/1234/reviews. Just make a new controller for reviews will do.
Related
This appears to be pretty basic but I can't figure it out.
Using a jqm multipage template, I'm trying to allow users to jump from a link one page (id='page1') directly to an image in another page (id='page2').
FIDDLE
It appears I am constrained, by html hyperlinking rules and jqm, to this:
<a href='#page2'>go to image on p2</a>
... which of course jumps the user to the top of page2.
But that's not what I want. I want the user to jump directly to the IMAGE, which is close to the bottom of page2, tagged like so:
<img id='image-id'>
But tagging the link with the image's id (not the page's id), i.e. tagging it like this
<a href='#image-id'>go to image on p2</a>
doesn't work.
I get the feeling I'm missing something very obvious, but can't figure it out.
Any suggestions? Or is this not possible?
I've got a different problem but found this question in my travels... thought I would add an extract from the jquery mobile page:
http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
As the title suggests, I'm looking for a way to make my company's Jira Issue Collector popup draggable. Many users of a particular site we're developing have complained that this feature is overly-cumbersome to use, since one must close the popup to see the underlying page and hence the error that they want to report.
I thought I could simply wrap the generated source in a Kendo UI Window, but alas, there are many supplementary scripts and CSS files that must be loaded for the popup to render correctly. Trying to make the contents of these local to our site has proved to be basically impossible, due to the sheer amount of code they contain, and the fact that the popup is rendered in an iframe.
So how might we be able to go about this? MTIA :-)
Would also like to find an answer to that... I've been trying all the jQuery tricks I could find, to no avail. There are a few feature requests open at Atlassian for similar features, like making the collector window resizable, or making certain fields required. Guess we'll have to wait for a new Jira release ; )
I need a drop down in my Jquery Mobile application where the user can choose US States.
What is the best control to use for this?
I was thinking of using the
ListView
but wasn't sure if there was a better control for this purpose.
Have you looked at the jquery-mobile drop-downs aka as selects? (also look at the page for custom selects).
In fact in the documentation page for the custom selects that I linked to ( the example given is for a drop-down with the US States.
I have a production app that tracks a product catalog. Some customers have huge amounts of products. The app was originally built for smaller numbers of products. As a result, I have select boxes in a few places that absolutely do not work for these customers with lots of products.
What sort of UI element from jQuery can I employ that will allow the selection of a product from a very large list?
I like Chosen.js. It's pretty slick. It's not a jQuery UI component, but it doesn't conflict.
If you're stuck on using jQuery UI for this, I've also had some luck with the jQuery UI SelectMenu plugin. It doesn't have all the features of Chosen, but it at least presents information better a standard select box and is style-able.
if its really jQuery UI you want, then the autocomplete control comes closest
there are variations like the autocomplete with combobox
which might be a good solution for you
Autocomplete. It is part of jQuery UI toolset which makes it nice if you are trying to only have a few JS libs.
You should use jQuery UI autocomplete.
Unobtrusive Fast-filter Dropdown is the best one, as it can handle a rally large number of options, I had a similar issue. I used this plugin
Here is the approach to design this plugin
If you ever tested in IE, Autocomplete will throw an error "the script is running" something of that sort..
You can use SelectBoxIt, a jQueryUI plugin I created to replace the standard HTML select box.
It should work very well for long dropdown lists since I specifically focused on performance for select boxes with thousands of options. Keyboard search and navigation support is also provided.
I need to implement a dialog for a web application (ASP.NET/C#) where users can search and select one or more clients from the company's database.
Actually an existing version is already used (see attached image) and I have to replace it with a new version (it comes from an external legacy software and will be dismissed).
The goal is to provide an intuitive and easy to use GUI, still providing the basic functionalities like: search for a client and add it or remove previously inserted.
My idea would be to develop the dialog with jQuery Dialog plugin and using web methods and Ajax/JSON to interact with them for interacting with the server and the DB. I cannot find a good solution yet for the contacts list, since I would avoid using GridViews or tables, if possible, for listing them.
Does anyone knows if further plugins or best patters exist for develop this UI and its functionalities?
I wanted to have the same in my application. After talking to the users i found that such dialog could easily be replaced by an Autocomplete with Multiple select.
See the jqueryUI demopage here.
If this does not fit your needs i would go with two lists <ol> or <ul>, a pagination plugin and perhaps a search plugin. But haven't done this so far.
Thanks for the hint, indeed for the search I also thought to a autocomplete for make the search easier.
My bigger concerns were about the Add and Remove selected Clients in a "modern" fashion.
I found this MultiSelect plugin that works perfectly for my needs (and maybe it could be useful for yours as well).
Not only it let use Multiselect to add/remove entries, but also have some auto-filtering capabilities when searching the entries. I will try to add this to my solution.