why not make list items collapsible ?
Just a thought - list items http://jquerymobile.com/demos/1.0a2/#docs/lists/index.html already offer so many styling options, including thumbnails, sub text, chevrons at right, inset etc. Instead of having a less-stylable, always indented collapsible http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html, why not allow the general list items to optionally have a collapsible section ? I think that would be simpler and at the same time more general than having a separate collapsible
More button icons: question mark, email, phone...
Please add a question mark icon for buttons. It'll go nicely with Help button which is very popular in web apps. And since this is for mobile web apps, it would be nice to have email and phone icons for links like tel: and mailto: button links. Thx G
Switch between nomal and modal $.mobile.pageLoading()
When we use $.mobile.pageLoading() a nice loading spinner appears. Unfortunately there is no option to make this a modal spinner i.e. a spinner which disabled everything on the background like a modal window does. This can be handy to avoid clicking twice on a button.
Is there a list of all the options for data-* attributes?
Hi all, Is there a list of all the options for data-* attributes? I find that I have to look them up repeatedly, and I'd love to have a reference. There doesn't seem to be a single list for them. Here are the ones I remember off the top of my head: (Newer stuff below) data-role: collapsible, button, page, header, footer data-icon: back (http://jquerymobile.com/test/docs/buttons/buttons-icons.html) data-theme: a, b, c, d, or e Feel free to add more as replies and I'll add them to the top post. List
Can you use SASS for creating the JQMobile CSS theme files?
Hi, I'm wondering whether you have considered creating the UI theme for the new JQmobile using SASS (sass-lang.com). It has been used by Sencha Touch and JQTouch is also planning to recreate their CSS themes using SASS. I think SASS would make it a lot easier to create and maintain custom themes, e.g. that mimic the native UI of a phone. In addition there would be the added benefit of being able to exchange designs between Sencha and JQmobile. What are you're thought on this? Thanks Jay
Better support for dynamically creating/update DOM elements
I've created a rich data communications library in JavaScript for my company. It models our Java based Component API as a remote API in JavaScript. This is great because I'm able to write sophisticated web applications just out of JavaScript, HTML and CSS. Just about everything can be written in the client. With faster JavaScript support for the client, this seems to be the current trend of web development. In particular, this approach works well when developing a truly open web app for a Smart Phone
SplitView
What about SplitView for larger displays like pads?
Pull down to Refresh - touch drag to make server call.
Hi, I was working with jQuery mobile and had thought in my mind to create some sort of UI to make server request. the UI looks like(i tried!!) Twitter app or facebook app refresh style. I have demo running, which uses the jQuery UI drag to accomplish this. Note that this is only proof of concept, UI is working but there is no server call. try it on mobile device. I have tested it on iphone , ipad. click here to see Demo screen shots: Let me know what you think. thanks Project9
Rating control
Would it be an idea to create a mobile rating control which shows up as 5 or 10 stars?
JQM : Touch optimized iPhone-like Horizontal Slider control (screenshots)
Hi, Recently I was working on jQuery mobile and thought of creating a control that looks similar to the one on iphone while you go to app store. since jquery moblie supports touch events, I optimized slider script to support swipe left-right events. Test swipe left and swipe right events on following URL. it works grate on mobile devices. However sliding easing is not smooth. I'm sure any jQuery master will modify script and make it work properly. Here is the test link Demo : jQuery Mobile - Slider
Add an attribute to prevent particular pages from caching
I ran into circumstances where I don't want certain pages in my app to cache. I think there should be an attribute that can be added to any div tag with date-role='page' such as data-cache="false" which would prevent that page from caching. For my solution, I added a 'pagehide' binding in the dom ready event of the root index page for the app: $j("div[data-role*='page']").live('pagehide', function(event, ui) { if ($j(this).children("div[data-role*='content']").is(".command-no-cache"))
Reorder transition animation will increase user experience
Hi, i think one idea behind animated page transition is to increase performance experienced by the user. This will work when silde animation starts immediately after the user clicked on smth. and just showing a progress bar when the content is still not ready after the animation finished. In my opinion JQM does transition animation in wrong order. First, jqm starts the progress bar and if content is ready jqm start the animation. In fact this will extend waiting time. Reordering animation will increase
[jquery mobile] listview accordion Plugin to use with list-divider role optional
jquery mobile listview accordion Plugin 1. import these file <script type="text/javascript" src="js/ext/jquery.mobile.listview.accordion.js"></script> <link rel="stylesheet" href="js/ext/jquery.mobile.listview.accordion.css"/> 2.Format the accordion accordingly <ul data-role="listview" id="listView"> <li data-role="list-divider" class="ui-li-accordion-head">Title name</li> <li> <div class="ui-li-accordion"> <li>contents1</li> <li>contents2</li> <li>contents3</li>
Implementation of: Panel only and content only scroll (with fixed header)
I've implemented panel only and content only scroll, tested on android & iOS (Chrome & Safari browsers) optimized for reveal and push effects body { overflow: hidden; } .ui-panel { top: -1px; } .ui-panel .ui-panel-inner, .ui-panel-wrapper .ui-content { overflow-y: auto; position: absolute; left: 0; right: 0; bottom: 0; top: 1px; -webkit-overflow-scrolling: touch; } .ui-panel-dismiss-open, .ui-panel-page-content-open .ui-content
Toggle edit mode function
When you have a list with items it could be that you want to add a delete button to every row when in edit mode. It could be nice if there was some kind of "edit-mode" flag for a <li/> item which can be toggled by a button. Just a mockup: <ul id="lstItems"> <li>Item 1</li> <li data-role="edit-mode">Item 1 <a href="#">delete</a></li> <li>Item 2</li> <li data-role="edit-mode">Item 2 <a href="#">delete</a></li> .... </ul> <a href="$('#lstItems').toggleEditMode()">Toggle
Different default behaviour on form submits
Hi When a form gets submitted jqm will ajax post the data and change the page url hash. Changing the page url hash is somehow uncomfortable for CRUD apps. Starting updating or creating database entries is more like a self-contained process. I like to hit submit several times, type in values, getting errors, type in better values submitting again and so on until i get a success page at last. Over the hole process i expect the back button pointing to the entry point of the hole update process. I think
Listview accordion plugin
Just add a <div class="ui-li-accordion"></div> to a <li> and it turns the list item into an accordion fold. https://github.com/borismus/jquery-mobile/tree/master/experiments/listview-accordion/
Announcing jQuery Mobile tableview - plugin for responsive HTML table layouts
One thing I have found missing in JQM is a way to handle tabular data. There are some nice plugins available, but none for JQM specifically. I have written a plugin (widget and extension actually) to handle HTML tables in jQuery Mobile. Demo is here: http://www.franckreich.de/jqm/tableview/demo.html Code on Github: https://github.com/frequent/tableview There are two version of tableview (demo/github is the first one). The "no-func" version only handles the appearance of the table. Tables are responsive
styling for read only lists
you guys think the style of the read only lists look a bit too much like they are clickable? maybe add a unique style to the swatch? or a class to the ul to make it possible to override existing styles?
jQuery Mobile - Swipe Up, Down, Left, Right
On a project my team is working on, we need swipeup and swipedown functionality. I have written a short blog entry in how to accomplish that currently using jQuery Mobile 1.0a2. http://developingwithstyle.blogspot.com/2010/11/jquery-mobile-swipe-up-down-left-right.html
Grouped buttons in header bar
It could be nice to have the possibility to group buttons in the header.
horizontal and vertical orientation event
After I posted a fix suggestion I implemented a event to facilitate my work. When the orientation is horizontal or vertical. Should be nice if these events come implemented in jquery mobile My implementations to this: after including the jquery script, I added.. $(function() { var setOrientation = function() { if (window.orientation === undefined) { // desktop return; } if (Math.abs(window.orientation) == 90) { // horizontal $(document).triggerHandler('onHorizontalOrientation');
dynamic loading of images in very long listviews
Hi, in a scrollview I have a long list of listview with thumbnails. If the length of LI-Elems is bigger than 200 items, the webview crashs. Idea: <li><img src="dummy.png" data-fullimageurl="FULLURL"><h3>Title</h3><p>DESCRIPTION</p></li>And now: On event scroll => detecting which LI's are in viewport and src="dummy". For this images I want to replace the sources. In the facebook-app it works so in long. I have made tests. The problem is the length of list not the iamges. What we need is a dynamic
styling for collapsible content blocks
of course nielsen also checked out mobile usability and in his test findings (http://www.useit.com/alertbox/mobile-usability.html) he suggests not to use collapsible content because people get lost on small screens when expanding those blocks. since they have already found a way into jqm - which is totally acceptable since there might be cases in which they match good usability - I would like to propose a change in style. I think - and I already have this problem on my desktop - expanding a couple
Timepicker for jQuery Mobile, free to download
Hi Everyone. :) I have written a timepicker control called EasyTimepicker for jQuery Mobile. My objective in designing this timepicker was to have a control that was simple to use and provided a simple select with time entries. I built this control mainly for use in an iphone web application and the native select looks very good on this platform; so I wanted the control to capitalized on this feature. I like the way that jQuery Mobile takes the "code less, do more" mantra of jquery to a new level,
Ability to track states in the url with &foo=bar
Maybe it would be useful to provide a way for developers to track application internal states in the url. If I have an application that renders dynamically and *client side* a lot of content, for instance in a page with the id #dynamicDetail, I know what kind of content I have to output in that page by binding some click events to the buttons that link to that page. Once the transition takes place, the url looks like: foo.bar/#dynamicDetail The url doesn't carry the information to effectively render
clear text on all inputs
why not put the clear text function on all possible input fields and textareas?
Listview discrete category filter
Discrete filter plugin for listviews implemented as a dropdown at the top of the list, which selects only <li> with a certain data-category attribute. https://github.com/borismus/jquery-mobile/tree/master/experiments/listview-category/
Image Slider Control , smooth scrolling
Hi All, I have created one page having two image sliders horizontally. its tested on iPhone and iPad , works well. though browser fallback needs to be developed. I checked different posts in this forum about image carousal, but when i test it on mobile devices, its very slow and animation/sliding is not as smooth as desired. I also tried creating one as explained here in my previous post. this particular approach does not have animation but sliding is easy. this kind of image slider can be found
Logout icon for the JQuery Mobile project
I downloaded and modified the 4 image sprites that hold the icons for the JQuery Mobile project to include a logout icon, attached to this post. To use them the way the other icons are used you need to add these to your css. Note: there are 4 files but it would only let me upload three - see the first comment below for the 18-black file. (The black files are the same as the white ones with their colors inverted. To make the 18 pixel version of the file, you cannot just shrink the whole 36 pixel file,
Multi-document HTML/CSS/JS code collaboration tools? (vs jsFiddle)
It's been obvious for some time that jsFiddle is not the best way to set-up jQuery Mobile demos. While it is generally an OK way to show a jQuery problem, it falls short for jQuery Mobile, because it is limited (except for "external resources") to a single CSS, HTML, and JS file. While you can include external resources, of course they can't be edited. As well, it's not easy or even possible in many cases to show the use of, say, a REST API. So, another "would be nice" would be the ability to proxy
Add Pull to refresh event in jquery mobile
Hi i request to add pull to refresh event in jquery mobile becasue if i use third party tool like iscrollz or iscrollview then swipe event stops working you can test this example http://www.kamrat.com/test/iScroll5/iscroll5-pull-test.html and add swipe event to it. An intersting thing is that in safari swipe event works in combination with pull down to refresh ie. (iscrollz or isrollview) but fails in ios simulator and devices
Thanks for beta 1 :-)
I have just found out that beta 1 is released and have already implemented into production :-) The scroll of listviews seams to be much better, thanks for that. Is there anyway that I can subscribe to posts on the blog? I keep getting tired of looking by 'Blog' every day. It would be nice to be able to subscribe to an email service sending me a notification when there is a new Blog. Keep up the good work. It's much appreciated :-D
some 1.2 picture popup feature requests
The new popup feature is nice, also for displaying pictures, there are a couple of options I'd like to propose: Option: preload pictures (true/false). I believe that the pictures inside a popup are downloaded once it's opened. That's what I want actually, but others might prefer the pictures to be loaded in advance (along with the page). An option for this would be suitable I think. Option: tap popup itself to close (true/false). To close a popup you either tap outside it or press the optional close
media queries - jquery image resize
Hi Guys, I got inspired by @ppk's post about media queries and javascript plus everyone elses media queries blogs and thought how about adding a bit a of code so that if the device is a certain size (480px wide perhaps) then add '-mobile' to the images so that it'll download smaller images for the web. I posted it on stackoverflow with two bits of code I found that needed almagamating into one and @craftedpixels came to my rescue with this code - $(document).ready(function() { if ((screen.width<=960)
load additional javasscripts via loadPage function when using AJAX
When using AJAX to transition pages, no additional javascripts are loaded if the new page has new javascript in the header, etc.. I have done a dirty hack to the loadPage function which loads all the additional scripts from the html string returned via AJAX (see attached for hacked version). The code just needs adding to the success function of the ajax call in the loadPage function- // START modification (Guy Thomas 2012083000)
Keeping the header and footer in nested listviews
When I used a nested listview for the first time, I was a bit surprised to find that it created new a new header dynamically instead of just keeping the header and footer of the parent. For my current project this is really important, so I searched around and found many people with the same expectation. I've modified $.mobile.listview._createSubPages to support this functionality by setting data-dynamic to true or false on the <ul>. Ideally this could be implemented as an event or callback so that
New Icons for jQuery Mobile
We have just released a huge icon set of 1200 glyphs that is available not only as PNG but also as a font. You can check it out and of course download it at http://www.webhostinghub.com/glyphs/ The set is absolutely free for both personal and commercial use and we hope that it will be interesting for jQuery Mobile users. We are also planning to add many more new icons and we would appreciate all your ideas on how to make this icon font better.
Use Velocity.js and JqueryMobile
I found it on stackoverflow seeking how to get the transition jquerymobile performance. I thought it worked like with jquery, enough to add the velocity.js library for working with jquerymobile velocity. But this is not the case, so I come to see you because I have not found a solution, and there is no answer on this post. Thx Topic on stackoverflow
Persistant Header
For future JQuery Mobile, we'd really like a persistent header. For example, when I use Charles Schwab and I scroll a table/list, as I scroll up, the header stays at the top until the next header. Then, that header stays persistent at the top until a following header. I really want this (even at one basic level) for my JQM apps. Maybe it's not called a header...but go here: http://demos.jquerymobile.com/1.0a1/#docs/toolbars/footer-persist-a.html Now, I'd like A to be at the for as many of the A's
Next Page