<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Anúncio</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Título do anúncio">Título:</label>
<div class="col-md-6">
<input id="Título do anúncio" name="Título do anúncio" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Vídeo:</label>
<div class="col-md-6">
<input id="textinput" name="textinput" type="text" placeholder="Copie e cole o link do Youtube que mostra o vídeo do seu quarto." class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">CEP:</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="xx.xxx-xxx" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Endereço:</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Número:</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="Não será mostrado" class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Estado:</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Acre</option>
<option value="2">Alagoas</option>
<option value="3">Amazonas</option>
<option value="4">Amapá</option>
<option value="5">Bahia</option>
<option value="6">Ceará</option>
<option value="7">Brasília</option>
<option value="8">Espírito Santo</option>
<option value="9">Goiás</option>
<option value="10">Maranhão</option>
<option value="11">Minas Gerais</option>
<option value="12">Mato Grosso do Sul</option>
<option value="13">Mato Grosso</option>
<option value="14">Pará</option>
<option value="15">Paraíba</option>
<option value="16">Pernambuco</option>
<option value="17">Piauí</option>
<option value="18">Paraná</option>
<option value="19">Rio de Janeiro</option>
<option value="20">Rio Grande do Norte</option>
<option value="21">Rondônia</option>
<option value="22">Roraima</option>
<option value="23">Rio Grande do Sul</option>
<option value="24">Santa Catarina</option>
<option value="25">Sergipe</option>
<option value="26">São Paulo</option>
<option value="27">Tocantins</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Cidade:</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Rio de Janeiro</option>
<option value="2">Cabo Frio</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Bairro:</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Flamengo</option>
<option value="2">Catete</option>
<option value="3">Copacabana</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Telefone:</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="(xx) xxxxx-xxxx" class="form-control input-md" required="">
</div>
</div>
<!-- Prepended checkbox -->
<div class="form-group">
<label class="col-md-4 control-label" for="prependedcheckbox">Telefone:</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input id="prependedcheckbox" name="prependedcheckbox" class="form-control" type="text" placeholder="(xx) xxxxx-xxxx">
</div>
<p class="help-block">Não mostrar telefones</p>
</div>
</div>
<!-- Button Drop Down -->
<div class="form-group">
<label class="col-md-4 control-label" for="buttondropdown">Aluguel:</label>
<div class="col-md-4">
<div class="input-group">
<input id="buttondropdown" name="buttondropdown" class="form-control" placeholder="R$ 0.000" type="text" required="">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Mensal
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Semanal</a></li>
<li><a href="#">Mensal</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Taxas:</label>
<div class="col-md-4">
<input id="textinput" name="textinput" type="text" placeholder="R$ 0.000" class="form-control input-md">
<span class="help-block">luz, água...</span>
</div>
</div>
<div class="funkyradio-success">
<input type="checkbox" name="checkbox" id="checkbox3" checked/>
<label for="checkbox3">Third Option success</label>
</div>
</fieldset>
</form>
@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css')
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
/* SCSS STYLES */
/*
.funkyradio {
div {
clear: both;
overflow: hidden;
}
label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
&:empty {
display: none;
~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
user-select: none;
&:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
}
}
&:hover:not(:checked) ~ label {
color: #888;
&:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
}
&:checked ~ label {
color: #777;
&:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
}
&:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
}
&-default {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #333;
background-color: #ccc;
}
}
}
&-primary {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
}
}
&-success {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
}
}
&-danger {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
}
}
&-warning {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
}
}
&-info {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
}
}
}
*/
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-success btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('Phone');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
event.preventDefault();
var $selectGroup = $(this).closest('.input-group-select');
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
});
})(jQuery);
