Tab föggőlegesen?

akarmi300
Témaindító
Nem elérhető
Kezdő fórumozó

Több

5 éve 11 hónapja #13518 Írta: akarmi300

Tab föggőlegesen? téma létrehozva akarmi300 által

Sziasztok!
Hogyan tudnék ilyet készíteni. Több kiegészítőt is néztem de nincs ilyen.

Code:

http://www.fakro.hu/tetoteri-ablakok/tipusok/preselect-felnyilo-billeno-tetoablak/

ahol a LUX táblázatba az FPP és PPP értékeket lehet változtatni
Köszönöm!

Jelentkezz be, hogy te is részt vehess beszélgetésben!

csicsa55
Nem elérhető
Elit fokozatú fórumozó
Lottó

Több

5 éve 11 hónapja #13519 Írta: csicsa55

csicsa55 válaszolt a következő témában: Tab föggőlegesen?

Kicsit részletezhetnéd mit is szeretnél pontosan. A hármas tagolást? A címből erre következtettem. Több megoldás is van. Kérdés, hogy a cikkeket szeretnéd hármas tagolásban, vagy modulokat szeretnél így? Előbbit joomla alapból tudja, utóbbihoz a gantry-t ajánlom. De biztosan létezik olyan sablon is, ami ezt tudja.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

akarmi300
Témaindító
Nem elérhető
Kezdő fórumozó

Több

5 éve 11 hónapja #13523 Írta: akarmi300

akarmi300 válaszolt a következő témában: Tab föggőlegesen?

Konkrétan azt szeretném ahogy itt is van. Három oszlop ahol a felső részen választok majd alatta változik a szöveg. Mint ha TAb lenne csak legördülő menüben választok és azok alatt változik a szöveg.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Zotius
Nem elérhető
Platina fokozatú fórumozó

Több

5 éve 11 hónapja #13535 Írta: Zotius

Zotius válaszolt a következő témában: Tab föggőlegesen?

Amit keresel, az az úgynevezett 'Accordion-menu' (harmonika-menü) modul. Ha erre a kifejezésre rákeresel a JED-en, találhatsz rá megoldásokat. Ilyen például a JUX Accordion Menu modul, ami nem ingyenes bővítmény. Demója itt található .

Jelentkezz be, hogy te is részt vehess beszélgetésben!

akarmi300
Témaindító
Nem elérhető
Kezdő fórumozó

Több

5 éve 10 hónapja #13583 Írta: akarmi300

akarmi300 válaszolt a következő témában: Tab föggőlegesen?

Szia!
Köszönöm a választ de lehet én fogalmaztam pontatlanul.
Ilyet kellene csinálnom a cikken belül
(miért nem tudok képet beilleszteni)

Code:

http://www.fakro.hu/tetoteri-ablakok/tipusok/preselect-felnyilo-billeno-tetoablak/

Olyat szeretnék csinálni ami itt is van (nem a menü hanem a cikkbe) , mind mikor excelbe a szűrőt bekapcsolom majd választok és megjelnik.
Konkrétan így
FPP-V U3 preSelect majd legördülő menű és választok

Előre is köszi!

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Motoros
Nem elérhető
Prémium fórumozó

Több

5 éve 10 hónapja #13588 Írta: Motoros

Motoros válaszolt a következő témában: Tab föggőlegesen?

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.

Próbáld ki magad is! Másold ki a kódot és mentsd el "demo.html" -ként...

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>

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Az oldal motorja a Kunena fórum

Az oldal semmilyen kapcsolatban nem áll a Joomla!© Projecttel, sem az Open Source Matters-zel. A Joomla!© logót korlátolt licenc alatt használjuk, melyet az Open Source Matters védjegytulajdonos biztosít az Egyesült Államokban és más országokban. Minden jog fenntartva © 2011-2023 Joomla! Magyarország.

Az oldal tárhelyét a Tárhelypark biztosítja. Ha támogatni szeretnéd az oldal működését, akkor kérjük, hogy az alábbi hivatkozáson keresztül vásárolj tárhelyet.