I was able to use the dialog, but need a typical modal dialog which has the current page in the background and the dialog is on top of the current screen.
The default dialog seems to take the whole screen and the current page is gone with the mobile.changepage call to display the dialog. Even if there was a way to adjust the height and width of the dialog it still wont serve the purpose since the previous page is already gone.
I believe there are some plugins, but I'm wondering if there is one which comes with the default library (1.0 final version) or if there is a way to create one using the library without a lot of coding if it is possible.
At this moment,this support is not there in JQM 1.0 library.But this feature is going to be there in the 1.2 version as per the JQM blog http://jquerymobile.com/blog/ . In the meanwhile you can check http://filamentgroup.com/tests/popup/docs/pages/popup/index.html to see a rough preview.May be you can check the source code and see if it is possible to do so in JQM 1.0
Hope that helps.
Good Luck!!
Related
I wonder if you can create screen effects (such as how to display the button, customize a modal or to flash background colors of a datatable for example) to my page created in JSF Pure (ie, without using Primefaces, RichFaces, and the like). If so, please indicate me sites and / or tutorials where I can check this job, because I researched on google and have not had success.
Grateful for the attention!
As suggested by friend Kukeltje, I will apply the JavaScript / JQuery in my project.
Thank you!!!
I have a requirement to support push-style and overlay panels with variable widths in my desktop webapp and jQuery mobile comes so close, except for the lack of variable panel widths.
I have seen various answers on StackOverflow explaining how to override all the CSS properties to change the width globally for all panels, but I need to specify a different width for individual panels.
Is this possible in jQuery Mobile? If not, I would be interested to know if this is an issue with JQM itself or a technical limitation in general related to the way CSS transitions work maybe?
At this point it is not possible, at least not easily, you will need to heavily modify CSS to make it work. But to ask your question you can have panels with a varying width. If you need an example leave me a comment and I will make you one.
Or if you want to wait a bit, next jQuery Mobile version 1.4 will have this by default. Unfortunately alpha 1.4 will come out in next few days, so stable version will come in 1-1-5 months. If you are not ready to wait I will create you a working example with jQuery Mobile 1.3.2.
EDIT :
My bad, 1.4 alpha is out: http://jquerymobile.com/blog/2013/07/25/announcing-jquery-mobile-1-4-0-alpha/
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">
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 the new BrowserField2 in BlackBerry OS5 to display HTML content in my app. There are 3 options available for navigation through links in that content.
CURSOR navigation uses a block cursor and actually moves through the characters of the page. Not very useful for me.
POINTER navigation uses a mouse like pointer that you move around the screen and hover over elements. This could work but there is a bug however in that the browser field captures navigation and never lets go so this mode is effectively broken if you share a screen with any other managers. Once your focus enters the browser field you cannot move focus back out and into neighboring fields. RIM has acknowledged the bug but has no work around.
NONE which is for custom navigation but they offer no explanation as to how you would do this.
What I ideally want is to simply have trackpad movements move the focus through the links and highlight them. Then a click would activate the link. I assume I would select the NONE option above and implement my own focus navigation but I am not clear how this can be accomplished with the new APIs.
Is anyone familiar with the new browser2 component could give some guidance?
Thanks!
There's a workaroudn to getting back the focus out of the BrowserField using the NAVIGATION_POINTER.
I found it in this thread:
http://supportforums.blackberry.com/t5/Java-Development/BrowserField-2-Navigation-Mode/td-p/632172
"farahh" posted this:
I found out a hack..
with the navigation set to pointer mode, a click outside the browserfield manager invokes Manager.invokeAction(int). I used the getFieldWithFocus to verify which field has focus and then switch the focus to something else.
Cheers.
Nahuel
PD: i havent found out how to get the behaviour you want, i need that as well so if you got it working please let me know, its kinda urgent in my project =(
I actually reverted back to the older browser1 (OS4) component because the navigation problems in browserField2 (OS5) were a deal breaker for me. Luckily the OS4 browser does everything I need in terms of functionality and it has the exact navigation behavior I need and there are no focus problems mixing it with other views.