Adding Listviews
Description
This example shows how to add Listviews to jqmPage, the source is included in jqmPhp Package.
live demoSource Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | <?php /** * Example 5 - Adding Listviews * @package jqmPhp * @filesource */ /** * Include the jqmPhp class. */ include 'lib/jqmPhp.php'; /** * Create a new jqmPhp object. */ $j = new jqmPhp(); /** * Config 'html' and 'head' tag. */ $j->head()->title('Example 5'); /** * Create and config a jqmPage object. */ $p = new jqmPage('example-5'); $p->theme('b')->title('Example 5'); $p->header()->theme('a'); /** * Create and config a new jqmNavbar object and add items. */ $nav = $p->header()->add(new jqmNavbar(), true); $nav->add(new jqmButton('', '', '', 'a', 'example-1.php#', 'EX1', '', false)); $nav->add(new jqmButton('', '', '', 'a', 'example-2.php#', 'Ex2', '', false)); $nav->add(new jqmButton('', '', '', 'a', 'example-3.php#', 'EX3', '', false)); $nav->add(new jqmButton('', '', '', 'a', 'example-4.php#', 'EX4', '', false)); $nav->add(new jqmButton('', '', '', 'a', '#', 'EX5', '', true)); /** * Confif page footer (jqmFooter). */ $p->footer()->addButton('EX1', 'example-1.php#', '', 'arrow-l'); $p->footer()->addButton('EX2', 'example-2.php#', '', 'arrow-l'); $p->footer()->addButton('EX3', 'example-3.php#', '', 'arrow-l'); $p->footer()->addButton('EX4', 'example-4.php#', '', 'arrow-l'); $p->footer()->addButton('EX5', '#', '', 'check', true); $p->footer()->group(true)->uiBar(true)->theme('a'); /** * Create and config a new jqmListview object and add Basic Items. */ $p->addContent('<h1>Adding Listviews</h1>'); $p->addContent('<h3>Basic</h3>'); $list1 = new jqmListviem(); $list1->addDivider('Basic Examples', '2')->inset(true); $list1->addBasic('Example 1', 'example-1.php#'); $list1->addBasic('Example 2', 'example-2.php#'); $list1->addDivider('Advanced Examples', '3')->inset(true); $list1->addBasic('Example 3', 'example-3.php#'); $list1->addBasic('Example 4', 'example-4.php#'); $list1->addBasic('Example 5', '#'); $p->addContent($list1); /** * Create and config a new jqmListview object and add Icon Items. */ $p->addContent('<h3>Icon</h3>'); $list2 = new jqmListviem(); $list2->inset(true)->addDivider('Animals')->dividerTheme('a'); $list2->addIcon('Dogs', '#', 'docs/images/dog.png', '13'); $list2->addIcon('Cats', '#', 'docs/images/cat.png', '10'); $p->addContent($list2); /** * Create and config a new jqmListview object and add Thumbnails Items. */ $p->addContent('<h3>Thumbnails</h3>'); $list3 = new jqmListviem(); $list3->inset(true); $list3->addThumb('YouTube', 'www.youtube.com', 'http://www.youtube.com', 'docs/images/youtube.png'); $list3->addThumb('Flickr', 'www.flickr.com', 'http://www.flickr.com', 'docs/images/flickr.png'); $list3->addThumb('Picasa', 'picasaweb.google.com', 'http://picasaweb.google.com', 'docs/images/picasa.png'); $list3->addThumb('Feedburner', 'www.feedburner.com', 'http://www.feedburner.com', 'docs/images/feedburner.png'); $p->addContent($list3); /** * Create and config a new jqmListview object and add Split Items. */ $p->addContent('<h3>Split</h3>'); $list4 = new jqmListviem(); $list4->inset(true)->splitIcon('gear')->splitTheme('c'); $list4->addDivider('Unread Messages', '11')->dividerTheme('c')->countTheme('b'); $list4->addSplit('Account 1', '#', '#', '09'); $list4->addSplit('Account 2', '#', '#', '02'); $list4->addSplit('Account 3', '#', '#', '00'); $p->addContent($list4); /** * Create and config a new jqmListview object and add Nested Items. */ $p->addContent('<h3>Nested</h3>'); $list5 = new jqmListviem(); $list5->inset(true)->theme('a'); $list5->addDivider('Cars'); $fiat = new jqmListviem(); $fiat->addBasic('Bravo', 'example-5.php#'); $fiat->addBasic('Linea', 'example-5.php#'); $fiat->addBasic('Punto', 'example-5.php#'); $list5->addNested('Fiat', $fiat); $gm = new jqmListviem(); $gm->addBasic('Celta', 'example-5.php#'); $gm->addBasic('Agile', 'example-5.php#'); $gm->addBasic('Vectra', 'example-5.php#'); $list5->addNested('GM', $gm); $honda = new jqmListviem(); $honda->addBasic('Fit', 'example-5.php#'); $honda->addBasic('City', 'example-5.php#'); $honda->addBasic('Civic', 'example-5.php#'); $list5->addNested('Honda', $honda); $p->addContent($list5); /** * Add the page to jqmPhp object. */ $j->addPage($p); /** * Generate the HTML code. */ echo $j; ?> |
/**
* Example 5 – Adding Listviews
* @package jqmPhp
* @filesource
*/
/**
* Include the jqmPhp class.
*/
include ‘lib/jqmPhp.php’;
/**
* Create a new jqmPhp object.
*/
$j = new jqmPhp();
/**
* Config ‘html’ and ‘head’ tag.
*/
$j->head()->title(‘Example 5′);
/**
* Create and config a jqmPage object.
*/
$p = new jqmPage(‘example-5′);
$p->theme(‘b’)->title(‘Example 5′);
$p->header()->theme(‘a’);
/**
* Create and config a new jqmNavbar object and add items.
*/
$nav = $p->header()->add(new jqmNavbar(), true);
$nav->add(new jqmButton(”, ”, ”, ‘a’, ‘example-1.php#’, ‘EX1′, ”, false));
$nav->add(new jqmButton(”, ”, ”, ‘a’, ‘example-2.php#’, ‘Ex2′, ”, false));
$nav->add(new jqmButton(”, ”, ”, ‘a’, ‘example-3.php#’, ‘EX3′, ”, false));
$nav->add(new jqmButton(”, ”, ”, ‘a’, ‘example-4.php#’, ‘EX4′, ”, false));
$nav->add(new jqmButton(”, ”, ”, ‘a’, ‘#’, ‘EX5′, ”, true));
/**
* Confif page footer (jqmFooter).
*/
$p->footer()->addButton(‘EX1′, ‘example-1.php#’, ”, ‘arrow-l’);
$p->footer()->addButton(‘EX2′, ‘example-2.php#’, ”, ‘arrow-l’);
$p->footer()->addButton(‘EX3′, ‘example-3.php#’, ”, ‘arrow-l’);
$p->footer()->addButton(‘EX4′, ‘example-4.php#’, ”, ‘arrow-l’);
$p->footer()->addButton(‘EX5′, ‘#’, ”, ‘check’, true);
$p->footer()->group(true)->uiBar(true)->theme(‘a’);
/**
* Create and config a new jqmListview object and add Basic Items.
*/
$p->addContent(‘<h1>Adding Listviews</h1>’);
$p->addContent(‘<h3>Basic</h3>’);
$list1 = new jqmListviem();
$list1->addDivider(‘Basic Examples’, ’2′)->inset(true);
$list1->addBasic(‘Example 1′, ‘example-1.php#’);
$list1->addBasic(‘Example 2′, ‘example-2.php#’);
$list1->addDivider(‘Advanced Examples’, ’3′)->inset(true);
$list1->addBasic(‘Example 3′, ‘example-3.php#’);
$list1->addBasic(‘Example 4′, ‘example-4.php#’);
$list1->addBasic(‘Example 5′, ‘#’);
$p->addContent($list1);
/**
* Create and config a new jqmListview object and add Icon Items.
*/
$p->addContent(‘<h3>Icon</h3>’);
$list2 = new jqmListviem();
$list2->inset(true)->addDivider(‘Animals’)->dividerTheme(‘a’);
$list2->addIcon(‘Dogs’, ‘#’, ‘docs/images/dog.png’, ’13′);
$list2->addIcon(‘Cats’, ‘#’, ‘docs/images/cat.png’, ’10′);
$p->addContent($list2);
/**
* Create and config a new jqmListview object and add Thumbnails Items.
*/
$p->addContent(‘<h3>Thumbnails</h3>’);
$list3 = new jqmListviem();
$list3->inset(true);
$list3->addThumb(‘YouTube’, ‘www.youtube.com’, ‘http://www.youtube.com’, ‘docs/images/youtube.png’);
$list3->addThumb(‘Flickr’, ‘www.flickr.com’, ‘http://www.flickr.com’, ‘docs/images/flickr.png’);
$list3->addThumb(‘Picasa’, ‘picasaweb.google.com’, ‘http://picasaweb.google.com’, ‘docs/images/picasa.png’);
$list3->addThumb(‘Feedburner’, ‘www.feedburner.com’, ‘http://www.feedburner.com’, ‘docs/images/feedburner.png’);
$p->addContent($list3);
/**
* Create and config a new jqmListview object and add Split Items.
*/
$p->addContent(‘<h3>Split</h3>’);
$list4 = new jqmListviem();
$list4->inset(true)->splitIcon(‘gear’)->splitTheme(‘c’);
$list4->addDivider(‘Unread Messages’, ’11′)->dividerTheme(‘c’)->countTheme(‘b’);
$list4->addSplit(‘Account 1′, ‘#’, ‘#’, ’09′);
$list4->addSplit(‘Account 2′, ‘#’, ‘#’, ’02′);
$list4->addSplit(‘Account 3′, ‘#’, ‘#’, ’00′);
$p->addContent($list4);
/**
* Create and config a new jqmListview object and add Nested Items.
*/
$p->addContent(‘<h3>Nested</h3>’);
$list5 = new jqmListviem();
$list5->inset(true)->theme(‘a’);
$list5->addDivider(‘Cars’);
$fiat = new jqmListviem();
$fiat->addBasic(‘Bravo’, ‘example-5.php#’);
$fiat->addBasic(‘Linea’, ‘example-5.php#’);
$fiat->addBasic(‘Punto’, ‘example-5.php#’);
$list5->addNested(‘Fiat’, $fiat);
$gm = new jqmListviem();
$gm->addBasic(‘Celta’, ‘example-5.php#’);
$gm->addBasic(‘Agile’, ‘example-5.php#’);
$gm->addBasic(‘Vectra’, ‘example-5.php#’);
$list5->addNested(‘GM’, $gm);
$honda = new jqmListviem();
$honda->addBasic(‘Fit’, ‘example-5.php#’);
$honda->addBasic(‘City’, ‘example-5.php#’);
$honda->addBasic(‘Civic’, ‘example-5.php#’);
$list5->addNested(‘Honda’, $honda);
$p->addContent($list5);
/**
* Add the page to jqmPhp object.
*/
$j->addPage($p);
/**
* Generate the HTML code.
*/
echo $j;
?>
List items are not clickable when using the latest version of jQuery Mobile.
It reverts to an underlined html link, and the only clickable area is the list item text. Not sure if this is a bug or a feature.
(Functions using jquery.mobile-1.0a3.js but not the latest 1.0a4.x)
Due to a change in the way list items are presented using the jQuery Mobile scripting the tag must now wrap the image, title, and subtitle text with a closing , letting the list item behave as a clickable element.
This can be edited in the generated html doc, or by updating the jqmListitem.php file to wrap the element correctly when the output is sent to the browser.
Was this answer helpful?
LikeDislikeHi,
I am working on an jqmPhp update. While not ready, I am providing a file that allow use jQuery Mobile Alpha 4.1 ListViews with jqmPhp version 0.03. An update of jqmPhp will be available soon.
http://goo.gl/kn7B0
Regards!
Was this answer helpful?
LikeDislike