8 Eylül 2013 Pazar

6 eylul

ftp://10.100.100.100 sunucusundan microsoft win. 32 pro. indirip dvd lerimize yazdırdık.
Gönderen zaman: Hiç yorum yok:

jequery komutları

==>hide(): HTML elementlerini gizlemeye yarayan komut.
==>show(): Gizlenmiş HTML elementlerini gösteren komut.
==>fadeIn(): HTML elementlerinin görüntülenmesini sağlar.
==>fadeOut(): HTML elementlerinin kaybolmasını sağlar.
==>fadeTo(): HTML elementlerinin saydamlığını değiştirir.
==>slideDown(): HTML elementlerinin kapanmasını sağlar.
==>slideUp(): HTML elementlerinin açılmasını sağlar.
==>animate():Tüm sayısal CSS komutları ile animasyon oluşturmamızı sağlar.
==>each(): jQuery nesnesi üzerinde iteratif (döngüsel) işlemleri gerçekleştirmek adına kullanılan bir fonksiyondur
==>for():Jquery de döngü oluşturmayı sağlar.
==>size():Seçilen HTML elementinin sayısını verir.




<html>
<head>
<title>5 Eylül </title>
<script src="http:\\code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.hide{background:pink;color:white}
.show{background:#103;color:white}
.fadeout{background:green;color:white}
.fadein{background:orange;color:white}
.fadeto{background:blue;color:white}
.slideup{background:#222;color:white}
.slidedown{background:#DA0;color:white;}
.each{background:#A67009; color:white;}
.size{background:#567000; color:white;}
.animate{background:#102F93; color:white;}
.for{background:#F02093; color:white;}
.yazi{ color:red; text-align:center; cursor:pointer;font-weight:bolder; width:300px; }
</style>
</head>
<body bgcolor="007fff">
<center>
<button class="hide" id="hide" >Hide</button><br><br>
<button class= "show " id="show" >Show</button><br><br>
<button class="fadeout" id="fadeout"> fadeOut</button><br><br>
<button class="fadein" id="fadein" >fadeIn</button><br><br>
<button class="fadeto" id="fadeto">fadeTo</button><br><br>
<button class="slideup" id="slideup" >SlideUp</button><br><br>
<button class="slidedown"id="slidedown" >SlideDown</button><br><br>
<button class="each"id="each" >Each</button><br><br>
<button class="size" id="size" >Size</button><br><br>
<button class="animate" id="animate" >Animate</button><br><br>
<button class="for" id="for" >For</button><br><br>
<div class='resim2'><img src=" resim2.jpg" border="2" width="300" height="300" ></div>
<label class='yazi'>each ile rengi siyaha değişecek yazı </label>
</center>
<script>
$('#hide').click(function(){
$('div.resim2').hide();
});
$('#show').click(function(){
$('div.resim2').show();
});
$('#fadeout').click(function(){
$('div.resim2').fadeOut('slow');
});
$('#fadein').click(function(){
$('div.resim2').fadeIn('slow');
});
$('#fadeto').click(function(){
$('div.resim2').fadeTo('slow',0.7);
});
$('#slideup').click(function(){
$('div.resim2').slideUp();
});
$('#slidedown').click(function(){
$('div.resim2').slideDown();
});
$('#size').click(function(){
var say=$('button').size();
alert(say);
});
$('#each').click(function () {
$( 'label.yazi' ).each(function (i) {
if ( this.style.color!= "white" ) {
this.style.color = "black";
} else {
this.style.color = "orange";
}
});
});
$('#animate').click(function(){
$('div').animate({
width: '50px',
height: '50px'})
});
$("#for").click(function()
{
for(i=1;i<4;i++)
{
document.write("<h"+i+">for"+i);
document.write("</h"+i+">")
}
});
</script>
</body>
</html>
Gönderen zaman: Hiç yorum yok:

6 eylul (tab menu)

------------------------------------------------------------------------------------------------
<html>
< head>
< title>Tab menu </title>

< script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
< style>//tab menulerin görünümü ayarlanmıştır.
* {margin:0; padding:0;}
.tabMenuUst{width:500px; background:#B44D4D;
display:block;text-align:center;
  float:left; margin:10px auto;}
  .tabMenuUst li{display:inline-block;
  padding:5px 20px;}
   .tabMenuUst li a{color:#fff;}
   .tabMenuUst li a.secili, .tabMenuUst li a:hover{
   text-decoration:none; color:#000;}
  
.tabMenuAlt{width:500px; float:left;}
.tabMenuAlt div{width:480px; height:500px;
text-align:center;
padding:10px;
  background:#956FAC; display:none;}
.tabMenuAlt div.secili{display:Block;}
< /style>
< /head>
< body>
<ul class="tabMenuUst"> //Ust menu oluşturulmuştur.
  <li><a href="#">-----Menu 1-----</a></li>
  <li><a href="#">-----Menu 2-----</a></li>
  <li><a href="#">-----Menu 3-----</a></li>
</ul>
<div style="clear:both"></div>
<div class="tabMenuAlt">//Alt menu oluşturulmuştur.
  <div class="tabMenu1">
   ********İçerik1********
  
  </div>
  <div class="tabMenu2">
   ********İçerik 2********
  
  
  </div>
  <div class="tabMenu3">
   ********İçerik 3********
  
  
  </div>
</div>
<script>

  $('.tabMenuUst li:first-child a').addClass('secili');
  $('.tabMenuAlt div:first-child').addClass('secili');
  $('.tabMenuUst li').click(function(){
 
   $('.tabMenuUst li a').removeClass('secili');
   $('.tabMenuAlt div').removeClass('secili');
   $(this).find('a').addClass('secili')
   var tiklananLi = $(this).index();
   $('.tabMenuAlt div').eq(tiklananLi).addClass('secili');
  });
 

</script>
< /body>
< /html>
Gönderen zaman: Hiç yorum yok:

6 Eylül 2013 Cuma

5 eylul


Bu gün jquery de bazı komutları ögrendik
 
      Bu örnekte each(), for(), size() ,fade in-out-to, slide-in-out gibi komutlarıu kullandık

$(document).ready(function(){

$('ul.hide li').on({
   mouseover : function ()
   {

    $(this).find('ul').show(500);
   },
   mouseout : function ()
    {
    $(this).find('ul').hide(500);
   }
  });
    for(i=1;i<5;i++){
$('nav').slideDown(1000);
$('nav').slideUp(1000);
$('nav').fadeIn(1000);
$('nav').fadeOut(1000);
$('nav').fadeTo(1000,0.8);
};
$('bloguum').animate({
'width': '200px'
}, 500);
  });
Gönderen zaman: Hiç yorum yok:

4 Eylül 2013 Çarşamba

alert komutu


alert komutu


<html>
<head>
<link href="ders1.css" type="text/css" rel="stylesheet" media="all" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
$(document).ready(function(){
alert(1);
$('a.isr').click(function(){
alert('uyarıldınız');
});
});

</script>

</head>
Gönderen zaman: Hiç yorum yok:
css dökümümüz




body{}
.tepe{width: 100%; height: 100px; background: red; overflow:hidden; float: left;}
.tepe h1{display: inline-block;}
.tepe h1 img{width: 100px; height: 100px;}
.tepe ul{float: right;}
.tepe ul li{float: left; margin:25px 0 0 0;border-left:4px solid #fff; padding:5px}
.tepe ul li a{color: #333; font-size: 16px; text-decoration:none;}
.tepe ul li a:hover{color: #fff; text-decoration: underline;}
.orta{background:orange; overflow:hidden; width:200px;}
      .orta img{width:100px; height:100px}
     .orta ul{float:left;}
          .orta ul li{list-style:none; margin:25px 50px 0 0; padding:5px;}
      .orta ul li a{color:white; font-size:16px; text-decoration:none;}
              .orta ul li a:hover{color:#fff;}
.alt{background:yellow; overflow:hidden;}
  .alt ul{float:right;}
    .alt ul li{list-style:none; margin:25px 700px 0 0; padding:5px;}
Gönderen zaman: Hiç yorum yok:


<html>
<head>
<link href="ders1.css" type="text/css" rel="stylesheet" media="all" />
</head>

html sayfamız

<body>
<div class="tepe">
<h1>
<img src="asd.jpg"/>
</h1>
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#)"> Hakkimda </a></li>
<li><a href="#"> Blogum </a></li>
<li><a href="#"> Resimlerim </a></li>
<li><a href="#"> Sosyal Aglar </a></li>
</ul>
</div>
<div class="orta">  
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://israfilgokdag.blogspot.com">Blogum</a></li>
 <li><a href="0">Bilgilerim</a></li>
<li><a href="0">Resimlerim</a></li>
<li><a href="0">Sosyal Aglar</a></li>
<li><img src="isooo.jpg"></li>
</ul>
  </div>
  <div class="alt">  
<ul>
<li>Israfil gokdag</li>
</ul>
  </div>
  </body>
</html>
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)