Novinky s jQuery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery/jquery.js"></script><script>
$(document).ready(function(){
$("p").prepend("<b>9.listopadnu 2009 - 11:53</b> ");
$("p").append("<strong>Felix</strong>");
$("button").click(function () {
$(this).parent().find("p").toggle(1000);if($(this).text()=="UKAZ"){
$(this).text("SKRYJ");
}else{
$(this).text("UKAZ");
}
});
});
</script>
<noscript>
TENTO WEB SE VAM NEBUDE ZOBRAZOVAT SPRAVNE!
</noscript>
<style>
p { display: none; margin-bottom: 50px; text-indent: 15px; font-family: Tahoma;
font-size: 20px;position: relative; }
p b{ color: red;font-size: 15px;font-weight: none; }
p strong { color: blue; font-style: italic;padding-top: 10px;
display: block;position: absolute; bottom: 0; right: 20px; }
div { border:1px dashed red; padding: 5px;margin:5px; }</style>
</head>
<body>
<div><button>UKAZ</button><p>Poprvé po šesti letech se v září inflace dostala v Česku do záporných čísel. Ta znamená, že proti loňskému září mohli lidé nakupovat levněji, a to 0,2 procenta. Vyplývá to z pondělních údajů Českého statistického úřadu.</p></div>
<div><button>UKAZ</button><p>Poprvé po šesti letech se v září inflace dostala v Česku do záporných čísel. Ta znamená, že proti loňskému září mohli lidé nakupovat levněji, a to 0,2 procenta. Vyplývá to z pondělních údajů Českého statistického úřadu.</p></div>
<div><button>UKAZ</button><p>Poprvé po šesti letech se v září inflace dostala v Česku do záporných čísel. Ta znamená, že proti loňskému září mohli lidé nakupovat levněji, a to 0,2 procenta. Vyplývá to z pondělních údajů Českého statistického úřadu.</p></div>
<div><button>UKAZ</button><p>Poprvé po šesti letech se v září inflace dostala v Česku do záporných čísel. Ta znamená, že proti loňskému září mohli lidé nakupovat levněji, a to 0,2 procenta. Vyplývá to z pondělních údajů Českého statistického úřadu.</p></div>
<div><button>UKAZ</button><p>Poprvé po šesti letech se v září inflace dostala v Česku do záporných čísel. Ta znamená, že proti loňskému září mohli lidé nakupovat levněji, a to 0,2 procenta. Vyplývá to z pondělních údajů Českého statistického úřadu.</p></div>
<div><button>UKAZ</button><p>Poprvé po šesti letech se v září inflace dostala v Česku do záporných čísel. Ta znamená, že proti loňskému září mohli lidé nakupovat levněji, a to 0,2 procenta. Vyplývá to z pondělních údajů Českého statistického úřadu.</p></div>
</body>
</html>
Relativni + absolutni pozicovani + plovouci menu + zarovnani na stred + prekryvany vrstvy + FF + IE8 + funkcni
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><head>
<meta http-equiv="Content-Style-Type" content="text/css">
<META HTTP-EQUIV="content-language" CONTENT="cs">
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<title> Navrh stranky </title>
<script type="text/javascript">
$(document).ready(function(){$("#menu li a").hover(
function() {
$(this).parent().find("ul:first").fadeIn('1000').show(); //Drop down the subnav on click
},
function() {
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul").fadeOut('slow'); //When the mouse hovers out of the subnav, move it back up
});
});
});
</script>
</head>
<body style="text-align:center;">
<div style="width:600px;margin:0px auto;background-color:red;height:500px;position:relative;">
<div style="width:600px;vertical-align:top;background-color:green;height:40px;vertical-align:bottom;">
<div style="vertical-align:bottom;">
<ul id="menu" style="margin:0;padding:0;">
<li style="width:100px;height:20px;border:1px solid black;float:left;">
<a href="#">Menu1</a><ul style="margin:0;padding:0;position:absolute;top:20px;left:0px;z-index:10;display:none;">
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu1</li>
</ul></li>
<li style="width:100px;height:20px;border:1px solid black;float:left;">
<a href="#">Menu2</a><ul style="margin:0;padding:0;position:absolute;top:20px;left:100px;z-index:10;display:none;">
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
<li style="width:100px;height:20px;border:1px solid white;">Submenu2</li>
</ul>
</li>
<li style="width:100px;height:20px;border:1px solid black;float:left;">Menu3</li>
<li style="width:100px;height:20px;border:1px solid black;float:left;">Menu4</li>
</ul>
</div></div>
<div style="width:600px;vertical-align:top;background-color:blue;height:200px;position:relative;z-index:1;">
<div style="background-color:gold;position:absolute;top:10px;left:-20px;width:100px;height:50px;z-index:1;">
aaa
</div>
</div></div>
</body>
</html>
Ttrochu takovej orisek, pouzil jsem tam:
- Zarovnani na stred
- 3 divy
- Relativni + Absolutni pozicovani
- Plovouci menu
- jQuery
- Prekryvy vrstev
- Vsechno ve vrstvach
- FF a IE7+
- 100% validni
Varianta cislo 2.
<body style="text-align:center;">
<div style="width:600px;margin:0px auto;background-color:red;height:500px;position:relative;">
<div style="width:600px;vertical-align:top;background-color:green;height:40px;vertical-align:bottom;position:relative;z-index:2;">
<div style="vertical-align:bottom;">
5) Priklad menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery/jquery.js"></script><script>
$(document).ready(function(){$(".menu li").mouseover(function(){
$(this).find(".submenu").show();
}).mouseout(function(){
$(this).find(".submenu").hide();
});
});
</script>
<style>.menu,.menu ul{
list-style-type:none;
}.menu li{
width: 150px;
float: left;
color: black;
font-weight: bold;
font-family: tahoma;
font-size: 12px;
}.menu span{
border: 1px solid gold;
display: block;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}.submenu, .submenu li{
float: none;
margin: 0;
text-align: center;
font-size: 12px;
color: red;
padding: 5px 0px 5px 0px;
}.menu li .submenu{
display: none;
}</style>
</head>
<body><div>
<ul>
<li>
<span>MenuText1</span>
<ul>
<li>Podmenu1.1</li>
<li>Podmenu1.2</li>
<li>Podmenu1.3</li>
<li>Podmenu1.4</li>
<li>Podmenu1.5</li>
</ul>
</li><li>
<span>MenuText2</span>
<ul>
<li>Podmenu2.1</li>
<li>Podmenu2.2</li>
<li>Podmenu2.3</li>
<li>Podmenu2.4</li>
<li>Podmenu2.5</li>
</ul>
</li><li>
<span>MenuText3</span>
<ul>
<li>Podmenu3.1</li>
<li>Podmenu3.2</li>
<li>Podmenu3.3</li>
<li>Podmenu3.4</li>
<li>Podmenu3.5</li>
</ul>
</li></ul>
</div>
</body>
</html>
4) fce click(), show() a hide()
Konecne jsme se dockali prvniho prikladu vyuziti jQuery. Predstavime si funkce click(), show() a hide(), ktere jsou jedny z nejpouzivanejsich fci.
3) Selektory
Abychom mohli spravne vyuzivat vsechny stranky frameworku jQuery, je potreba spravne priradit funkci k urcitemu objektu. K tomu slouzi prave jmenovane selektory.
2) Prvni spusteni
Takze k tomu abychom mohli si zkusit nejake ty efekty,testy a vychytavky pomoci jQuery si ji nejprve musime stahnout. Popripade pokud je nekdo liny muze sve testy zkouset na zkousecce.
1) Povidani o jQuery
jQuery
jQuery je lehká, malá javascriptová knihovna, která klade důraz na interakci mezi JavaScriptem a HTML. Byla vydána Johnem Resigem v lednu 2006 na newyorském BarCampu.
Allowed memory size of x bytes exhausted
Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 24 bytes) in /home/www/noblexity.com/felix/wp-includes/class-simplepie.php on line 11166
PHP
PHP (rekurzivní zkratka PHP: Hypertext Preprocessor, „PHP: Hypertextový preprocesor“, původně Personal Home Page) je skriptovací programovací jazyk, určený především pro programování dynamických internetových stránek. Nejčastěji se začleňuje přímo do struktury jazyka HTML, XHTML či WML, což lze využít při tvorbě webových aplikací. PHP lze použít i k tvorbě konzolových a desktopových aplikací.
HTML
HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.
Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML (Standard Generalized Markup Language). Vývoj HTML byl ovlivněn vývojem webových prohlížečů, které zpětně ovlivňovaly definici jazyka.
Zdroj: www.wikipedie.cz