I would like to add tabs and modal window widgets all over my website. Both widgets will vary in appearance depending on the page but functionality will be the same.
I found that JQuery UI provides both tabs and modal widgets. I also found various custom JQuery widgets such as modal window by Eric Martin http://www.ericmmartin.com/projects/simplemodal/ and tab menu by Soh Tanaka http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
I need an expert opinion on whether its better to use JQuery UI or custom JQuery Widgets.
Whichever you prefer. If you're building a website, you can just go with custom plugins. The advantage is that you can pick anything you like, anything that behaves in the exact way you had in mind.
However, if you're building a web application or you need loads of different widgets on a page, it's best to use jQuery UI or some other full widget framework. You can really benefit from the consistency, it will make your life much easier to get those different widgets interact with each other in a logical way, with the least possible coding. All widgets use consistent naming of properties, methods and events, you will spend less time reading the documentation and more time fleshing out your application. You can even use themeroller to make a custom theme to match the rest of your site, none of the widgets will look out-of-place from the rest.
Related
I want to use the q-dialog for a form with about 20 inputs. But in the documentation it is told that it should only be used for small quick things.
From a UI perspective, you can think of Dialogs as a type of floating
modal, which covers only a portion of the screen. This means Dialogs
should only be used for quick user actions, like verifying a password,
getting a short App notification or selecting an option or options
quickly.
What should I use instead of Dialog for my modal forms ?
Quasar is a cross-platform framework. Its UI components are meant to be used for desktop and mobile devices. If you put a lot of child UI elements inside a Dialog on mobile devices, it won't fit in screen size and the whole idea of a dialog would fail. Thus, it's better if you make a dedicated view for your form with 20 inputs.
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
jQuery mobile 1.2 alpha introduces Popups while it already has a similar widget, called Dialogs. They both seem very similar in nature.
What are the technical differences between Popups and Dialogs?
What Popups can do (any practical usecase as example preferred) that is impossible with Dialogs?
They are quite different beast. Here is my opinion based on my limited experience.
Dialogues
Dialogues take over the page, they contain a fullscreen dark background to make the "dialog" appear to have replaced the page.
Any page can be presented as a dialog by adding the data-rel="dialog" attribute to the page anchor link.
Like pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.
Can be chained.
Popups
Displays within the current page, and are probably more similar to the functionality commonly referred to as modals or lightboxes.
Can't be chained.
Popups are probably more suited for alerts, tooltips, small yes/no ok/cancel messages, making a thumbnail popup into a larger image, small ajax forms(newsletter, login, post a comment) etc. Useful when you don't want to overload the page with information, and only want to reveal certain functionality to users when they need or request it.
Dialogues on the other hand could be used in situations where you need to convey a lot of information (terms and conditions acceptance screen, etc), or when you really want to emphasis an alert, menu, the choice a user has, etc. Dialogues kind of break the flow of a page so should be used more cautiously.
One neat feature of the popups is that they can be used as overlay panels, which could be used to create a menu that slides in from the side of the screen, not too dissimilar to the menu in the Facebooks iphone application.
At the end of the day, either could be used, and neither is right or wrong, a lot of it comes down to personal preference, and how you want your application to flow.
One important difference is Popups appear in the same page as an element, where as dialogue is a different page in all and the background is blank.
SO I have a select box that I fill dynamically. I discovered that once the SELECT gets longer than the page, it automatically becomes a dialog listview.... which is TERRIBLE!
When this happens, the page refreshes when the dialog is closed and my whole page starts over....
Has anyone experienced that and do you know how to shut it off?
Thanks!
Todd
You could use the native look and feel?
http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all-native.html
Native form elements & buttons Although the framework automatically enhances form elements and buttons into touch input
optimized controls to streamline development, it's easy to tell jQuery
Mobile to leave these elements alone so the standard, native control
can be used instead.
Adding the data-role="none" attribute to any form or button element
tells the framework to not apply any enhanced styles or scripting. The
examples below all have this attribute in place to demonstrate the
effect. You may need to write custom styles to lay out your form
controls because we try to leave all the default styling intact.
I am using a custom master page for branding, but the way I have designed it makes popup dialogs (like new item for lists) look terrible. I know I could probably change the design to make it work, but that would break the actual page (which for the moment looks perfect just the way it is).
My question therefore is this:
Is it possible to change the masterpage only for dialogs and popups?
The standard v4.master page looks just fine for dialogs when using my custom theme so branding is not such a big deal here.
I ended up messing with the design instead. This gave a satisfactory result.