Arhive etichetă: jquery mobile

Site booking pentru mobil – Listare localitati

Azi vom implementa listarea localitatilor pentru toate tipurile de cazare, cum ar fi: hoteluri, pensiuni, case, vile, etc. Pentru a adauga aceasta functionalitate site-ului mobil avem de adaugat( utilizam frameworkul MVC CodeIgniter ) :

  1. o metoda in controller pentru a avea informatiile in variabile
  2. un sablon pentru afisarea continutului (afisarea variabilelor)
  3. o metoda in MODEL pentru interogarea informatiilor dorite
Afisarea localitatilor pentru tipurile de cazare

Codul din CONTROLLER

public function category()
{
    $hotel_type_arr                = $this->config->item('hotel_type_arr'); 
    $this->data['category_id']     = $this->uri->segment(3);
    $this->data['category_name']   = $hotel_type_arr[$this->data['category_id']];
    $this->data['book_page_title'] = ucfirst($this->data['category_name']);
    $this->data['content']         = 'main/category';
    $this->data['cities']          = $this->City_model->get_all_entries();

    $this->load->view('layout', $this->data);
}

EXPLICATII:

  • linia #3 : se citeste tipurile de cazare existente. Tipurile de cazare sunt salvate in config
  • linia #4 : se citeste id-ul categoriei de cazare din URL. URL-ul are urmatoarea structura: http://mbooking.sandorkovacs.ro/main/category/1
  • linia #5 : se salveaza numele tipului de cazare intr-o variabila
  • linia #6 : in plus vom afisa tipul de cazare si in titlul paginii
  • linia #7 : calea catre fisierul sablon in care se va face afisarea
  • linia #8 : se face o interogare cu toate localitatile existente in baza de date

Codul din VIEW

<?php if (isset($cities)): ?>
<ul data-role="listview" data-theme="a">
  <?php foreach ($cities as $city): ?>
	  <li><a href="#"><?php echo $city->name; ?></a></li>
  <?php endforeach; ?>
</ul>
<?php endif; ?>

EXPLICATII:

  • linia #1: verificam daca exista localitati in baza de date
  • linia #3 : parcurgem fiecare inregistrare (localitate)
  • linia #4 : afisam numele localitatii

Codul din MODEL

    function get_all_entries($limit = 100)
    {
        $this->db->order_by("name", "asc");
        $query = $this->db->get($this->table_name, $limit);
        return $query->result();
    }

EXPLICATII:

Am folosit ACTIVE RECORD pentru interogarile din baza de date MySQL.

  • linia #3 : ordonare dupa nume in ordine alfabetica
  • linia #4 : contruirea interogarii finale unde primul parametru este numele tabelei, iar al doilea parametru este limita. Daca in tabel avem 300 de localitati si setam limita la 30 atunci se vor interoga doar 30 de localitati
  • linia #5 : returnarea rezultatului

Demo

Pentru a vizualiza varianta demo intrati pe mbooking.sandorkovacs.ro si dati clic pe oricare tip de cazare. Se va afisa o lista cu localitatile existente in baza de date – tabela cities

Site booking pentru mobil – Prima pagina

Continuam sa invatam impreuna cursul „Optimizare site pentru mobil” utilizand libraria jQuery Mobile Framework. Cursul este recomandat elevilor/studentilor si programatorilor incepatori sau nivel de cunostinte medii. In primul capitol am invatat bazele librariei jQuery Mobile: cum sa creeam o pagina simpla, sa creeam liste, linkuri, butoane si multe altele.

In capitolul 2 vom trece la practica si anume vom implementa impreuna un site de booking optimizat pentru mobil. Dupa cum se vede si in poza din dreapta avem antet, doua liste, subsol. Prima lista contine tipurile de cazare: hoteluri, pesiuni,vile si case, iar a doua functionalitatile site-ului si pagina de contact.

In acest exemplu insist mai mult pe functionalitatile site-ului de booking si nu pe design ( voi folosi temele implicite din jQuery Mobile) .

Functionalitati

  1. Listare cazare dintr-o categorie sau/si oras
  2. Adaugare cazare
  3. Rezervare
  4. Listare rezervari

1. Listare cazare dintr-o categorie sau/si oras

Pe prima pagina se va selecta tipul de cazare dorit, pe pagina urmatoare se va da clic pe orasul dorit , iar pe ultimul nivel se va apasa pe cazarea dorita. Dupa ce ai selectat cazarea va aparea un meniu cu taburi cu urmatoarele optiuni:

  1. Prezentare generala
  2. Localizare: embed cod din harta google, bing sau yahoo
  3. Contact

2. Adauga cazare

Va aparea un formular de adaugare cazare. Acest formular contine campurile din tabela de hotel . Pentru a adauga o cazare avem de completat urmatoarele campuri:

  • Denumire – camp text
  • Localitate – lista de selectie cu localitatile existente in tabela city
  • Stele/Margarete – lista de selectia
  • Descriere – camp/arie de text
  • Harta – camp/arie de text – se va insera coduk de harta google, yahoo, bing
  • Contact – camp text

In acest exemplu nu sunt validate campurile, daca doriti sa folositi in productie nu uitati de validari!!!

3. Rezervare

Formularul de rezervare a fost simplificat. Pentru inceput vom avea 4 campuri de completat:

  • Cazare – lista de selectie cu cazarile existente in tabela hotel
  • De la – camp text
  • Pana  la – camp text
  • Observatie – camp/arie de text

Informatiile din tabela se vor salva in tabela book.

In acest exemplu nu sunt validate campurile, daca doriti sa folositi in productie nu uitati de validari!!!

4. Lista rezervari

Se vor afisa rezervarile pentru toate cazarile in  ordine descrescatoare dupa data rezervarii. Pentru afisare se va folosi o lista. In acest moment nu exista paginare ce pentru un tutorial este okay, dar in practica este obligatorie.

Cod sursa


 <!DOCTYPE html>
<html>
<head>
  <title> Booking site - mobile version - learning purpose </title> 

<script type="text/javascript" src="/resources/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="/resources/js/script.js"></script>
<script type="text/javascript" src="/resources/js/jquery.mobile-1.1.1.min.js"></script><script type="text/javascript">// <![CDATA[
document.createElement("article");     document.createElement("footer");     document.createElement("header");     document.createElement("hgroup");     document.createElement("nav");
// ]]></script></pre>
<div data-role="page" data-title="Booking site - mobile version" data-ajax="false">
<div data-role="header">
<h1>Cazare</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="a">
	<li><a href="#">Hoteluri</a></li>
	<li><a href="#">Pensiuni</a></li>
	<li><a href="#">Vile</a></li>
	<li><a href="#">Case</a></li>
</ul>
<div class="list-space"></div>
<div class="list-space"></div>
<ul data-role="listview" data-theme="e">
	<li data-icon="false"><a href="#">Adauga cazare</a></li>
	<li data-icon="false"><a href="#">Rezerva cazare</a></li>
	<li data-icon="false"><a href="#">Lista rezervari</a></li>
	<li data-icon="false"><a href="#">Contact</a></li>
</ul>
<div class="list-space"></div>
</div>
<div data-role="footer">
<h4><a href="https://sandorkovacs84.wordpress.com/2012/04/25/optimizare-site-pentru-mobil-curs-nou/" target="sandor">
 Invata "Optimizare site pentru mobil"
</a></h4>
<h5>Tutorial realizat de
<a href="http://www.sandorkovacs.ro/" target="sandor">
 Sandor</a></h5>
</div>
</div>
<pre>

Tehnologii utilizate

Pentru realizarea site-ului de booking optimizat pentru mobil am folosit urmatoarele:

  1. CodeIgniter MVC
  2. jQuery
  3. jQuery Mobile
  4. standard  HTML5
  5. CSS3

Configurare proiect

Pentru a configura proiectul pe un server sau pe calculatorul local, avem de urmat pasii:

1. Configurare CodeIgniter

Pentru a configura framework-ul CodeIgniter avem de modificat 2 fisiere:

  • application/config/config.php:
    – url-ul

    <!--?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');<br ?-->
    /*
    |--------------------------------------------------------------------------
    | Base Site URL
    |--------------------------------------------------------------------------
    |
    | URL to your CodeIgniter root. Typically this will be your base URL,
    | WITH a trailing slash:
    |
    |	http://example.com/
    |
    | If this is not set then CodeIgniter will guess the protocol, domain and
    | path to your installation.
    |
    */
    $config['base_url']	= 'http://domeniultau.ro';
    
    /*
    |--------------------------------------------------------------------------
    | Index File
    |--------------------------------------------------------------------------
    |
    | Typically this will be your index.php file, unless you've renamed it to
    | something else. If you are using mod_rewrite to remove the page set this
    | variable so that it is blank.
    |
    */
    $config['index_page'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | URI PROTOCOL
    |--------------------------------------------------------------------------
    |
    | This item determines which server global should be used to retrieve the
    | URI string.  The default setting of 'AUTO' works for most servers.
    | If your links do not seem to work, try one of the other delicious flavors:
    |
    | 'AUTO'			Default - auto detects
    | 'PATH_INFO'		Uses the PATH_INFO
    | 'QUERY_STRING'	Uses the QUERY_STRING
    | 'REQUEST_URI'		Uses the REQUEST_URI
    | 'ORIG_PATH_INFO'	Uses the ORIG_PATH_INFO
    |
    */
    $config['uri_protocol']	= 'AUTO';
    
    /*
    |--------------------------------------------------------------------------
    | URL suffix
    |--------------------------------------------------------------------------
    |
    | This option allows you to add a suffix to all URLs generated by CodeIgniter.
    | For more information please see the user guide:
    |
    | http://codeigniter.com/user_guide/general/urls.html
    */
    
    $config['url_suffix'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | Default Language
    |--------------------------------------------------------------------------
    |
    | This determines which set of language files should be used. Make sure
    | there is an available translation if you intend to use something other
    | than english.
    |
    */
    $config['language']	= 'english';
    
    /*
    |--------------------------------------------------------------------------
    | Default Character Set
    |--------------------------------------------------------------------------
    |
    | This determines which character set is used by default in various methods
    | that require a character set to be provided.
    |
    */
    $config['charset'] = 'UTF-8';
    
    /*
    |--------------------------------------------------------------------------
    | Enable/Disable System Hooks
    |--------------------------------------------------------------------------
    |
    | If you would like to use the 'hooks' feature you must enable it by
    | setting this variable to TRUE (boolean).  See the user guide for details.
    |
    */
    $config['enable_hooks'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Class Extension Prefix
    |--------------------------------------------------------------------------
    |
    | This item allows you to set the filename/classname prefix when extending
    | native libraries.  For more information please see the user guide:
    |
    | http://codeigniter.com/user_guide/general/core_classes.html
    | http://codeigniter.com/user_guide/general/creating_libraries.html
    |
    */
    $config['subclass_prefix'] = 'MY_';
    
    /*
    |--------------------------------------------------------------------------
    | Allowed URL Characters
    |--------------------------------------------------------------------------
    |
    | This lets you specify with a regular expression which characters are permitted
    | within your URLs.  When someone tries to submit a URL with disallowed
    | characters they will get a warning message.
    |
    | As a security measure you are STRONGLY encouraged to restrict URLs to
    | as few characters as possible.  By default only these are allowed: a-z 0-9~%.:_-
    |
    | Leave blank to allow all characters -- but only if you are insane.
    |
    | DO NOT CHANGE THIS UNLESS YOU FULLY UNDERSTAND THE REPERCUSSIONS!!
    |
    */
    $config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';
    
    /*
    |--------------------------------------------------------------------------
    | Enable Query Strings
    |--------------------------------------------------------------------------
    |
    | By default CodeIgniter uses search-engine friendly segment based URLs:
    | example.com/who/what/where/
    |
    | By default CodeIgniter enables access to the $_GET array.  If for some
    | reason you would like to disable it, set 'allow_get_array' to FALSE.
    |
    | You can optionally enable standard query string based URLs:
    | example.com?who=me&what=something&where=here
    |
    | Options are: TRUE or FALSE (boolean)
    |
    | The other items let you set the query string 'words' that will
    | invoke your controllers and its functions:
    | example.com/index.php?c=controller&m=function
    |
    | Please note that some of the helpers won't work as expected when
    | this feature is enabled, since CodeIgniter is designed primarily to
    | use segment based URLs.
    |
    */
    $config['allow_get_array']		= TRUE;
    $config['enable_query_strings'] = FALSE;
    $config['controller_trigger']	= 'c';
    $config['function_trigger']		= 'm';
    $config['directory_trigger']	= 'd'; // experimental not currently in use
    
    /*
    |--------------------------------------------------------------------------
    | Error Logging Threshold
    |--------------------------------------------------------------------------
    |
    | If you have enabled error logging, you can set an error threshold to
    | determine what gets logged. Threshold options are:
    | You can enable error logging by setting a threshold over zero. The
    | threshold determines what gets logged. Threshold options are:
    |
    |	0 = Disables logging, Error logging TURNED OFF
    |	1 = Error Messages (including PHP errors)
    |	2 = Debug Messages
    |	3 = Informational Messages
    |	4 = All Messages
    |
    | For a live site you'll usually only enable Errors (1) to be logged otherwise
    | your log files will fill up very fast.
    |
    */
    $config['log_threshold'] = 0;
    
    /*
    |--------------------------------------------------------------------------
    | Error Logging Directory Path
    |--------------------------------------------------------------------------
    |
    | Leave this BLANK unless you would like to set something other than the default
    | application/logs/ folder. Use a full server path with trailing slash.
    |
    */
    $config['log_path'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | Date Format for Logs
    |--------------------------------------------------------------------------
    |
    | Each item that is logged has an associated date. You can use PHP date
    | codes to set your own date formatting
    |
    */
    $config['log_date_format'] = 'Y-m-d H:i:s';
    
    /*
    |--------------------------------------------------------------------------
    | Cache Directory Path
    |--------------------------------------------------------------------------
    |
    | Leave this BLANK unless you would like to set something other than the default
    | system/cache/ folder.  Use a full server path with trailing slash.
    |
    */
    $config['cache_path'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | Encryption Key
    |--------------------------------------------------------------------------
    |
    | If you use the Encryption class or the Session class you
    | MUST set an encryption key.  See the user guide for info.
    |
    */
    $config['encryption_key'] = 'djsaidjioas^&^&*dshahdusadsahhdusua&*(';
    
    /*
    |--------------------------------------------------------------------------
    | Session Variables
    |--------------------------------------------------------------------------
    |
    | 'sess_cookie_name'		= the name you want for the cookie
    | 'sess_expiration'			= the number of SECONDS you want the session to last.
    |   by default sessions last 7200 seconds (two hours).  Set to zero for no expiration.
    | 'sess_expire_on_close'	= Whether to cause the session to expire automatically
    |   when the browser window is closed
    | 'sess_encrypt_cookie'		= Whether to encrypt the cookie
    | 'sess_use_database'		= Whether to save the session data to a database
    | 'sess_table_name'			= The name of the session database table
    | 'sess_match_ip'			= Whether to match the user's IP address when reading the session data
    | 'sess_match_useragent'	= Whether to match the User Agent when reading the session data
    | 'sess_time_to_update'		= how many seconds between CI refreshing Session Information
    |
    */
    $config['sess_cookie_name']		= 'ci_session';
    $config['sess_expiration']		= 7200;
    $config['sess_expire_on_close']	= FALSE;
    $config['sess_encrypt_cookie']	= FALSE;
    $config['sess_use_database']	= FALSE;
    $config['sess_table_name']		= 'ci_sessions';
    $config['sess_match_ip']		= FALSE;
    $config['sess_match_useragent']	= TRUE;
    $config['sess_time_to_update']	= 300;
    
    /*
    |--------------------------------------------------------------------------
    | Cookie Related Variables
    |--------------------------------------------------------------------------
    |
    | 'cookie_prefix' = Set a prefix if you need to avoid collisions
    | 'cookie_domain' = Set to .your-domain.com for site-wide cookies
    | 'cookie_path'   =  Typically will be a forward slash
    | 'cookie_secure' =  Cookies will only be set if a secure HTTPS connection exists.
    |
    */
    $config['cookie_prefix']	= "";
    $config['cookie_domain']	= "";
    $config['cookie_path']		= "/";
    $config['cookie_secure']	= FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Global XSS Filtering
    |--------------------------------------------------------------------------
    |
    | Determines whether the XSS filter is always active when GET, POST or
    | COOKIE data is encountered
    |
    */
    $config['global_xss_filtering'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Cross Site Request Forgery
    |--------------------------------------------------------------------------
    | Enables a CSRF cookie token to be set. When set to TRUE, token will be
    | checked on a submitted form. If you are accepting user data, it is strongly
    | recommended CSRF protection be enabled.
    |
    | 'csrf_token_name' = The token name
    | 'csrf_cookie_name' = The cookie name
    | 'csrf_expire' = The number in seconds the token should expire.
    */
    $config['csrf_protection'] = FALSE;
    $config['csrf_token_name'] = 'csrf_test_name';
    $config['csrf_cookie_name'] = 'csrf_cookie_name';
    $config['csrf_expire'] = 7200;
    
    /*
    |--------------------------------------------------------------------------
    | Output Compression
    |--------------------------------------------------------------------------
    |
    | Enables Gzip output compression for faster page loads.  When enabled,
    | the output class will test whether your server supports Gzip.
    | Even if it does, however, not all browsers support compression
    | so enable only if you are reasonably sure your visitors can handle it.
    |
    | VERY IMPORTANT:  If you are getting a blank page when compression is enabled it
    | means you are prematurely outputting something to your browser. It could
    | even be a line of whitespace at the end of one of your scripts.  For
    | compression to work, nothing can be sent before the output buffer is called
    | by the output class.  Do not 'echo' any values with compression enabled.
    |
    */
    $config['compress_output'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Master Time Reference
    |--------------------------------------------------------------------------
    |
    | Options are 'local' or 'gmt'.  This pref tells the system whether to use
    | your server's local time as the master 'now' reference, or convert it to
    | GMT.  See the 'date helper' page of the user guide for information
    | regarding date handling.
    |
    */
    $config['time_reference'] = 'local';
    
    /*
    |--------------------------------------------------------------------------
    | Rewrite PHP Short Tags
    |--------------------------------------------------------------------------
    |
    | If your PHP installation does not have short tag support enabled CI
    | can rewrite the tags on-the-fly, enabling you to utilize that syntax
    | in your view files.  Options are TRUE or FALSE (boolean)
    |
    */
    $config['rewrite_short_tags'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Reverse Proxy IPs
    |--------------------------------------------------------------------------
    |
    | If your server is behind a reverse proxy, you must whitelist the proxy IP
    | addresses from which CodeIgniter should trust the HTTP_X_FORWARDED_FOR
    | header in order to properly identify the visitor's IP address.
    | Comma-delimited, e.g. '10.0.1.200,10.0.1.201'
    |
    */
    $config['proxy_ips'] = '';
    
    /* End of file config.php */
    /* Location: ./application/config/config.php */
    
  • application/config/database.php:
    – nume server
    – nume baza de date
    – nume utilizator
    – parola utilizator

    <!--?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');<br ?-->/*
    | -------------------------------------------------------------------
    | DATABASE CONNECTIVITY SETTINGS
    | -------------------------------------------------------------------
    | This file will contain the settings needed to access your database.
    |
    | For complete instructions please consult the 'Database Connection'
    | page of the User Guide.
    |
    | -------------------------------------------------------------------
    | EXPLANATION OF VARIABLES
    | -------------------------------------------------------------------
    |
    |	['hostname'] The hostname of your database server.
    |	['username'] The username used to connect to the database
    |	['password'] The password used to connect to the database
    |	['database'] The name of the database you want to connect to
    |	['dbdriver'] The database type. ie: mysql.  Currently supported:
    				 mysql, mysqli, postgre, odbc, mssql, sqlite, oci8
    |	['dbprefix'] You can add an optional prefix, which will be added
    |				 to the table name when using the  Active Record class
    |	['pconnect'] TRUE/FALSE - Whether to use a persistent connection
    |	['db_debug'] TRUE/FALSE - Whether database errors should be displayed.
    |	['cache_on'] TRUE/FALSE - Enables/disables query caching
    |	['cachedir'] The path to the folder where cache files should be stored
    |	['char_set'] The character set used in communicating with the database
    |	['dbcollat'] The character collation used in communicating with the database
    |				 NOTE: For MySQL and MySQLi databases, this setting is only used
    | 				 as a backup if your server is running PHP < 5.2.3 or MySQL < 5.0.7
    |				 (and in table creation queries made with DB Forge).
    | 				 There is an incompatibility in PHP with mysql_real_escape_string() which
    | 				 can make your site vulnerable to SQL injection if you are using a
    | 				 multi-byte character set and are running versions lower than these.
    | 				 Sites using Latin-1 or UTF-8 database character set and collation are unaffected.
    |	['swap_pre'] A default table prefix that should be swapped with the dbprefix
    |	['autoinit'] Whether or not to automatically initialize the database.
    |	['stricton'] TRUE/FALSE - forces 'Strict Mode' connections
    |							- good for ensuring strict SQL while developing
    |
    | The $active_group variable lets you choose which connection group to
    | make active.  By default there is only one group (the 'default' group).
    |
    | The $active_record variables lets you determine whether or not to load
    | the active record class
    */
    
    $active_group = 'default';
    $active_record = TRUE;
    
    $db['default']['hostname'] = 'localhost';
    $db['default']['username'] = 'nume_utilizator';
    $db['default']['password'] = 'parola';
    $db['default']['database'] = 'nume_baza_de_date';
    $db['default']['dbdriver'] = 'mysql';
    $db['default']['dbprefix'] = '';
    $db['default']['pconnect'] = TRUE;
    $db['default']['db_debug'] = TRUE;
    $db['default']['cache_on'] = FALSE;
    $db['default']['cachedir'] = '';
    $db['default']['char_set'] = 'utf8';
    $db['default']['dbcollat'] = 'utf8_general_ci';
    $db['default']['swap_pre'] = '';
    $db['default']['autoinit'] = TRUE;
    $db['default']['stricton'] = FALSE;
    
    /* End of file database.php */
    /* Location: ./application/config/database.php */
    
    
  • adaugat fisierul .htaccess cu urmatorul cod, pentru a elimina index.php-ul din CodeIgniter:
    RewriteEngine on
    RewriteCond $1 !^(index\.php|images|resources|robots\.txt)
    RewriteRule ^(.*)$ /index.php/$1 [L]
    

    – Bineinteles trebuie sa ai activat modulul rewrite in Apache

  • create dosarul „resources” in folderul de root. Aici se vor copia fisierele CSS si JS, imaginile folosite pentru proiect.
    – 
    CSS-ul se va copia in folderul resources/css/
    – JS-ul se va copia in folderul resources/js/

Demo

Pentru capitolul 2 am creat un demo pe acest link: http://mbooking.sandorkovacs.ro

Bafta tuturor!

Lectia 12 – Bara de instrumente pentru navigare

jQuery Mobile ofera o bara de instrumente pentru navigare, se pot adauga pana la 5 butoane ( pe un rand ) cu sau fara iconita. Bara de instrumente de navigare se poate adauga atat in antet cat si in subsol.
Bara de instrumente pentru navigare este doar o lista <ul> avand atributul data-role=”navbar”.

Sa cream impreuna o bara de instrumente de navigare cu 2 butoane: „Prima pagina” si „Contact”

	<div data-role="header"  data-position="fixed" data-theme="c" >
			<h1>Lectia 12 – Bara de instrumente pentru navigare</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active"   data-transition="slide">Prima pagina</a></li>
					<li><a href="#contact"   data-transition="slide">Contact</a></li>
				</ul>
			</div><!-- /navbar -->
	</div>

Demo

Demo-ul complet poti vizualiza aici.

Lectia 11 – Bara de instrumente Footer

Bara de instrumente Footer se comporta ca si cea pentru header. Bara de instrumente Footer se afla in josul paginii, in multe cazuri nu este vizibila fara a face scroll in jos.

Structura

Bara de instrumente Footer este un div cu atributul data-role=”footer” .

	<div data-role="footer">
		<h1>Lectia 11 - Bara de instrumente Footer</h1>
	</div>

Adaugare butoane

Este foarte simplu sa adaugi butoane pentru bara de instrumente footer. Linkurile trebuie sa contina atributul data-role=”button”. In footer poti adauga mai multe butoane, ele fiind aliniate implicit stanga.

Exemplu cu trei butoane: „Adauga”, „Sus” si „Jos”

<div data-role="footer" class="ui-bar">
	<a href="l11ex1.html" data-role="button" data-icon="plus">Adauga</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-u">Sus</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-d">Jos</a>
</div>

jQuery Mobile Framework ofera posibilitatea de a grupa butoane. Vezi exemplu #2:

<div data-role="footer" class="ui-bar">
  <div data-role="controlgroup" data-type="horizontal">
	<a href="l11ex1.html" data-role="button" data-icon="plus">Adauga</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-u">Sus</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-d">Jos</a>
  </div>
</div>

Observatii

Pozitionarea „fixed”, „fullscreen” si „inline” sunt valabile si pentru bara de instrumente footer.

Demo

V-am pregatit demo-urile :

Lectia 10 – Bara de instrumente Header

Bara de instrumente Header se afla in antetul paginii, contine titlul paginii si maxim 2 butoane . Practic se pot insera mai multe butoane dar ramanem la 2.

Structura

Header-ul este un div cu atributul data-role=”header” . De obicei incepem sa adaugam un titlu.

	<div data-role="header">
		<h1>Lectia 10 - Bara de instrumente Header</h1>
	</div>

Adaugare butoane

Cum am zis, este posibila adaugarea butoanelor pe bara de instrumente header. In mod normal adaugam pana la doua butoane si jQuery Mobile Framework va pozitiona implicit primul buton in partea stanga, iar celalalt buton in partea dreapta.

Exemplu cu doua butoane: „Anuleaza” si „Salveaza”

	<div data-role="header">
		<a href="l10ex1.html" data-icon="delete">Anuleaza</a>
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check">Salveaza</a>	
        </div>

Exemplu2: Stilizare buton salveaza

	<div data-role="header">
		<a href="l10ex1.html" data-icon="delete">Anuleaza</a>
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check" data-theme="c">Salveaza</a>	
        </div>

Butoanele se pot pozitiona prin intermediul claselor css ( jquery.mobile.min.css ): ui-btn-right si ui-btn-left.

Exemplu3: Pozitionare butonului Salveaza la dreapta

	<div data-role="header">
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check" data-theme="c" class="ui-btn-right">Salveaza</a>	
        </div>

Exemplu4: Pozitionare butonului Salveaza la stanga

	<div data-role="header">
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check"  class="ui-btn-left">Salveaza</a>	
        </div>

Demo

V-am pregatit demo-urile :

Lectia 9 – Introducere in bara de instrumente

Cred ca fiecare dintre voi stie ce este bara de instrumente (toolbar) . In jQuery Mobile Framework sunt definite doua tipuri de bare de instrumente:

  1. Bara de instrumente pentru antet ( header toolbar ); de obicei contine titlul pagini + doua butoane – un buton in partea stanga si alt buton in partea dreapta
  2. Bara de instrumente pentru subsol ( footer toolbar ); de obicei contine atat butoane cat si text + linkuri.

Pozitionare

Barele de instrumente se pot pozitiona in 3 moduri:

  • inline – pozitionare implicita in jQuery Mobile Framework. Pozitionare „inline” inseamna ca se va aloca o zona pentru bara de instrumente, dar nu va fi mereu vizibila.
  • fixed – Prin pozitionare „fixed” bara de instrumente va rif mereu vizibila, din pacate va „fura” o mica zona din ecran .
  • fullscreen – Pozitionare „fullscreen” este tot o pozitionare „fixed” doar ca nu se va „fura zona din ecran” , toolbar-ul este transparent si sub toolbar se vede continutul paginii.

Cod sursa

Incepand cu aceasta lectie nu voi adauga tot codul, doar modificarile.

Pozitionare „fixed”

	<div data-role="header"  
             data-position="fixed" 
             data-theme="b">
		<h1>Lectia 9 - Introducere in bara de instrumente</h1>
...
	</div>

Pozitionare „fullscreen”

	<div data-role="header"  
             data-position="fixed" 
             data-fullscreen="true"
             data-theme="b">
		<h1>Lectia 9 - Introducere in bara de instrumente</h1>
...
	</div>

Demo

V-am pregatit 2 fisiere demo, primul exemplu cu pozitionare fixa („fixed”), iar celelalt cu pozitionare pe tot ecran („fullscreen”).

Lectia8 – Ferestre pop-up

Cand ne gandim la ferestre pop-up, aducem aminte de ferestrele enervante ce se deschid fara acordul nostru.

In cazul nostru ferestrele pop-up folosim mai mult pentru a confirma o actiune ( stergere, modificare) sau pentru a notifica utilizatorul ( ex: nume utilizator prea scurt – la un formular de inregistrare – ) .

In JQMF nu se face diferenta intre pagina si fereastra pop-up, pentru ca ambele exista in codul nostru HTML. Totusi ca o pagina sa devina o fereastra de tip pop-up, avem de adaugat atributul data-rel=”dialog” pentru eticheta <a>.

Exemplu1

   <a href="alt_fisier.html"
      data-rel="dialog">
         Deschide fereastra pop-up</a>

Bineinteles si pentru afisarea ferestrelor pop-up se pot adauga efecte de tranzitie.

Exemplu2: Adaugam efectul de tranzitie „slidedown”

   <a href="alt_fisier.html"
      data-rel="dialog"
      data-transition="slidedown">
         Deschide fereastra pop-up cu efectul "slidedown"</a>

Personalizare stil

Personalizarea ferestrei pop-up se poate realiza in 2 moduri:

  1. Adaugarea atributului data-theme (ex: data-theme=”e”)
  2. Modificarea fisierului CSS: De exemplu doresti sa optimizezi fereastra pentru samsung mini ce are o rezolutie de 240×320 px, poti sa suprascrii in fisierul jquery.mobile.min.css urmatorele:
    .ui-dialog .ui-header, 
    .ui-dialog .ui-content, 
    .ui-dialog .ui-footer { 
    	max-width: 240px; 
    	margin: 10% auto 15px auto; 
    }
    

Demo

V-am pregatit fisierul demo cu ferestre pop-up: Vizualizeaza DEMO .

Lectia 7 – Filtre

Filtrarea unei liste este foarte utila cand dorim sa gasim un anumit lucru. De exemplu, in lectia 6 am avut o lista cu marcile masinilor si acum dorim sa activam un filtru.
Activarea filtrului se face adaugand atributul data-filter=”true” pentru lista din exemplu.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 7 - Filtre</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 7 - Filtre</h1>
	</div>

	<div data-role="content">
	<p> 
        <ul data-role="listview" data-filter="true">
	   <li><a href="l6ex2.html">Acura</a></li>
           <li><a href="l6ex2.html">Audi</a></li>
	   <li><a href="l6ex2.html">BMW</a></li>
	   <li><a href="l6ex2.html">Dacia</a></li>
	   <li><a href="l6ex2.html">Mercedes</a></li>
	   <li><a href="l6ex2.html">Opel</a></li>
        </ul>
</p>

	</div>

	<div data-role="footer">
<p>&copy; 2012</p>
	</div>
   </div>

</body>
</html>

Observatie

  • filtrul se adauga folosind atributul data-filter=”true”

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO .

Lectia 6 – Liste pentru site mobil

Adaugand atributul data-role=”listview” pentru o lista nesortata ( la eticheta <ul> ) , jQuery Mobile Framework transforma aceasta lista intr-una optimizata pentru mobil. Elementele din lista vor fi linkuri si se pot aplica efectele de tranzitie pentru a emula cat mai bine o aplicatie nativa mobil.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 6 - Liste pentru site mobil</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 6 - Liste pentru site mobil</h1>
	</div>

	<div data-role="content">
	<p> 
        <ul data-role="listview" >
	   <li><a href="l6ex2.html">Acura</a></li>
           <li><a href="l6ex2.html">Audi</a></li>
	   <li><a href="l6ex2.html">BMW</a></li>
        </ul>
</p>

	</div>

	<div data-role="footer">
	<a href="#pagina2" 
           data-transition="pop"
	   title="Du-te la pagina2">Pagina 2</a> 
	</div>
	</div>
   </div>

</body>
</html>

Observatii

  • pentru site-uri mobile vom folosi tot eticheta <ul>
  • pentru a activa optimizarile jQuery Mobile pentru liste se va adauga atributul data-role=”listview”

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO