Alapok a jQuery használatához
Ahhoz, hogy a portálodon fussanak a jQuery pluginok (pl. saját képnézegető, saját effektes menü, lapozó, forráskód a portál sarkában, felugró ablak stb.), az alábbi kódot mindenképpen be kell szúrnod a portálodra. Kódoláshoz szerkesztésnél a kódnézetet használd, ne a szövegszerkesztőket. A kódot célszerű a fejléc modulba, vagy bal oldalon legfelülre egy egyszerű modulba szúrnod, mert fontos, hogy bármilyen jQeury script betöltése előtt ez fusson le először:
|
<script type="text/javascript" src="/js/jquery.js"></script>
|
Ha valamiért egy specifikus .js fájra lenne szükséged, akkor ezt a kódot hívd be ugyanúgy, ahogy az előbb:
|
<script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
|
A .js fájlokat nem tettük be automatikusan a portálokra, hogy ne lassítsa az oldalbetöltést, ráadásul nem mindenki szeretné használni.
Ha a jquery.js scriptet beszúrtad a portálodra az előbbi módon, akkor máris használatba veheted azt a jQuery plugint, amelyik megtetszett. Ilyen pluginokat találsz a neten, de hoztam néhány példát is.
Forráskód tapéta a portálodra
Ha beszúrtad a portálod tetejére az alap jquery.js scriptet, akkor hozz létre egy egyszerű modult, vagy akár ugyanabba a modulba is beszúrhatod az alábbi kódot:
|
<script type="text/javascript" src="/portal/gportal/upload/590390_1303739064_00784.js"></script>
<script type="text/javascript" src="/portal/gportal/upload/590390_1303739056_01445.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( '#target' ).fold({side: 'right', directory: 'turn'});
});
</script>
<style type="text/css" title="currentStyle" media="screen">
@import "/portal/gportal/upload/590390_1303739189_05529.css";
</style>
<div id="turn_wrapper" class="right"><div id="turn_object" style="width: 90px; height: 90px;" class="ui-resizable"><div id="turn_hideme"><img alt="" src="/portal/gportal/upload/590390_1303739066_05851.png" id="turntarget"></div><img src="/portal/gportal/upload/590390_1303739058_00959.png" id="turn_fold"><div class="ui-resizable-handle" style="z-index: 1001; -moz-user-select: none;" unselectable="on"></div></div></div>
|
Ha beszúrtad a kódot az oldaladra, máris megjelenik a portálod jobb felső sarkában a forráskód tapéta.
Egyszerű effektes képnézegető
Ha beszúrtad a portálod tetejére az alap jquery.js scriptet, akkor hozz létre egy egyszerű modult, vagy akár ugyanabba a modulba is beszúrhatod az alábbi kódot:
|
<style type="text/css">
#slideshow {
position:relative;
height:400px;
}
#slideshow IMG {
position:absolute;
top:10;
left:50;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
</style>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<div id="slideshow">
<img src="/portal/gportal/image/gallery/1244455792_76.png" width="500px" class="active" />
<img src="/portal/gportal/image/gallery/1244455775_85.jpg" width="500px" />
<img src="/portal/gportal/image/gallery/1244455786_70.jpg" width="500px" />
<img src="/portal/gportal/image/gallery/1244455784_67.jpg" width="500px" alt="" />
<img src="/portal/gportal/image/gallery/1244455785_77.jpg" width="500px" />
</div>
|
A kód egy css-ből, egy javascriptből és egy div-ből áll. A kód alján lévő div tartalmazza azokat a képeket, amik megjelennek a képnézegetőben. Ezeket kicserélheted, megadhatsz nekik fix szélességet is, de arra ügyelj, hogy a képek szélességének azonos értéket adj meg, különben bután fog kinézni a képnézegető.
Aktív menü színezése
Ha szeretnéd, hogy az általad készített menüben az aktív link valóban olyan színű maradjon, amit a css-ben az active és selected értéknek megadtál, akkor használd ezt a kódot:
|
<script type="text/javascript">
var regex = new RegExp("[\\?&]pg=([^&#]*)");
var qs = regex.exec(window.location.href);
if (qs)
$('.topmenu').find('.item[id*='+ qs[1] +']').removeClass('item').addClass('itemOn');
</script>
|
A kódban az item class a menüpontokat jelöli, a menüpontoknak tehát add meg az item classt. Az itemOn az aktív menüpontot jelöli, tehát az aktív menü értékét a css-ben az itemOn classnak add meg. A topmenu pedig maga a menüsorod, ezt se hagyd ki kódodból.
SexyBookmarks megosztások
A portál bal oldalán láthatjátok az új megosztás ikonokat, amik ugyan sima css-re épülnek, de érdekességképpen megosztom veletek a kódját, hogy ti is használhassátok:
|
<style type="text/css">
.sharing-cl{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.sharing-cl a{
overflow:hidden;
width:48px;
height:30px;
float:left;
}
.sharing-cl .share-sprite{
background:url(/portal/superuser/image/gallery/1303682943_86.png) no-repeat}
.sharing-cl .sh-twitter{
background-position:-100px bottom}
.sharing-cl .sh-facebook{
background-position:-50px bottom;
}
.sharing-cl .sh-iwiw{
margin-left: 6px;
background-position:0 bottom;
}
.sharing-cl .sh-twitter:hover{
background-position:-100px top;
}
.sharing-cl .sh-facebook:hover{
background-position:-50px top;}
.sharing-cl .sh-iwiw:hover{
margin-left: 6px;
background-position:0 top;
}
div.shr-bookmarks-bg-knowledge {background:url('/portal/superuser/image/gallery/1303683561_16.png') no-repeat !important}
</style>
<div class="sharing-cl shr-bookmarks-bg-knowledge" style="width:152px; padding-top:32px">
<a rel="nofollow" title="Oszd meg iWiWen!" target="_blank" href="http://iwiw.hu/pages/share/share.jsp?u=//gportal.gportal.hu" class="sh-iwiw share-sprite"> </a>
<a href="http://www.facebook.com/share.php?v=4&src=bm&u=//gportal.gportal.hu" rel="nofollow" title="Oszd meg Facebookon!" onclick="window.open(this.href, 'sharer', 'toolbar=0, status=0, width=626, height=436'); return false;" target="_blank" class="sh-facebook share-sprite"> </a>
<a rel="nofollow" title="Oszd meg Twitteren!" target="_blank" href="http://twitter.com/home?status=//gportal.gportal.hu" class="sh-twitter share-sprite"> </a>
</div>
|
A kód egy css-ből és egy div-ből áll. A divben található az iWiW, Facebook és Twitter megosztás. A divben írd át a három darab gportal.gportal.hu linket a saját portálod címére, és máris kész a megosztás pluginod.
jQuery - Használjátok!
A jQuery tehát remek lehetőség a portálépítő oldalaknak egy-két újdonságra, amit megoszthatnak a látogatókkal, és remek lehetőség minden egyes felhasználónak, hogy teljesen egyedi oldalt alakítson ki magának bárki egy pici tanulással és gyakorlással.
A G-Portál mostantól támogatja a jQuery pluginokat, ami remek hír a portálépítő oldalaknak és a szerkesztőknek egyaránt, mert olyan funkciókkal, megjelenítőkkel és effektekkel bővülhet a portálok tartalma, amikkel eddig nem.
Súgó
Frissítés
)
Friss hozzászólások
Köszönöm, amúgy ez nagyon tetszik ez a fajta menü :) http://www.netdreams.co.uk/
„ Márkó ez mi? Nem tudom, hogy mit csinálsz, kicsit részletezd már légyszi :D
Gábor beteszem majd, ez a Soh zseniális fickó :)