Difference between revisions of "JQuery-Mobile"

Revision as of 13:54, 7 March 2013

apps

header-menu

If you want menus in your header use this code, just don't let any class in the data-role="page"

mess with your formatting

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true">Menu</a> <a href="#popupNested" data-rel="popup" data-role="button" data-inline="true">Nested menu</a>

Dog

Popup API
<a href="options.html">Options</a>
<a href="methods.html">Methods</a>
<a href="events.html">Events</a>

Farm animals

<a href="../dialog.html" data-rel="dialog">Chicken</a>
<a href="../dialog.html" data-rel="dialog">Cow</a>
<a href="../dialog.html" data-rel="dialog">Duck</a>
<a href="../dialog.html" data-rel="dialog">Sheep</a>

Pets

<a href="../dialog.html" data-rel="dialog">Cat</a>
<a href="../dialog.html" data-rel="dialog">Dog</a>
<a href="../dialog.html" data-rel="dialog">Iguana</a>
<a href="../dialog.html" data-rel="dialog">Mouse</a>

Ocean Creatures

<a href="../dialog.html" data-rel="dialog">Fish</a>
<a href="../dialog.html" data-rel="dialog">Octopus</a>
<a href="../dialog.html" data-rel="dialog">Shark</a>
<a href="../dialog.html" data-rel="dialog">Starfish</a>

Wild Animals

<a href="../dialog.html" data-rel="dialog">Lion</a>
<a href="../dialog.html" data-rel="dialog">Monkey</a>
<a href="../dialog.html" data-rel="dialog">Tiger</a>
<a href="../dialog.html" data-rel="dialog">Zebra</a>

</syntaxhighlight>

docs

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

or you can just use

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.

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.

remove-text-box-in-slider-control-in-jquery-mobile

on styling

http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content

Clear the application cache in chrome?

But watchout, developer tolls doesn't update.

ANS: close the page then goto chrome://appcache-internals/);

Turn Object into Array?

ANS: var arr = jQuery.makeArray(elems);

Sort Array?

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 document.write(fruits.sort());

ANS: fruits.sort();

try them here http://jsfiddle.net/mckennatim

Refresh on attribute change?

    <!DOCTYPE html>
    <html>
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
            <script src="http://code.jquery.com/jquery.js"></script>
            <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>	
    </head>
    <body>
        <div id="thelists" data-role="page">
        
            <div data-role="header">
                <a href="#" data-icon="back"  id="get" data-role="button" >get</a>
                    <h2>TestPage</h2>
                <a href="#" data-icon="home" id="change" data-role="button">change</a>
            </div><!-- /header -->       
            <div data-role="content">	
                <ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
            </div><!-- /content -->
        </div><!-- /page -->
    <script>
        $('#get').click(function() {
            for (i=1; i<6; i++){
                $('#list').append('<li><a>list</a><a class="orig">items</a></li>');
            }
            $('#list').listview('refresh');
            return false; 
        }); 
        $('#change').click(function() {
            console.log($('ul').attr('data-split-icon'));
            $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
            console.log($('ul').attr('data-split-icon'));
            //$('#list').listview();
            //$('#list').listview('refresh');
            $('#thelists').trigger('create');
            $('#thelists').trigger('pagecreate');	
            $('#list').listview();
            $('#list').listview('refresh');
            return false; 
        }); 	

		$('#change').click(function() {
		    console.log($('ul').attr('data-split-icon'));
		    $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
		    console.log($('ul').attr('data-split-icon'));
		    $("[data-icon=gear]").each(function() {
		        var $this = $(this);
		        $this.attr('data-icon','info');
		        $this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');                
		    });
		    $('#list').listview('refresh',true);
		    return false; 
		});      	     
    </script>    
    </body>
    </html>

ANS: you could hack the widget css shit as seen in tools-developer-elements

Removing appended html using jQuery?

ANS: jQuery('#main').empty();

In jquery-mobile how do you programmically add page elements that have all the css?

When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered. Is there an easier way?

http://jsfiddle.net/mckennatim/KKTr4/

    <!DOCTYPE html>
    <html>
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
            <script src="http://code.jquery.com/jquery.js"></script>
            <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>	
    </head>
    <body>
        <div id="thelists" data-role="page">
        
            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->       
            <div data-role="content">	
		       	<h3>Add List</h3> 
		        <form>
			    	<div data-role="controlgroup"  id="addwhat">
			         	<input type="text" name="inp0" class="inp" />
			        </div> 	
		         	<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
						<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
					</div>							
				 </form> 
            </div><!-- /content -->
        </div><!-- /page -->
        <script>
		var ct =0;
        $('body').on('click', "#addinput", function (e) { 
        	ct++;
            e.stopImmediatePropagation();
            e.preventDefault();
            //to add form elemnt you have to add all the class css stuff
            //$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
            $('#addwhat').append('<input type="text" name="list' + ct + '"/>');
        });              
        </script>    
    </body>
    </html>

ANS: $('#thelists').trigger('create'); should do the trick.

[javascript] [jquery-mobile] Why won't mailto include link parameters?

When this code runs the alert box comes up with the link that includes &list=groceries and &email=tim@sitebuilt.net. When the mailto: fires and brings up the email window those parameters are missing and I can't figure out why. the length of the string doesn't seem to matter.

This code has all it needs to run. You can run it here: http://jsfiddle.net/mckennatim/rRerR/

    <!DOCTYPE html>
    <html>
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
            <script src="http://code.jquery.com/jquery.js"></script>
            <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>	
    </head>
    <body>
        <div id="thelists" data-role="page">
        
            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->       
            <div data-role="content">	
		       	<h3>Add List</h3> 
		        <form>
			    	<div data-role="controlgroup"  id="addwhat">
			         	<input type="email"  id="shemail" name="inp0" class="inp" />
			        </div> 	
		         	<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
						<input type="submit" data-theme="b" id="mailit" value="mail it"/>
					</div>							
				 </form> 
            </div><!-- /content -->
        </div><!-- /page -->
        <script>
        	$('body').on('click', "#mailit", function (e) { 
	            e.stopImmediatePropagation();
	            e.preventDefault();
			    repo = "Sebaza";
			    list = "groceries";
			    semail = $("#shemail").val();
			    //(semail);
			    urri ='mailto:'+ semail  + '?subject=share this list with me' + '&cc=' + semail + '&body=Hi, I think it would be cool if we shared this ' + list +' list on our phones. That way when either of us modified it we would see the update. http://10.0.1.18/webeshoppin/stuff2get/www/food2buy.html?repo=' + repo + '&list=' + list + '&email=' + semail  ;
			    window.location = urri;
				alert('clicked ashare ' +urri);   
			});          
        </script>    
    </body>
    </html>

ANSWER: encode ? -> %3F and & - > %26

[jqm] How can I grab the searchValue?

If no items match the searchValue I want to add that searchValue to a list.

My plan is to somehow monitor the when the visible matches goes to 0 then grab the value in the filter box.

Here is my test code (it has all it needs to run) I've got the callback function part wrong.

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>	
        <script>
        $('#thelists').live('pageinit', function(event) {
        	$('body').on('click', "#getdata", function (e) { 
	            e.stopImmediatePropagation();
	            e.preventDefault();
	            visib = $("#mylist li:visible").length;
	            console.log('list has ' + visib +  ' elements left');
	            $("#mylist").listview('option', 'filterCallback', myFilterFunction);
        	});   
          	function myFilterFunction( text, searchValue ){
          		console.log('Searching for ' + searchValue);
  				return text.toLowerCase().indexOf( searchValue ) === -1;
			};
		});
        </script>               
    </head>
    <body>
        <div id="thelists" data-role="page">
        
            <div data-role="header">
                <h1>My Title</h1>
            </div><!-- /header -->       
            <div data-role="content">	
            	<a href="index.html" id="getdata" data-role="button">getSearchTxt</a>
				<div class="content-primary">	
					<ul id="mylist" data-role="listview" data-filter="true">
						<li><a href="index.html">Acura</a></li>
						<li><a href="index.html">Audi</a></li>
						<li><a href="index.html">Aukervile</a></li>
						<li><a href="index.html">Auadillac</a></li>
						<li><a href="index.html">Chrysler</a></li>
						<li><a href="index.html">Dodge</a></li>
						<li><a href="index.html">Ferrari</a></li>
						<li><a href="index.html">Foraud</a></li>
						<li><a href="index.html">GMC</a></li>
						<li><a href="index.html">Honda</a></li>
						<li><a href="index.html">Hyundai</a></li>
						<li><a href="index.html">Infiniti</a></li>
						<li><a href="index.html">Jeep</a></li>
						<li><a href="index.html">Kia</a></li>
					</ul>
				</div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
    </html>

ANSWER: Detect the keyup event of the searchbox

			$("input[data-type='search']").keyup(function() {			
			//$("input[data-type='search']").keyup(function() {
			    var optCount = $("#mylist > li:visible").size();
			    
			    if(optCount < 1) {
			        alert('Value: '+$(this).val()); 
			    }
			});

[jqm] How do you add an element programmatically with all the css?

ANSWER: Add all the classes to it that you see in developer tools elements.

See http://10.0.1.18/webeshoppin/stuff2get/zmisc/add2form.html

How do you access an element enclosing the active element?

will traverse upward and return the nearest selector provided. http://api.jquery.com/closest/

$("a.removerow").click(function(e){
    $(this).closest('tr').hide();
    e.preventDefault();
});

ANSWER: Use Query's closest(selector) function

[jqm] How do you force a refresh after a page move?

method1

location.href= 'food2buy.html?repo=' + rep + '&list=' + lis;

method2 (data-ajax="false")

 $('#allyourlists').append('<li><a href="food2buy.html?repo=' + rep + 
  '&list=' + lis + '" data-ajax="false" >Repo: ' + rep + '& List: ' + 
  lis + '</a></li>');

ANSWER: use location.href or data-ajax="false"

Why doesn't the clich http://10.0.1.18/webeshoppin/stuff2get/zmisc/buttonnotfiring.html

arrays

http://www.hunlock.com/blogs/Mastering_Javascript_Arrays

[js] How do you set value of arrays?

var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab";       // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW"); // condensed array

var myCars=["Saab","Volvo","BMW"]; // literal array

ANSWER: [] or new Array() or myCars.push("XKE")

How do you search an array for a value?

ANS: use $.inArray()

How do you add key value to array?

ANS: a['name'] = 'oscar';

[jqm] Why is the button not firing?

http://10.0.1.18/webeshoppin/stuff2get/zmisc/buttonnotfiring2.html

this works

BTW shoudn't use id for multiple items

        <script>
        //Why is delete button not firing? 
        $('#thelists').bind('pageinit', function(event) {
            console.log('in bind pageinit for yourlists');
            var thelists = ["list1", "list2"];
            console.log(thelists);
            $.each(thelists, function(index, alist) {
                $('#allyourlists').append('<li><a href="index.html" data-role="button" id="delalist">List: ' + alist + '</a></li>');
            });
            $('#allyourlists').listview('refresh');
        });
        
        //gets the val of val1 from the previois call
        $('body').on('click', "#delalist", function (e) { 
            e.stopImmediatePropagation();
            e.preventDefault();
            alert ('in delalist') ;
        });   
            
        </script>

this doesn't

      <script>
        //Why is delete button not firing? 
        $('#thelists').bind('pageinit', function(event) {
            console.log('in bind pageinit for yourlists');
            var thelists = ["list1", "list2"];
            console.log(thelists);
            $.each(thelists, function(index, alist) {
                $('#allyourlists').append('<li><a href="index.html" data-role="button" id="delalist">List: ' + alist + '</a></li>');
            });
            $('#allyourlists').listview('refresh');
        });
        
        //gets the val of val1 from the previois call
        $("#delalist").click(function (e) { 
            e.stopImmediatePropagation();
            e.preventDefault();
            alert ('in delalist') ;
        });   
            
        </script>

@@ Line 1: / Line 1: @@
+===apps===
+[[homecontrol]]
 {{:header-menu}}
 ===docs===

Anonymous

Search