Nesse 3° artigo vou demonstrar o uso do Botão tipo Toggle estilo IOS em uma consulta e simular o botão Run com a possibilidade de manter marcados os registros ao navegar nas páginas a ao marcar os registros o valor acumulado sendo apresentado no cabeçalho.
BotaToggle

Para o exemplo usaremos:

  1. Jquery e Javascript,
  2. Biblioteca Externa,
  3. Ajax,
  4. Sessão PHP.

Segue o SQL da tabela onde o exemplo será criado:



CREATE TABLE IF NOT EXISTS `grid_onclick` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`questao` varchar(100) NOT NULL,
`resposta` char(1) NOT NULL,
`valor` float(10,2) NOT NULL DEFAULT 0.00,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO `grid_onclick` (`id`, `questao`, `resposta`, `valor`) VALUES
(1, 'Nível do óleo', '1', 230.00),
(2, 'Nível da Água', '1', 150.00),
(3, 'freios', '1', 323.55),
(4, 'estepe', '1', 200.00),
(5, 'pneus', '1', 200.00),
(6, 'lanternas', '', 380.00),
(7, 'faróis', '', 400.00),
(8, 'piscas', '', 150.00);

Agora vamos criar uma aplicação de consulta tipo grid em cima dessa tabela.

AppGrid

Deixamos a barra de ferramentas bem simples para facilitar a demonstração.

Agora vamos  mexer no cabeçalho incluindo o valor:


Total Selecionado: <span id='idsel'></span>

Cabecalho

 

Em Campos, Novo Campo, criar um campo virtual do tipo texto. Demos o nome de Check.

Agora vamos criar uma  biblioteca externa como projeto com o nome:  apps  com duas pastas:  js e php

Para que essa biblioteca? para armazenarmos scripts javascript e scripts php que serão usados exclusivamente na aplicação.
Alguns programadores gostam de jogar código javascript no evento onfooter da consulta, para tal tem que habilitar o rodapé e escrever algo para que o evento funcione. Isso porque aplicações do tipo consulta não possuem repositórios de para javascript. Eu particularmente, já que não temos local específico para código javascript, prefiro usar em bibliotecas externas e fazer o include, assim o Scriptcase ao gerar o código vai inserir o javascript no seu devido lugar.
Outro uso comum que vejo pelos programadores é quando precisam usar um script php acessando via ajax e criam uma aplicação do tipo blank. Também tenho como preferência usar bibliotecas externas para acessar php via ajax. Geralmente usamos o ajax para passar dados, valores do javascript para o php.

Não vou rebater aqui a explicação de como criar bibliotecas externas no Scriptcase pois existem artigos e vídeos que já ensinam como fazê-lo.

Na pasta js dessa biblioteca, criar um arquivo com o nome da aplicação com a extensão .js ( no caso de nossa demonstração: grid_dfrun_toggle_btn.js).

projeto / apps / js / grid_dfrun_toggle_btn.js:


vtotal = 0.00;

function jscheck(seq,id,ajax,valor) {
		
		//var c = $('#'+seq).is(':checked');
				
		if($('#'+seq).is(':checked')) {
			$.post(ajax,{'grid_dfrun_toggle_btn': [id,'0']});
			vtotal -= valor;
		}
		else  { 
			$.post(ajax,{'grid_dfrun_toggle_btn': [id,'1']});
			vtotal += valor;
		}
		$('#idsel').html(Number(vtotal.toFixed(2)).formatMoney(2, 'R$ ', '.', ','));
}
	

Number.prototype.formatMoney = function(places, symbol, thousand, decimal) {
	places = !isNaN(places = Math.abs(places)) ? places : 2;
	symbol = symbol !== undefined ? symbol : "$";
	thousand = thousand || ",";
	decimal = decimal || ".";
	var number = this, 
	    negative = number < 0 ? "-" : "", i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "", j = (j = i.length) > 3 ? j % 3 : 0;
	return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
};

No código é criado uma variável javascript com escopo global.

Método jscheck : Esse método vai ser chamado no evento onclick da coluna check da consulta.
O mesmo detecta se o campo esta habilitado ou desabilitado, e soma ou subtrai o valor da linha ao campo total. Formata o campo total através da função formatMoney e escreto o valor total no cabeçalho através do seletor de id = idsel.

Agora vamos a nosso script php. Esse script vai ser chamado via AJAX pelo método POST onde receberá o id e o valor 0 (caso a linha tenha sido marcada e depois desmarcada) ou 1 (caso a linha tenha sido marcada)  referente  a linha do registro que está sendo marcada. O código vai montar em sessão php  um array com os ids de registro marcados.

apps / php / grid_dfrun_toggle_btn.php:

<?php
session_start();
if($_POST)
{
	foreach ($_POST as $key => $value)
	{
		$_SESSION[$key][$value[0]]=$value[1];
		
	}
}
	
<?

Para a criação do botão estilo toggle IOS, precisaremos de um classe de estilos e 3 tags html.
Existem vários exemplos na web, usando Bootstrap, Materialize entre outros. Mas para facilitar a utilização e re-utilização desse recurso, criei uma classe php para escrever a classe de estilos e as tags com recursos de escolher o tamanho, a cor e o tempo de transição no deslize do botão. para usar a classe, vamos criar uma biblioteca externa em projeto com o nome de BtnToggle que conterá o arquivo btntoggle.class.php. Na própria classe há comentário de como utilizá-la.

 

projeto / BtnToggle / btntoggle.class.php:

 

<?PHP

/*
Classe Botão Estilo Toggle IOS
Por Haroldo Passos
Copyright© 2018 – Julho
Exemplo de uso:

//Incluindo a classe da biblitoeca externa
sc_include_library(‘prj’,’BtnToggle’,’btntoggle.class.php’);

//instanciando a classe
$toggle = new BtnToggle();

// Método echoStyle
//criando estilo para botão:
//Parâmetro 1: tamanho (big, medium, small)
//Parâmetro 2: nome da classe de estilo (livre, palavra sem espaços)
//Parâmetro 3: côr (pelo nome ou pelo valor #555555)
//Parâmetro 4: velocidade em décimso de segundos da transição dodeslise do botão

//** Todos os parâmetros não são obrigatórios **
$toggle->echoStyle(‘big’, ‘big_red’,’red’, ‘0.5’);
$toggle->echoStyle(‘medium’, ‘medium_blue’,’blue’, ‘0.4’);
$toggle->echoStyle(‘small’);

//Método generateTag
//gera o html necessário para criação do botão.
//Parâmetro 1: id do seletor
//Parâmetro 2: nome da classe de estilo a ser usado (criado acima)
//Parâmetro 3: valor do evento onclick, geralmente chamada a um método javascript
//Parametro 4: ‘checked’ para iniciar botão habiolitado ou vazio

echo $toggle->generateTag(‘idtoggle1′,’big_red’, “alert(‘big_red’);”);
echo $toggle->generateTag(‘idtoggle2′,’medium_blue’, “alert(‘medium_blue’);”);
echo $toggle->generateTag(‘idtoggle3′,’small’, “alert(‘small default’);”, ‘checked’);

//para checar use em jquery: $(this’#id’).is(‘:checked’);

*/

class BtnToggle {

private $style;
private $speedTransition;
private $color;
private $classNamePrefix;
private $size;

public function __construct() {
$this->style[‘small’]=”.toggle_@prefix@{margin-bottom:3px}.toggle_@prefix@ > input{display:none}.toggle_@prefix@ > label{position:relative;display:block;height:13px;width:26px;background-color:#f7f7f7;border:1px #cacdce solid;border-radius:100px;cursor:pointer;transition:all @temp@s ease}.toggle_@prefix@ > label:after{position:absolute;left:.1px;top:.1px;display:block;width:13px;height:13px;border-radius:100px;background:#fff;box-shadow:0 2px 2px rgba(0,0,0,0.05);content:”;transition:all @temp@s ease}.toggle_@prefix@ > label:active:after{transform:scale(1.15,0.85)}.toggle_@prefix@ > input:checked ~ label{background-color:@color@;border-color:@color@}.toggle_@prefix@ > input:checked ~ label:after{left:13px}.toggle_@prefix@ > input:disabled ~ label{background-color:#d5d5d5;pointer-events:none}.toggle_@prefix@ > input:disabled ~ label:after{background-color:rgba(255,255,255,0.3)}”;
$this->style[‘medium’]=”.toggle_@prefix@{margin-bottom:3px}.toggle_@prefix@ > input{display:none}.toggle_@prefix@ > label{position:relative;display:block;height:18.5px;width:34.5px;background-color:#f7f7f7;border:1px #cacdce solid;border-radius:100px;cursor:pointer;transition:all @temp@s ease}.toggle_@prefix@ > label:after{position:absolute;left:.5px;top:.1px;display:block;width:18.5px;height:18.56px;border-radius:100px;background:#fff;box-shadow:0 2px 2px rgba(0,0,0,0.05);content:”;transition:all @temp@s ease}.toggle_@prefix@ > label:active:after{transform:scale(1.15,0.85)}.toggle_@prefix@ > input:checked ~ label{background-color:@color@;border-color:@color@}.toggle_@prefix@ > input:checked ~ label:after{left:16.55px}.toggle_@prefix@ > input:disabled ~ label{background-color:#d5d5d5;pointer-events:none}.toggle_@prefix@ > input:disabled ~ label:after{background-color:rgba(255,255,255,0.3)}”;
$this->style[‘big’]=”.toggle_@prefix@{margin-bottom:4px}.toggle_@prefix@ > input{display:none}.toggle_@prefix@ > label{position:relative;display:block;height:28px;width:52px;background-color:#f7f7f7;border:1px #cacdce solid;border-radius:100px;cursor:pointer;transition:all @temp@s ease}.toggle_@prefix@ > label:after{position:absolute;left:1px;top:1px;display:block;width:26px;height:26px;border-radius:100px;background:#fff;box-shadow:0 3px 3px rgba(0,0,0,0.05);content:”;transition:all @temp@s ease}.toggle_@prefix@> label:active:after{transform:scale(1.15,0.85)}.toggle_@prefix@ > input:checked ~ label{background-color:@color@;border-color:@color@}.toggle_@prefix@ > input:checked ~ label:after{left:25px}.toggle_@prefix@ > input:disabled ~ label{background-color:#d5d5d5;pointer-events:none}.toggle_@prefix@ > input:disabled ~ label:after{background-color:rgba(255,255,255,0.3)}”;
$this->color=’#4cda64′;
$this->speedTransition=’0.4′;
$this->classNamePrefix=’small’;
$this->size=’small’;
}

public function echoStyle($size=null,$prefix= null, $color=null, $speed= null ) {

$size = $size == null ? $this->size : $size;
$prefix = $prefix == null ? $this->classNamePrefix : $prefix;
$color= $color == null ? $this->color : $color;
$speed = $speed == null ? $this->speedTransition : $speed;

$style = str_replace(‘@prefix@’,$prefix, $this->style[$size]);
$style = str_replace(‘@color@’,$color, $style);
$style = str_replace(‘@temp@’,$speed, $style);

echo “<style>$style</style>”;

}

public function generateTag ( $id , $prefix = ‘small’, $onclick = ”, $checked = ”) {
$onclick = $onclick == ” ? ” : ‘ onclick=”‘.$onclick.'” ‘;
return “<span class=\”toggle_$prefix\”><input type=\”checkbox\” id=\”$id\” $checked><label for=\”$id\” $onclick></label></span>”;
}

}

Agora que nossas bibliotecas externas estão criadas voltemos a nossa aplicação.

Evento onApplicatInit:

Evento onScriptInit:

Evento onRecord:

 

Você pode gostar de…

Como implementar A2F usando desenvolvimento próprio em NodeJS em uma aplicação Scriptcase

No artigo anterior falamos sobre A2F com o Swivel como ferramente externa para integrar nossas aplic...

Desabilitando o preenchimento automático e autocomplete do navegador Chrome em telas de login

Olá. Aqui pretendo mostrar uma alternativa para desabilitar o preenchimento automático e o autocom...

LESS CSS – O que é e como Otimizar seu CSS

O LESS CSS foi criado para otimizar o código CSS e sua tradução é MENOS CSS. Essa ferramenta nos...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.

Usaremos as informações fornecidas para lhe enviar newsletter e ofertas especiais por email. Você pode cancelar a inscrição quando quiser, clicando em um link no rodapé de qualquer e-mail que receber de nós, ou entrando em contato conosco pelo e-mail sales@scriptcase.net. Saiba mais sobre nossa Polícia de Privacidade.