Feature Selector
A module for cars, options and color searches. Can be changed as desired, can serve on different topics.
Baz Araç Tutarı: Tanımlanmamış
Opsiyon Tutarı: Tanımlanmamış
Renk Tutarı: Tanımlanmamış
Toplam Tutarı: 0 TL
View HTML Code
<![CDATA[
<!-- Modules Begin --><section class="fo-feature-selector">
<div class="row">
<!-- Part 1 Begin -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 p-0">
<h2 class="head">Baz Araç</h2>
<div class="form-group label-floating is-empty">
<label class="control-label">Baz Araç Giriniz...</label>
<input type="text" class="form-control" id="ChoiceBoxesFilterCar">
</div>
<div class="option-name">Önerilen Adet</div>
<div class="style-list">
<ul class="fo-list" id="ChoiceBoxesFilterCarList">
<li class="recommended-cars">
<a href="#">Focus 1.5 Dizel Düz Vites<span>27/45 Adt.</span></a>
</li>
<li class="recommended-cars">
<a href="#">Focus 1.5 Benzin Düz Vites<span>6/12 Adt.</span></a>
</li>
<li>
<a href="#">Focus 1.5 Dizel Düz Vites</a>
</li>
<li class="active">
<a href="#">Focus 1.5 Benzin Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.5 Dizel Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.5 Benzin Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.5 Dizel Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.5 Dizel Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.5 Dizel Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.6 Dizel Düz Vites</a>
</li>
<li>
<a href="#">Focus 1.6 Benzin Düz Vites</a>
</li>
<li>
<a href="#">Focus 2.0 Dizel Düz Vites</a>
</li>
<li>
<a href="#">Focus 2.0 Dizel Düz Vites</a>
</li>
</ul>
</div>
</div>
<!-- Part 1 Begin -->
<!-- Part 2 Begin -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<h2 class="head">Opsiyon</h2>
<div class="form-group label-floating is-empty">
<label class="control-label">Opsiyon Adı Giriniz...</label>
<input type="text" class="form-control" id="ChoiceBoxesFilterOption">
</div>
<div class="option-name">Opsiyon / Paket</div>
<div class="style-checkbox">
<ul class="fo-list" id="ChoiceBoxesFilterOptionList">
<li class="fo-checkbox">
<label>
<input type="checkbox">
<strong>Trend X Paket</strong>
</label>
<!-- Ops. 1 Collapse Begin -->
<span class="option-collapse" data-toggle="collapse" data-target="#ops1">Ops.</span>
<ul class="option-list collapse" id="ops1">
<li>Navigasyon</li>
<li>Otomatik Dikiz Aynası</li>
<li>Çelik Jant</li>
</ul>
<!-- Ops. 1 Collapse End -->
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Techno Paket
</label>
<!-- Ops. 2 Collapse Begin -->
<span class="option-collapse" data-toggle="collapse" data-target="#ops2">Ops.</span>
<ul class="option-list collapse" id="ops2">
<li>Navigasyon</li>
<li>Otomatik Dikiz Aynası</li>
<li>Çelik Jant</li>
</ul>
<!-- Ops. 2 Collapse End -->
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Navigasyon Paketi
</label>
<!-- Ops. 3 Collapse Begin -->
<span class="option-collapse" data-toggle="collapse" data-target="#ops3">Ops.</span>
<ul class="option-list collapse" id="ops3">
<li>Navigasyon</li>
<li>Otomatik Dikiz Aynası</li>
<li>Çelik Jant</li>
</ul>
<!-- Ops. 3 Collapse End -->
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Açılabilir Panoromik Cam Tavan
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Elite Paket
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Panoromik Cam Tavan
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Cam Tavan
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Advanced Paket
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Katlanır Aynalar
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Metalik Renk
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Arka Görüş Kamerası
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Elektrikli Açılabilir Sunroof
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Rüzgarlık
</label>
<span class="option-value">Pkt.</span>
</li>
<li class="fo-checkbox">
<label>
<input type="checkbox">
Trend Paket
</label>
<span class="option-value">Pkt.</span>
</li>
</ul>
</div>
</div>
<!-- Part 2 End -->
<!-- Part 3 Begin -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 p-0">
<h2 class="head last-head">Renk</h2>
<div class="form-group label-floating is-empty">
<label class="control-label">Renk Adı Giriniz...</label>
<input type="text" class="form-control" id="ChoiceBoxesFilterColor">
</div>
<div class="option-name">Opak / Metalik</div>
<div class="style-radio">
<ul class="fo-list" id="ChoiceBoxesFilterColorList">
<li class="fo-radio">
<label>
<input type="radio">
SPOR MAVİSİ
</label>
<span class="option-value">0</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
DENİZ MAVİSİ
</label>
<span class="option-value">0</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
BUZ BEYAZI + Siyah İç Döşeme
</label>
<span class="option-collapse" data-toggle="collapse" data-target="#opsR1">0</span>
<ul class="option-list collapse" id="opsR1">
<li>Koltuk Isıtma</li>
<li>Elektronik Koltuk Yükseltme</li>
<li>Direksiyon Isıtma</li>
</ul>
</li>
<li class="fo-radio">
<label>
<input type="radio">
DENİZ YEŞİLİ + Bej İç Döşeme
</label>
<span class="option-collapse" data-toggle="collapse" data-target="#opsR2">0</span>
<ul class="option-list collapse" id="opsR2">
<li>Koltuk Isıtma</li>
<li>Elektronik Koltuk Yükseltme</li>
<li>Direksiyon Isıtma</li>
</ul>
</li>
<li class="fo-radio">
<label>
<input type="radio">
GÖL YEŞİLİ
</label>
<span class="option-value">0</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
ÇÖL SARISI
</label>
<span class="option-value">0</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
ORMAN YEŞİLİ
</label>
<span class="option-value">0</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
METALİK GRİ + Kahverengi İç Döşeme
</label>
<span class="option-collapse" data-toggle="collapse" data-target="#opsR3">M</span>
<ul class="option-list collapse" id="opsR3">
<li>Koltuk Isıtma</li>
<li>Elektronik Koltuk Yükseltme</li>
<li>Direksiyon Isıtma</li>
</ul>
</li>
<li class="fo-radio">
<label>
<input type="radio">
BAHARAT KIRMIZISI
</label>
<span class="option-value">M</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
AFRİKA MAVİSİ
</label>
<span class="option-value">M</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
BAL SARISI
</label>
<span class="option-value">M</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
GECE MAVİSİ
</label>
<span class="option-value">M</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
DÜŞ GRİSİ
</label>
<span class="option-value">M</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
OKYANUS MAVİSİ
</label>
<span class="option-value">M</span>
</li>
<li class="fo-radio">
<label>
<input type="radio">
DİP MAVİ
</label>
<span class="option-value">M</span>
</li>
</ul>
</div>
</div>
<!-- Part 3 End -->
</div>
<div class="row module-legend">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<i class="fo-icon-star"></i> <span>Önerilen Baz Araçlar</span>
</div>
</div>
<div class="row module-total">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<strong class="fo-color-blue">Baz Araç Tutarı:</strong> Tanımlanmamış
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<strong class="fo-color-blue">Opsiyon Tutarı:</strong> Tanımlanmamış
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<strong class="fo-color-blue">Renk Tutarı:</strong> Tanımlanmamış
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<strong class="fo-color-blue">Toplam Tutarı:</strong> 0 TL
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<div class="fo-dropdown-full margin-t-30">
<button class="fo-button dropdown-toggle" type="button" id="dropdownSt" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownSt">
<li>
<a href="#">Item 01</a>
</li>
<li>
<a href="#">Item 02</a>
</li>
<li>
<a href="#">Item 03</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group label-floating is-empty">
<label class="control-label">Bayi Notu</label>
<textarea cols="3" rows="1" class="form-control" id="ChoiceBoxesTextarea" maxlength="60"></textarea>
<div class="module-choiceboxes-counter">
0/<span id="ChoiceBoxesTextareaCounter">60</span>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<div class="form-group label-floating is-focused">
<label class="control-label">Toplam Adet *</label>
<input type="text" class="form-control" value="70" />
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12 margin-t-30">
<button type="button" class="fo-button-full">Listeye Ekle</button>
</div>
</div>
</section><!-- Modules End -->
]]>
