By: VIIT Firefox Club

Building Blocks



Introduction Check Box Radio Button Slider Collapsible FlipSwitch Navigation Bar Panel
Building Blocks

Introduction

This Application will give you an Introduction to some of the basic constructs which you can use for developing your own Firefox OS Application


Requirements:

1. Need to have basic knowledge of HTML,JavaScript and CSS.

2. The app uses jquery to give an app like look.

3. jquery files used are:

  a) jquery.mobile-1.4.0.min.css

  b) jquery-2.1.0.min.js

  c) jquery.mobile-1.4.0.min.js



Developer:

This App has been developed by members of VIIT Firefox Club.

Hash Tag:

  #ViitFirefoxClub

  #firefoxstudents


Website:https://wiki.mozilla.org/VIIT_Firefox_Club

Yoyo Google Yoyo Google Yoyo Google
Building Blocks

CheckBox


Code:

<input type="checkbox" name="chkbox1">
Any Text</input>

Yoyo Google Yoyo Google Yoyo Google
Building Blocks

Radio Button


Code:

<input type="radio" name="radio1">
Any Text</input>

Yoyo Google Yoyo Google Yoyo Google
Building Blocks

Slider

Range

Code:

<input type="range" min="0" max="100">
Any Text</input>

Yoyo Google Yoyo Google Yoyo Google
Building Blocks

Collapsible

This is Heading

This is Content.

Code:

<div data-role="collapsible">
<h4>This is Heading</h4>
This is Content
</div>

Yoyo Google Yoyo Google Yoyo Google
Building Blocks

FlipSwitch


Code:

<select id="select-based-flipswitch"
data-role="flipswitch">
<option value="on">ON</option>
<option value="off">OFF</option>
</select>

Yoyo Google Yoyo Google Yoyo Google

Navigation Bar


Code:

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#link">One</a></li>
<li><a href="#link">Two</a></li>
</ul>
</div>
</div>

Yoyo Google Yoyo Google Yoyo Google
Building Blocks

Panel

My name is Qaidjohar
Open the Panel

Code:

<div data-role="panel" id="mypanel">
Type all HTML you want
to display in Panel
</div>
<a href="#mypanel">Open the Panel</a>

Yoyo Google Yoyo Google Yoyo Google