file Tab föggőlegesen?

Több
2018 máj. 01 11:16 #1 Í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.
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
  • csicsa55 profilkép
  • Nem elérhető
  • Joomla rajongó
  • Joomla rajongó
  • Mivan Ottó? Mi a mottó? M(olnár)Ottó
Több
2018 máj. 02 10:53 #2 Í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!

Több
2018 máj. 02 18:53 #3 Í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!

Több
2018 máj. 08 13:07 #4 Í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ó .

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius

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

Több
2018 máj. 19 10:53 #5 Í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)
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!

Több
2018 máj. 20 18:32 #6 Í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...
<!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!

Több
2018 máj. 21 06:56 #7 Írta: akarmi300
akarmi300 válaszolt a következő témában: Tab föggőlegesen?
Szia!
Nagyon köszönöm a választ és a munkádat!.
HTML-ként látom és jó is működik (főleg hogy le is írtad mi mire való), de mit kell tennem hogy joomla cikkbe is működjön mert jelenleg csak egy szétesett szöveghalmazt látok. Gondolom mert a két Javascript nem fut le!? Köszi!

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

Több
2018 máj. 21 08:10 #8 Írta: Motoros
Motoros válaszolt a következő témában: Tab föggőlegesen?
Linkeld be az URL-t...

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

Több
2018 máj. 22 06:25 #9 Írta: akarmi300
akarmi300 válaszolt a következő témában: Tab föggőlegesen?
Így néz ki joomlába



Sima html-ként teljesen jó
Mellékletek:

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

Több
2018 máj. 22 16:00 - 2018 máj. 22 19:07 #10 Írta: Motoros
Motoros válaszolt a következő témában: Tab föggőlegesen?
Olvasd el kérlek ismét: "Linkeld be az URL-t..."

- Stílus leíró részét akarom látni!
- A html leíróban a Form-hoz tartozó részt akarom látni...
- A lapon található javascript részeket akarom látni...

Kódtisztító? (Akkor esetleg adatbázisban belehet tenni, és műxik. (Amíg nincs szerkesztve a cikk.))

Esetleg próbálható még ez is: <iframe src="include/tabdemo.html" style="beállítás az elszeparáláshoz"></iframe>
Utolsó szerkesztés: 2018 máj. 22 19:07 Motoros által. Indoklás: kiegészítés iframe

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