Audi 1.0

by ffabreti

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[NR-18 Mobile]" />
  <meta name="viewport" id="viewportid" content="width=device-width, minimum-scale=1.0, user-scalable=yes">
  <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>  
  <title>NR-18 Mobile</title>  
  <link href="http://code.jquery.com/mobile/latest/jquery.mobile.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.js"></script>
  <script>  </script>
   
</head>

<body>
  <div id=master-page data-role="page">
  <div data-theme="a" data-role="header">
    <h3> Audi 1.0 </h3>
    </div>

  <div data-role="content">
     <ul id='lista-principal' data-role="listview" data-filter="true" data-filter-placeholder="Pesquisar..." data-theme='c' data-divider-theme='b' data-split-icon="gear">
       <li data-role="list-divider" data-groupoptions="18.1" class='searchable'> <p>18.1 - Objetivo e Campo de Aplicação</p></li>
       <li data-groupoptions='18.1' > <a href="#">
           <p class='18.1.1'> 18.1.1 - Esta Norma Regulamentadora - NR estabelece diretrizes de ordem administrativa, de planejamento e de organização, que objetivam a implementação de medidas de controle e sistemas preventivos de segurança nos processos, nas condições e no meio ambiente de trabalho na Indústria da Construção. </p>
         </a>
       </li>
  <li data-groupoptions='18.1' > <a href="#">
           <p class='18.1.2'> 18.1.2 - Consideram-se atividades da Indústria da Construção as constantes do Quadro I, Código da Atividade Específica, da NR 4 - Serviços Especializados em Engenharia de Segurança e em Medicina do Trabalho e as atividades e serviços de demolição, reparo, pintura, limpeza e manutenção de edifícios em geral, de qualquer número de pavimentos ou tipo de construção, inclusive manutenção de obras de urbanização e paisagismo (Alterado pela Portaria SSST n.º 63, de 28...

CSS

.pass {
    background: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Status-security-high-icon.png) left top no-repeat;
    background-color: rgb(238,238,238) !important;
}
.fail {
    background: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Status-security-low-icon.png) left top no-repeat;
    background-color: rgb(255,200,200) !important;
}
.att {
    background: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Status-security-medium-icon.png) left top no-repeat;
    background-color: rgb(255,255,200) !important;
}
.corr {
    background: url(http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-rating-icon.png) left top no-repeat;
    background-color: rgb(50,255,110) !important;
}



ul li p {
    padding-left: 22px !important;
}

.override-ui-screen-hidden {
    display:block !important;
}
.dont-truncate {
 white-space: normal;
 }


.myselected
{
	border: 2px solid rgb( 48, 130, 255);
	background-color: rgb(200, 214, 255);
	font-weight: bold;
	color: 					#111 /*{e-bdown-color}*/;
	text-shadow: 0 /*{e-bdown-shadow-x}*/ 1px /*{e-bdown-shadow-y}*/ 0 /*{e-bdown-shadow-radius}*/ 	#fff /*{e-bdown-shadow-color}*/;


}

JavaScript

$(document).on('pagecreate',  '#master-page', function(){

//----- global variable $originallist (dont use var here, so it will be global)
  $originallist = $('#lista-principal').clone();
  console.log('original list:\n' + $originallist.html());
  
//----- adiciona split-buttons na lista-principal
  
    //--- define conteudo para split_button
    var split_button = $('<a></a>')
                      .attr({ 'data-rel'        :'popup', 
                              'data-position-to':'origin', 
                              'data-transition' :'slidedown',
                              'class'           :'split'
                      }).html('Vistoria');
    //recover the originallist for editing
    var editlist = $originallist.clone();
    //add split-buttons for all itens
    editlist.find('li').append(split_button);
    //log the edited list
    //console.log('edited list:\n' + editlist.html());
    // alter list html
    $('#lista-principal').html( editlist.html() );
    // re-enhance the list
    //$('#lista-principal').listview('refresh'); no pagecreate os widgets se auto-inicializam
    //console.log('enhanced list:\n' + $('#mylist').html());
    editlist = null; 
  
}); //pagecreate

//----- OUTROS EVENTOS -------------------------
$(document).on('pageinit', '#master-page', function(){

  //------ trata clique nos itens da lista ------  
   $('ul#lista-principal>li').on('click', function(event) {
     event.preventDefault(); 
     //se for divider, selecione-o e mostre todos os subitens     
     if ( $(this).attr('data-role')==='list-divider' ) {
         var group = $(this).attr('data-groupoptions');
         var these = $('li[data-groupoptions="'+group+'"]');
         // limpa tudo
         $('.ui-li-desc.dont-truncate').removeClass('dont-truncate');
         $('.ui-li.myselected').removeClass('myselected');    
         // selecione
         these.find('.ui-li-desc').addClass('dont-truncate');
         $(this).addClass('myselected');
     }
     else...