5

Adding Form Elements

-

Description

This example shows how to add form elements to jqmPage, the source is included in jqmPhp Package.

live demo

Source 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
134
135
136
137
138
139
140
141
142
143
<?php
 /**
 * Example 4 - Adding Form Elements
 * @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 4');
 
 /**
 * Create and config a jqmPage object.
 */
 $p = new jqmPage('example-4');
 $p->theme('b')->title('Example 4');
 $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', '#', 'EX4', '', true));
 $nav->add(new jqmButton('', '', '', 'a', 'example-5.php#', 'EX5', '', false));
 
 /**
 * 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', '#', '', 'check', true);
 $p->footer()->addButton('EX5', 'example-5.php#', '', 'arrow-r');
 $p->footer()->group(true)->uiBar(true)->theme('a');
 
 /**
 * Create and config a new jqmForm object and add items.
 */
 $p->content()->add('<h1>Adding Form Elements</h1>');
 $form = $p->addContent(new jqmForm(), true);
 $form->action('example-4.php?rand='.rand(0, 9999))->method('POST');
 
 /**
 * Add some jqmInput objects.
 */
 $form->add('<h3>Text Inputs</h3>');
 $form->add(new jqmInput('uid', 'uid', 'text', '', 'Username:', '', true));
 $form->add(new jqmInput('pwd', 'pwd', 'password', '', 'Password:', '', true));
 $form->add(new jqmInput('find', 'find', 'search', '', 'Search:', '', true));
 
 /**
 * Add a jqmTextarea object.
 */
 $form->add('<h3>Textarea</h3>');
 $form->add(new jqmTextarea('msg', 'msg', '', '80', '4', 'Comments:', '', true));
 
 /**
 * Add a jqmRange object.
 */
 $form->add('<h3>Range Input Type</h3>');
 $form->add(new jqmRange('age', 'age', '18', '18', '80', 'Age:', '', true));
 
 /**
 * Add a jqmSelect object with some jqmOption objects.
 */
 $form->add('<h3>Select</h3>');
 $sel = $form->add(new jqmSelect('country', 'country', 'Language:'), true);
 $sel->add(new jqmOption('English', 'en', true));
 $sel->add(new jqmOption('Spanish', 'es', false));
 $sel->add(new jqmOption('Portuguese', 'pt', false));
 $sel->add(new jqmOption('Other', '', false));
 $sel->fieldContain(true);
 
 /**
 * Add and config a jqmSelect object with some jqmOption objects.
 */
 $form->add('<h3>Select Inline</h3>');
 $sex = $form->add(new jqmSelect('sex', 'sex', 'Sex:', '', '', true), true);
 $sex->addOption('Male', 'male', true);
 $sex->addOption('Female', 'female', false);
 $sex->inline(true)->icon('grid')->theme('a');
 
 /**
 * Add a jqmSlider object.
 */
 $form->add('<h3>Select Slider</h3>');
 $form->add(new jqmSlider('yesno', 'yesno', 'Accept:', true, 'Yes', '1', 'No', '0', '', true));
 
 /**
 * Add and config a jqmRadiogroup object.
 */
 $form->add('<h3>Radio Group</h3>');
 $rg = $form->add(new jqmRadiogroup('plan', 'plan', 'Select your plan:'), true);
 $rg->addRadio('Silver', '0');
 $rg->addRadio('Gold', '1');
 $rg->addRadio('Diamond', '3', '', true);
 $rg->fieldContain(true);
 
 /**
 * Add and config a jqmCheckgroup object.
 */
 $form->add('<h3>Checkbox Group</h3>');
 $cg = $form->add(new jqmCheckboxgroup(), true);
 $cg->legend('Favorite Search Engine:');
 $cg->addCheckbox('se1', 'se1', 'Bing');
 $cg->addCheckbox('se2', 'se2', 'Google');
 $cg->addCheckbox('se3', 'se3', 'Yahoo')->fieldContain(true);
 
 /**
 * Add a new jqmInput object (submit button).
 */
 //$form->add(new jqmInput('', '', 'submit', 'Send Now', '', 'b'));
 
 /**
 * Add and config a jqmButton object with data-rel="dialog".
 */
 $send = $form->add(new jqmButton(), true);
 $send->text('Send Now')->href('example-1.php?rand='.rand(0, 9999))->attribute('data-rel', 'dialog');
 
 /**
 * Add the page to jqmPhp object.
 */
 $j->addPage($p);
 
 /**
 * Generate the HTML code.
 */
 echo $j;
?>
live demo
0

Adding Objects

-

Description

This example shows how to add objects to jqmPage, the source is included in jqmPhp Package.

live demo

Source 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
<?php
 /**
 * Example 3 - Adding Objects
 * @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->html()->doctype('html');
 $j->head()->title('Example 3');
 $j->head()->css('http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css');
 $j->head()->jq('http://code.jquery.com/jquery-1.4.4.min.js');
 $j->head()->jqm('http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js');
 $j->head()->add(new jqmLink('css/custom.css'));         // Adding a custom CSS.
 $j->head()->add(new jqmScript('js/custom.js'));         // Adding a custom JavaScript.
 //$j->body()->attribute('onload', 'initCustom();');     // Adding a custom attribute to 'body' tag.
 
 /**
 * Create and config a jqmPage object.
 * Most methods return the object itself allowing call
 * another method on the object in sequence.
 */
 $p = new jqmPage('example-3');
 $p->theme('b')
 ->title('Example 3')
 ->header()->addButton('Example 2', 'example-2.php#', 'a', 'arrow-l')
 ->addButton('Example 4', 'example-4.php#', 'b', 'arrow-r')
 ->theme('a');
 /**
 * addContent() is alias to content()->add().
 */
 $p->content()->add('<h1>Adding Objects</h1>');
 $p->addContent('<h3>Controlgroup and Buttons</h3>');
 /**
 * Create and config a new jqmControlgroup object and add items.
 * Most methods of addition have the last parameter $returnAdded.
 * If it is set to 'true' the added object is returned, otherwise
 * the object that called the method is returned.
 */
 $cg = $p->content()->add(new jqmControlgroup(), true);
 $cg->dataType('vertical');
 $cg->add(new jqmButton('', '', '', 'b', 'example-1.php#', 'Example 1', 'arrow-l', false));
 $cg->add(new jqmButton('', '', '', 'b', 'example-2.php#', 'Example 2', 'arrow-l', false));
 $cg->add(new jqmButton('', '', '', 'b', '#', 'Example 3', 'check', true));
 $cg->add(new jqmButton('', '', '', 'b', 'example-4.php#', 'Example 4', 'arrow-r', false));
 $cg->add(new jqmButton('', '', '', 'b', 'example-5.php#', 'Example 5', 'arrow-r', false));
 
 /**
 * Create and config a new jqmCollapsible object and add items.
 */
 $p->addContent('<h3>Collapsible</h3>');
 $cp = $p->addContent(new jqmCollapsible(), true);
 $cp->title('Collapsible')->collapsed(true)->add('<p>Collapsed Text.</p>')->theme('a');
 
 /**
 * Create and config a new jqmGrid object and add items.
 */
 $p->addContent('<h3>Grid</h3>');
 $g = $p->addContent(new jqmGrid(), true);
 $g->grid('b'); //Sets the grid type (class="ui-grid-b").
 $g->blockA()->add('Column A (ui-block-a)')->add(new jqmButton('', '', '', 'd', 'example-1.php#', 'EX1', 'arrow-l'));
 $g->blockB()->add('Column B (ui-block-b)')->add(new jqmButton('', '', '', 'd', 'example-2.php#', 'EX2', 'arrow-l'));
 $g->blockC()->add('Column C (ui-block-c)')->add(new jqmButton('', '', '', 'd', 'example-4.php#', 'EX4', 'arrow-r'));
 
 /**
 * Create and config a new jqmButton object with inline property.
 */
 $p->addContent('<h3>Inline</h3>');
 $p->addContent(new jqmButton('', '', '', 'a', 'example-1.php#', 'EX1', 'arrow-l', false, true));
 $p->addContent(new jqmButton('', '', '', 'a', 'example-2.php#', 'EX2', 'arrow-l', false, true));
 $p->addContent(new jqmButton('', '', '', 'a', '#', 'EX3', 'check', true, true));
 $p->addContent(new jqmButton('', '', '', 'a', 'example-4.php#', 'EX4', 'arrow-r', false, true));
 $p->addContent(new jqmButton('', '', '', 'a', 'example-5.php#', 'EX5', 'arrow-r', false, true));
 
 /**
 * Add the page to jqmPhp object.
 */
 $j->addPage($p);
 
 /**
 * Generate the HTML code.
 */
 echo $j;
?>
live demo
0

Adding Pages

-

Description

This example shows how to add pages to jqmPhp object, the source is included in jqmPhp Package.

live demo

Source 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
<?php
 /**
 * Example 2 - Adding Pages
 * @package jqmPhp
 * @filesource
 */
 
 /**
 * Include the jqmPhp class.
 */
 include 'lib/jqmPhp.php';
 
 /**
 * Create a new jqmPhp object.
 */
 $j = new jqmPhp();
 
 /**
 * Create a new jqmPage object.
 */
 $p = new jqmPage('example-2');
 $p->theme('b');
 $p->title('Example 2');
 $p->header()->addButton('Example 1', 'example-1.php#', 'a', 'arrow-l');
 $p->header()->addButton('Example 3', 'example-3.php#', 'b', 'arrow-r');
 $p->header()->theme('a');
 $p->addContent('<h1>Adding Pages</h1>');
 $p->addContent('<p>In this example we create a page (jqmPage),');
 $p->addContent(' add content and buttons to the header.');
 $p->addContent(' After we add the page to jqmPhp object.</p>');
 $p->addContent('<a href="example-3.php#" data-role="button">Example 3</a>');
 $p->footer()->title('Example 2 Footer');
 $p->footer()->position('fixed');
 $p->footer()->theme('a');
 /**
 * Add the page to jqmPhp object.
 */
 $j->addPage($p);
 
 /**
 * Generate the HTML code.
 */
 echo $j;
?>
live demo