Loading ...
Demó látható a lap alján!
Először is mentsd le a .js fájlokat, majd töltsd fel a tárhelyedre. Aztán az én .js kódjaimban cseréld le az URL címeket a te feltöltött .js fájljaid URL címével.
HTML/PHP oldalon: a megkapott és átírt .js fájlokat másold be oldalad <head> részébe
G-Portálon: a .js fájlokat a Médiatárba töltsd fel, aztán az átírt kódokat egy az egyben tedd bele egy jobb vagy bal oldali egyszerű modulba. Más ne legyen a modulban, csak a javascript kódok!
Javascript kódok letöltése
osszetett-modul-1
osszetett-modul-2
osszetett-modul-3
osszetett-modul-4
osszetett-modul-5
Javascript kódok
<script type="text/javascript" src="/js/osszetett-modul-1.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-2.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-3.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-4.js"></script>
<script type="text/javascript" src="/js/osszetett-modul-5.js"></script>
A szövegdoboz kódja
Egy teljes kódrészt kijelöltem a kódban. Ez egy doboz teljes kódja. Ha több vagy kevesebb dobozt szeretnél a szövegdobozban, akkor értelemszerűen egy újabbat bemásolsz a régi alá vagy kitörlöd a teljeset a kódból.
<center>
<div class="modul">
<ul class="tabs-widget tabs-widget-widget-themater_tabs-2-id">
<li>
<a href="#widget-themater_tabs-2-id1">Modul 1</a></li>
<li>
<a href="#widget-themater_tabs-2-id2">Modul 2</a></li>
<li>
<a href="#widget-themater_tabs-2-id3">Modul 3</a></li>
<li>
<a href="#widget-themater_tabs-2-id4">Modul 4</a></li>
</ul>
<div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id1">
<div class="widget">
<table align="center" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td>
<div class="tartalom">
IDE JÖN AZ ELSŐ DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</div>
</td>
</tr>
</tbody>
</table>
<ul>
</ul>
</div>
</div>
<div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id2">
<div class="widget">
<table align="center" cellpadding="10" cellspacing="0" class="raceResults">
<tbody>
<tr>
<td>
<div class="tartalom">
IDE JÖN AZ MÁSODIK DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</div>
</td>
</tr>
</tbody>
</table>
<ul>
</ul>
</div>
</div>
<div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id3">
<div class="widget">
<table align="center" cellpadding="10" cellspacing="0" class="raceResults">
<tbody>
<tr>
<td>
<div class="tartalom">
IDE JÖN AZ HARMADIK DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</div>
</td>
</tr>
</tbody>
</table>
<ul>
</ul>
</div>
</div>
<div class="tabs-widget-content tabs-widget-content-widget-themater_tabs-2-id" id="widget-themater_tabs-2-id4">
<div class="widget">
<table align="center" cellpadding="10" cellspacing="0" class="raceResults">
<tbody>
<tr>
<td>
<div class="tartalom">
IDE JÖN A NEGYEDIK DOBOZBA A TARTALOM. Lehet kép, szöveg, menü, bármi.</div>
</td>
</tr>
</tbody>
</table>
<ul>
</ul>
</div>
</div>
</div>
</center>
CSS kód
<style type="text/css">
.modul { /* a teljes egész modul szélessége */
width: 330px;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 0px 0;
padding: 10px;
height: 40px;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
margin: 0 0 0 5px;
padding: 0;
float: left;
}
.tabs-widget li:first-child {
margin: 0;
}
.tabs-widget li a { /* menücímek kinézete */
color: #333333;
background: #f2f2f2;
padding: 10px 14px;
font-family: Arial;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 12px;
line-height: 12px;
box-shadow: 1px 1px 1px #999999;
}
.tabs-widget li a:hover { /* menücímek kinézete, ha ráviszed az egeret */
background: #CC463C;
color: #eaeaea;
}
.tartalom { /* szöveg kinézete a modulokban */
color: #9F9F9F;
font-family: Trebuchet ms;
font-size: 13px;
line-height: 16px;
text-align: justify;
}
</style>
Leírás
Maga a menü rész ez:
<li><a href="#widget-themater_tabs-2-id1">Modul 1</a></li>
<li><a href="#widget-themater_tabs-2-id2">Modul 2</a></li>
<li><a href="#widget-themater_tabs-2-id3">Modul 3</a></li>
<li><a href="#widget-themater_tabs-2-id4">Modul 4</a></li>
Ha még akarsz hozzá tenni akkor egy teljes menüsort másolj ki és illeszd az utolsó alá. A modulok linkelése a kódban ez: tabs-2-id4
Ha még egy modult akarsz hozzátenni, akkor a linkben az utolsó számot is meg kell változtatnod egyel nagyobbra.
Példa kód új sorral:
<li><a href="#widget-themater_tabs-2-id1">Modul 1</a></li>
<li><a href="#widget-themater_tabs-2-id2">Modul 2</a></li>
<li><a href="#widget-themater_tabs-2-id3">Modul 3</a></li>
<li><a href="#widget-themater_tabs-2-id4">Modul 4</a></li>
<li><a href="#widget-themater_tabs-2-id5">Modul 5</a></li>
Ha el szeretnél venni belőle inkább egy modult, akkor értelemszerűen egy sort ki kell törölnöd. De attól, mert egy új modult hoztunk létre maga a modul még nem fog látszani a kódban. Ahhoz a tartalmi részt is másolni kell. Tartalmi részek kijelölve a szövegdoboz kódjában! És a tartalmi kódban is jelölni kell az id részt, hogy a kód felismerje az új modult a szövegdobozban.
 
|
2 805 megtekintés