JQuery-Mobile - Revision history

Tim: /* docs */

2013-03-08T16:17:45Z

docs

← Older revision		Revision as of 12:17, 8 March 2013
Line 9:		Line 9:
	*[http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php (rwd) responsive web design]		*[http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php (rwd) responsive web design]
	*[http://the-jquerymobile-tutorial.org/index.php tutorial]		*[http://the-jquerymobile-tutorial.org/index.php tutorial]
			*[http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/ advanced-customization-jquery-mobile-buttons]

	===Jquery-Mobile questions===		===Jquery-Mobile questions===

Tim: /* docs */

2013-03-08T14:36:44Z

docs

← Older revision		Revision as of 10:36, 8 March 2013
Line 8:		Line 8:
	*[http://view.jquerymobile.com/1.3.0/ demo ctr]		*[http://view.jquerymobile.com/1.3.0/ demo ctr]
	*[http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php (rwd) responsive web design]		*[http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php (rwd) responsive web design]
			*[http://the-jquerymobile-tutorial.org/index.php tutorial]

	===Jquery-Mobile questions===		===Jquery-Mobile questions===

Tim at 17:54, 7 March 2013

2013-03-07T17:54:40Z

← Older revision		Revision as of 13:54, 7 March 2013
Line 1:		Line 1:
			===apps===
			[[homecontrol]]

	{{:header-menu}}		{{:header-menu}}
	===docs===		===docs===

Tim: /* Overriding jQuery mobile default styles. */

2013-03-06T21:28:30Z

Overriding jQuery mobile default styles.

← Older revision		Revision as of 17:28, 6 March 2013
Line 21:		Line 21:
	I've used this successfully for page headers, which have a ridiculously small area for the page title, causing it to go into ellipsis after nine or ten characters. The cause is the left and right margins of anything that jQM decides to style as the page header title: those are set at 90px, where 40px is fine if you don't include buttons or other stuff in the header.		I've used this successfully for page headers, which have a ridiculously small area for the page title, causing it to go into ellipsis after nine or ten characters. The cause is the left and right margins of anything that jQM decides to style as the page header title: those are set at 90px, where 40px is fine if you don't include buttons or other stuff in the header.

	$('div[data-role="page"]').live('pageshow',function(event){		$('div[data-role="page"]').live('pageshow',function(event){
	$('div[data-role="header"]').css({		$('div[data-role="header"]').css({
	margin-left: 40px;		margin-left: 40px;
	})		})
	})		})

	Margin-left is obviously just an example.		Margin-left is obviously just an example.

	My only reservation is performance. I don't know how bad it is to bind a separate event to all pages for this one purpose.		My only reservation is performance. I don't know how bad it is to bind a separate event to all pages for this one purpose.

	====[http://stackoverflow.com/questions/9989615/remove-text-box-in-slider-control-in-jquery-mobile remove-text-box-in-slider-control-in-jquery-mobile]====		====[http://stackoverflow.com/questions/9989615/remove-text-box-in-slider-control-in-jquery-mobile remove-text-box-in-slider-control-in-jquery-mobile]====

Tim: /* Jquery-Mobile questions */

2013-03-06T21:27:49Z

Jquery-Mobile questions

← Older revision		Revision as of 17:27, 6 March 2013
Line 7:		Line 7:

	===Jquery-Mobile questions===		===Jquery-Mobile questions===
			====don't even try to re-style JQM====
			I think that any native app using JQM probably shouldn't be using listviews. Not in production. Just make your own list. You can use <ul> and <li> or you can just use <div>s. Add your own CSS to format it the way you want. Add fast clicks using delegation from a script loaded from a common <head>. Add whatever hover/selected effect you might like when people click on items.

			You will be amazed at how fast a list can be. Just don't use a listview.

			P.S. If the only thing in a content block is a list, then omit the data-role="content" as well. Then, you won't have to fight with the default CSS for content.
	====Overriding jQuery mobile default styles.====		====Overriding jQuery mobile default styles.====

Tim: /* Jquery-Mobile questions */

2013-03-06T21:24:00Z

Jquery-Mobile questions

← Older revision		Revision as of 17:24, 6 March 2013
Line 7:		Line 7:

	===Jquery-Mobile questions===		===Jquery-Mobile questions===

			====Overriding jQuery mobile default styles.====

			Since jQuery Mobile applies its classes just before the pageshow event, which always overrides stylesheets specified in the header, the obvious solution would be to whack jQM over the head with its own weapons.

			By which I mean the pageshow event, which follows after all styling is done. Since you (apparently, and rightfully) want to override css on all pages, the obvious approach is the following.

			I've used this successfully for page headers, which have a ridiculously small area for the page title, causing it to go into ellipsis after nine or ten characters. The cause is the left and right margins of anything that jQM decides to style as the page header title: those are set at 90px, where 40px is fine if you don't include buttons or other stuff in the header.

			$('div[data-role="page"]').live('pageshow',function(event){
			$('div[data-role="header"]').css({
			margin-left: 40px;
			})
			})

			Margin-left is obviously just an example.

			My only reservation is performance. I don't know how bad it is to bind a separate event to all pages for this one purpose.
	====[http://stackoverflow.com/questions/9989615/remove-text-box-in-slider-control-in-jquery-mobile remove-text-box-in-slider-control-in-jquery-mobile]====		====[http://stackoverflow.com/questions/9989615/remove-text-box-in-slider-control-in-jquery-mobile remove-text-box-in-slider-control-in-jquery-mobile]====

Tim: /* Jquery-Mobile questions */

2013-03-06T20:57:23Z

Jquery-Mobile questions

← Older revision		Revision as of 16:57, 6 March 2013
Line 7:		Line 7:

	===Jquery-Mobile questions===		===Jquery-Mobile questions===
			====[http://stackoverflow.com/questions/9989615/remove-text-box-in-slider-control-in-jquery-mobile remove-text-box-in-slider-control-in-jquery-mobile]====

	====on styling====		====on styling====

Tim at 01:40, 5 March 2013

2013-03-05T01:40:00Z

← Older revision		Revision as of 21:40, 4 March 2013
Line 1:		Line 1:
			{{:header-menu}}
	===docs===		===docs===
	*[http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ main docs]		*[http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ main docs]

Tim: /* docs */

2013-03-04T23:06:05Z

docs

← Older revision		Revision as of 19:06, 4 March 2013
Line 1:		Line 1:
	===docs===		===docs===
	*[http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ main docs]		*[http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ main docs]
			*[http://api.jquerymobile.com/ api]
			*[http://view.jquerymobile.com/1.3.0/ demo ctr]
			*[http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php (rwd) responsive web design]

	===Jquery-Mobile questions===		===Jquery-Mobile questions===

Tim at 23:03, 4 March 2013

2013-03-04T23:03:06Z

← Older revision		Revision as of 19:03, 4 March 2013
Line 1:		Line 1:
			===docs===
			*[http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ main docs]
	===Jquery-Mobile questions===		===Jquery-Mobile questions===