Цхецкбок хтмл: примери лепих дугмади на чистом ЦСС-у, креирање "хармоника", добијање вредности из форми помоћу ПХП-а и јКуери-а

Када изаберете одговарајући текст, појављује се текст.

ХТМЛ:

 Пункт 1  
  Текст 1. 

  Тачка 2 
  Текст 2. 

  Тачка 3 
  Текст 3. 

ЦСС:

 label[for^="accordion"]{font-size: 20px;}label[for^="accordion"]:hover{cursor:pointer;color: red;text-shadow: 1px 1px 2px currentColor;}label[for^="accordion"]:hover ~ label[for^="accordion"]{opacity: 0.8;text-shadow: 1px 1px 2px currentColor;}input[id^="accordion"]:checked + [id^="accordion-box-"]{max-height: 100%;margin: 10px;}input[id^="accordion"]{position: absolute;left: -9999px;}[id^="accordion-box-"]{overflow: hidden;max-height:0;} 

Примање и обрада вредности помоћу ПХП-а

Размотрите за цхецкбок хтмл примјере кориштења у обрасцима, гдје је такођер могуће добити вриједности (валуе = "ми_валуе").

Вредности се уписују у валуе = "" оператор.

  ХТМЛ 

  ЦСС 

  Јавасцрипт 

  јКуери 

  Пхп 

  Мискл 

  Ајак 

Када шаљете образац, матрица $ _ПОСТ ће садржати оператор = "" у кључу поља и вредност - вредност = "".

Ако је то био регуларни низ, изгледао би овако:

 $post = array(name => value); 

или

 $post = array("HTML_name" => "HTML","CSS_name" => "CSS","javascript_name" => "Javascript","jQuery_name" => "jQuery","PHP_name" => "PHP","ajax_name" => "Ajax",); 

Ми претварамо $ _ПОСТ поље у стринг користећи функцију ПХП имплоде () и додељујемо вредност $ _ПОСТ ["ајак_наме"] променљивој $ ајак. Обично, за све $ _ПОСТ вредности, креирају се варијабле, али на пример, пишемо само једну да не бисмо преоптеретили код непотребним информацијама. Такође је потребно проверити безбедност улазних података $ _ПОСТ, али овде то нећемо урадити, о томе смо већ писали у другим чланцима.

ПХП:

 echo " 
 
 Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " {$ajax = $_POST["ajax"];} echo " 
 
 Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " 
  "; вар_думп ($ _ ПОСТ); ецхо" 
  "; 

Преузимање кључева форме и вредности помоћу јКуери

Да бисте добили вредности из обрасца без поновног учитавања странице, користите скрипте (јавасцрипт или јКуери):

 $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + " 
 
 ");});}); {$("input.my-class").on("click", function(e) {var val = [];$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + " 
 
 ");});}); 

Направите низ:

 var val = []; 

Тада се свака (свака) изабрана ставка ("инпут: цхецкед") уз помоћ пусх функције уписује у вал () поље:

 $("input:checked").each( function(){val.push( $(this).val() );}); 

Садржај низа вал () ће бити приказан на страници, за коју ћемо додати хтмл објекат

јКуери:

 $("#log").html("Выбрано: " + val.join( ", " ) + " 
 
 "); 

Можете сазнати да ли је цхецкбок хтмл одабран помоћу .ис (": цхецкед") и .проп ("означено").

Добит ћемо вриједности (вал) сваке означене кутије и исписати их путем упозорења ():

 if ( $(this).is(':checked') ) alert($(this).val()); 

Урадите исто да бисте добили идентификатор (ид) користећи .проп ("означено"):

 if ( $(this).prop('checked') ) alert($(this).attr("id")); 

Излаз кључева и вредности преко алерт () је, на пример, само, они нису потребни да би форма функционисала, тако да би их требало уклонити из кода.

Нека је дугме за слање обрасца недоступно ("онемогућено") ако није изабран потврдни оквир:

 $('#submitButton').prop("disabled", !$(this).prop("checked")); 

Обратите пажњу на двоточку: .ис (": цхецкед") исправно ради са двоточком, а .проп ("чекирано") ради без двоточке !!!

Додајте могућност означавања свих ставки одједном.

  Отметить все 

 if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked); 

Алл цоде.

ХТМЛ:

  Потребне вјештине: 
  Означи све 

  ХТМЛ 

  ЦСС 

  Јавасцрипт 

  јКуери 

  Пхп 

  Мискл 

  Ајак 

јКуери:

 $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("input.my-class").on("click", function(e) {var val = [];if ( $(this).is(':checked') ) alert($(this).val());if ( $(this).prop('checked') ) alert($(this).attr("id"));$('#submitButton').prop("disabled", !$(this).prop("checked"));if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked);$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: ALL

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: " + val.join( ", " ) + "

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); 

ПХП:

 if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo " 
 
 Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " {$ajax = $_POST["ajax"];} if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo " 
 
 Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo " 
 
 Переменная $ajax установлена";}echo " 
  "; вар_думп ($ _ ПОСТ); ецхо" 
  "; 

Чист дизајн ЦСС тастера

Да би се тастери уредили у складу са дизајном сајта, користићемо само ЦСС. Сакријте оригинални квадрат користећи својства з-индекса и непрозирности, у овом случају квадрати се не померају са екрана, већ једноставно постају транспарентни (непрозирност: 0).

ЦСС:

  position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px; 

На истом месту приказујемо дугмад са сопственим дизајном.

Ознака улаза може се појавити испред ознаке етикете, а затим користити први пример дугмади за обликовање:

 .my-class {position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.my-class + label {position: relative;padding: 0 0 0 60px;cursor: pointer;}.my-class + label:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);transition: 1.2s;}.my-class + label:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.my-class:checked + label:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.my-class:checked + label:after {left: 26px;}.my-class:focus + label:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

Ако је улаз унутар ознаке етикете, онда је поље за потврду смештено у див са класом "текст". Стилови се прослеђују са улаза: проверавају се у див са класом "текст" у другом примеру:

 .label input{position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.text {position: relative;padding: 0 0 0 60px;cursor: pointer;}.text:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);transition: .2s;}.text:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.label input:checked + .text:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.label input:checked + .text:after {left: 26px;}.label input:focus + .text:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

ХТМЛ:

  Потребне вјештине: 
  
  Означи све 
  
  ХТМЛ 
  
  ЦСС 
  
  Јавасцрипт 
  
  јКуери 
  
  Пхп 
  
  Мискл 
  
  Ајак 

Стога, у зависности од ситуације, увек можете изабрати одговарајућу локацију за унос и ознаку. Ако из неког разлога опција када је улаз смјештен испред наљепнице није прикладан, можете поставити улаз унутар ознаке наљепнице.

Можете и стилизовати цхецкбок хтмл користећи сцриптс (јавасцрипт, јКуери), модерни претраживачи раде с њима одличан посао. Али ако корисник уђе на сајт са старог претраживача, онда је преференција и даље ЦСС.

Такође је потребно узети у обзир да ће различити оперативни системи изгледати другачије. Ако Гоогле Цхроме покуша да изглади те разлике, онда у другим претраживачима дизајн тастера може бити веома различит.