Tulajdonképpen, amennyiben a szerkezetben betöltődik az alul található jquery.js könyvtár és a jquery.flexisel.js plugin. Ebben az esetben alig van szükség plusz dologra.
Code:
<!DOCTYPE html>
<html lang="hu">
<head>
<title> Tab föggőlegesen Demo </title>
<style>
// A stílus leíró - ez felel a megjelenésért
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 { display:none; }
.nbs-flexisel-container { position:relative; max-width:100%; }
.nbs-flexisel-ul { position:relative; width:9999px; margin:0px; padding:0px; list-style-type:none; text-align:center; }
.nbs-flexisel-inner { overflow:hidden; float:left; width:100%; }
.nbs-flexisel-item { float:left; margin:0px; padding:0px; cursor:auto; position:relative;width: 30%;min-width:300px }
.productHidden { display: none; }
.product_parameter { margin-top: 15px; }
.product_parameter_group { background-color: #fff; border: 1px solid #fff; border-bottom: 2px solid #BCBCBC; padding:0 25%;}
.product_parameter_group h6 { font-size: 14px; font-weight:normal; }
ul {list-style-type:none;}
ul.parameter_list { padding: 0; }
ul.parameter_list li {float:none; list-style-type:none ; text-align: center; display: none; }
ul.parameter_list li.active { display: block; }
ul.parameter_list li small { color: green; display: block; }
ul.parameter_list li span { border-bottom: 1px solid #BCBCBC; display: block; padding: 2px 5px;}
ul.parameter_list li span small { font-size: 80%;}
ul.parameter_list li span.label { font-size: 100%;}
.label {display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em;}
.label-success {background-color: #5cb85c;}
</style>
</head>
<body>
<! A form_1 kezdete>
<ul>
<li class="nbs-flexisel-item">
<div class="product_parameter">
<div class="product_parameter_group" style="height: 50px;">
<select class="selectParameter form-control" lang="49">
<option value="1">FPP-V U3 preSelect</option>
<option value="2">FPP-V U5 preSelect</option>
<! További választási lehetőség folytatása...>
</select>
</div>
<ul class="parameter_list G49">
<li class="G-49-1 active nbs-flexisel-item">
<span><span class="label label-success">LUX</span><small>ablak osztálya</small></span>
<span> 1,2 W/m²K <small>ablak U-értéke</small></span>
<span>1,0 W/m²K<small>üvegezés U-értéke</small></span>
<span>32 dB<small>hangszigetelés Rw</small></span>
<span>4H-16-4T<small>ĂĽveg tĂpusa</small></span>
<span>argon<small>nemesgáz</small></span>
<span>+<small>külső edzett üveg</small></span>
<span>V40P automata<small>szellĹ‘zĂ©s tĂpusa</small></span>
<span>max. 49mÂł/h<small>szellĹ‘zĂ©s teljesĂtmĂ©nye</small></span>
<span>dupla<small>lakkozás</small></span>
<span>nĂ©gy<small>tömĂtĂ©s-rĂ©tegek száma</small></span>
<span>+<small>több-pontú résszellőzés</small></span>
<span>Elegant<small>kilincs</small></span>
</li>
<li class="G-49-2 nbs-flexisel-item">
<span><span class="label label-success">LUX</span><small>ablak osztálya</small></span>
<span>0,97 W/m²K<small>ablak U-értéke</small></span>
<span>0,5 W/m²K<small>üvegezés U-értéke</small></span>
<span>33 dB<small>hangszigetelés Rw</small></span>
<span>4HT-10-4H-10-4HT<small>ĂĽveg tĂpusa</small></span>
<span>kripton<small>nemesgáz</small></span>
<span>+<small>külső edzett üveg</small></span>
<span>V40P automata<small>szellĹ‘zĂ©s tĂpusa</small></span>
<span>max. 49mÂł/h<small>szellĹ‘zĂ©s teljesĂtmĂ©nye</small></span>
<span>dupla<small>lakkozás</small></span>
<span>nĂ©gy<small>tömĂtĂ©s-rĂ©tegek száma</small></span>
<span>+<small>több-pontú résszellőzés</small></span>
<span>Elegant<small>kilincs</small></span>
</li>
</ul>
</div>
</li>
</ul>
<! A form_1 vége>
<! Innét kezd kijelölni a másoláshoz/módosításhoz>
<! A form_2 kezdete>
<! Táblázatkezelőben Én ez alapján módosítanám. Beillesztéskor az elválasztó a tabulátor! >
<ul>
<li class="nbs-flexisel-item">
<div class="product_parameter">
<div class="product_parameter_group" style="height: 50px;">
<! Minden form-nál a lang="xxx" -nak más értéket kell kapnia!>
<select class="selectParameter form-control" lang="93959">
<option value="1"> Lehetőség-1
</option><option value="2"> Lehetőség-2
</option><option value="3"> Lehetőség-3
</option></select>
</div>
<! A G utáni érték azonos a lang="xxx" értékével>
<ul class="parameter_list G93959 ">
<! A G utáni érték azonos a lang="xxx-option value" értékével>
<! 1. lehetőség jelen esetben>
<li class=" G-93959-1 active nbs-flexisel-item ">
<span><span class="label label-success"> LUX </span><small> ablak osztálya </small></span>
<span> 1,1 W/m²K <small> ablak U-értéke </small></span>
<span> 0,5 W/m²K <small> üvegezés U-értéke </small></span>
<span> 33 dB <small> hangszigetelés Rw </small></span>
<span> 4HT-10-4H-10-4HT <small> ĂĽveg tĂpusa </small></span>
<span> kripton <small> nemesgáz </small></span>
<span> + <small> külső edzett üveg </small></span>
<span> V35 <small> szellĹ‘zĂ©s tĂpusa </small></span>
<span> max. 41 mÂł/h <small> szellĹ‘zĂ©s teljesĂtmĂ©nye </small></span>
<span> - <small> lakkozás </small></span>
<span> nĂ©gy <small> tömĂtĂ©s-rĂ©tegek száma </small></span>
<span> + <small> több-pontú résszellőzés </small></span>
<span> fehér Elegant <small> kilincs </small></span>
</li>
<! A G utáni érték azonos a lang="xxx-option value" értékével>
<! 2. lehetőség jelen esetben>
<li class=" G-93959-2 nbs-flexisel-item ">
<span><span class="label label-success"> LUX </span><small> ablak osztálya </small></span>
<span> 1,3 W/m²K <small> ablak U-értéke </small></span>
<span> 1,0 W/m²K <small> üvegezés U-értéke </small></span>
<span> 32 dB <small> hangszigetelés Rw </small></span>
<span> 4H-16-4T <small> ĂĽveg tĂpusa </small></span>
<span> argon <small> nemesgáz </small></span>
<span> + <small> külső edzett üveg </small></span>
<span> V35 <small> szellĹ‘zĂ©s tĂpusa </small></span>
<span> max. 41 mÂł/h <small> szellĹ‘zĂ©s teljesĂtmĂ©nye </small></span>
<span> - <small> lakkozás </small></span>
<span> nĂ©gy <small> tömĂtĂ©s-rĂ©tegek száma </small></span>
<span> + <small> több-pontú résszellőzés </small></span>
<span> fehér Elegant <small> kilincs </small></span>
</li>
<! 3. lehetőség jelen esetben, ami nincs...>
<li class=" G-93959-3 nbs-flexisel-item ">
<span><span class="label label-success"> LUX </span><small> ablak osztálya </small></span>
<span> Csak lehetőség <small> ha szükséges </small></span>
</li>
</ul>
</div>
</li>
</ul>
<! A form_2 vége>
<! A kijelölés vége>
<! Javascript könyvtár, plugin betöltése objektum változtatásához>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexisel/2.2.2/js/jquery.flexisel.min.js"></script>
<script>
jQuery(function($){
/* Ezt a kódot vagy a szerkezet, vagy a cíkk végébe kell helyezni */
/* $("#productList").flexisel({
visibleItems: 3,
clone:false,
arrowsCss:{
'top':'160px'
}
});
*/
$('select.selectParameter').on('change', function() {
parameterKey = $(this).attr('lang');
parameterGroup = $(this).val();
$('ul.parameter_list.G' + parameterKey + ' .active').removeClass("active");
$('ul.parameter_list.G' + parameterKey + ' li.G-' + parameterKey + '-' + parameterGroup).addClass("active");
});
// drabina, żeby wysokości bloczków były takie same
// musi być onload, ponieważ cos się złego dzieje
// i nie ustawiaja sie poprawnie wysokości
// nie zmieniać!
window.onload = function(){
var max_height = 0;
$('.product .product_head').each(function(k,r){
var height = $(r).height();
if(height > max_height){ max_height = height; }
});
$('.product .product_head').height(max_height);
};
});
</script>
</body>
Témaindító
