<![CDATA[MyBB Depo Forum - Jquery]]> https://mybbdepo.com/ Sat, 26 Sep 2026 02:05:29 +0000 MyBB <![CDATA[jQuery ile Farenin Sağ Tuşuyla Açılan Menü]]> https://mybbdepo.com/jquery-ile-farenin-sag-tusuyla-acilan-menu-konusu.html Mon, 01 Jun 2015 00:18:55 +0300 https://mybbdepo.com/jquery-ile-farenin-sag-tusuyla-acilan-menu-konusu.html resim



Merhaba arkadaşlar, ben Semih Yıldırım. Bugün jQuery ile farenin sağ tuşuna basınça açılan menünün nasıl yapıldığını anlatıcam.


Hazırlayacağımız kod ilk başta jQuery’nin preventDefault tanımıyla klasik contextmenu taslağını kapatacak. Daha sonra da birlikte hazırlayacağımız ul yapısını görüntülenebilir hale getirecek. Özetle iskelet için HTML, makyaj için CSS ve fonksiyonelite için jQuery tanımlarına ihtiyaç duyacağız. HTML kodlarımız ile başlayalım.



HTML Kodları

Font Awesome iconlarını kullanmak için <head></head> taglarının içerisine aşağıdaki tanımlamayı yapın.




Kod:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


Şimdi sağ tuşla açılan menü örneğinin temelini klasik ul yapısına dayandıralım. Menüyü .contextMenu şeklinde isimlendiriyoruz.




Kod:
<ul class="contextMenu" hidden>
  <li><a href="#"><i class="fa fa-home"></i> Homepage</a></li>
  <li><a href="#"><i class="fa fa-sitemap"></i> Sitemap</a></li>
  <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
  <li>
      <a class="fa fa-facebook" href="#"></a>
      <a class="fa fa-twitter" href="#"></a>
      <a class="fa fa-google-plus" href="#"></a>
      <a class="fa fa-linkedin" href="#"></a>
  </li>
</ul>


CSS Kodları

Örnekte Roboto isimli fontu kullanıyoruz. Eğer sizler de Roboto’yu kullanmak isterseniz aşağıdaki kodu CSS dosyanızın en üstüne ekleyin.




PHP Kod:
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext); 


Menünün iskelet yapısını stilize ederek başlayalım.




PHP Kod:
ul.contextMenu{
  list-style:none;
  margin:0;padding:0;
  font: 300 15px 'Roboto', sans-serif;
  position: absolute;
  color: #333;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
} 



Tüm menüde gerçekleşecek renk geçişlerine efekt atayalım.





PHP Kod:
ul.contextMenu *{
    transition:color .4s, background .4s;
} 


Şimdi de menü itemlarımızı tanımlayalım.




PHP Kod:
ul.contextMenu li{
  min-width:150px;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 15px;
  background-color: #fff;
  border-bottom:1px solid #ecf0f1;
}
 
ul.contextMenu li a{
  color:#333;
  text-decoration:none;
}
 
ul.contextMenu li:hover{
  background-color: #ecf0f1;
}
 
ul.contextMenu li:first-child{
  border-radius: 5px 5px 0 0;
}
 
ul.contextMenu li:last-child{
  background:#ecf0f1;
  border-bottom:0;
  border-radius: 0 0 5px 5px
}
 
ul.contextMenu li:last-child a{width:26%;}
ul.contextMenu li:last-child:hover a{color:#2c3e50}
ul.contextMenu li:last-child:hover a:hover{color:#2980b9} 



jQuery Kodları



Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.




PHP Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 


Şimdi sağ tuşla açılan orjinal menüyü kilitleyip kendi menümüzü tetikleyebiliriz.







Kod:
$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $("ul.contextMenu")
        .show()
        .css({top: event.pageY + 15, left: event.pageX + 10});
});
$(document).click(function() {
  isHovered = $("ul.contextMenu").is(":hover");
  if (isHovered == false){
    $("ul.contextMenu").fadeOut("fast");
  }
});
]]> resim



Merhaba arkadaşlar, ben Semih Yıldırım. Bugün jQuery ile farenin sağ tuşuna basınça açılan menünün nasıl yapıldığını anlatıcam.


Hazırlayacağımız kod ilk başta jQuery’nin preventDefault tanımıyla klasik contextmenu taslağını kapatacak. Daha sonra da birlikte hazırlayacağımız ul yapısını görüntülenebilir hale getirecek. Özetle iskelet için HTML, makyaj için CSS ve fonksiyonelite için jQuery tanımlarına ihtiyaç duyacağız. HTML kodlarımız ile başlayalım.



HTML Kodları

Font Awesome iconlarını kullanmak için <head></head> taglarının içerisine aşağıdaki tanımlamayı yapın.




Kod:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


Şimdi sağ tuşla açılan menü örneğinin temelini klasik ul yapısına dayandıralım. Menüyü .contextMenu şeklinde isimlendiriyoruz.




Kod:
<ul class="contextMenu" hidden>
  <li><a href="#"><i class="fa fa-home"></i> Homepage</a></li>
  <li><a href="#"><i class="fa fa-sitemap"></i> Sitemap</a></li>
  <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
  <li>
      <a class="fa fa-facebook" href="#"></a>
      <a class="fa fa-twitter" href="#"></a>
      <a class="fa fa-google-plus" href="#"></a>
      <a class="fa fa-linkedin" href="#"></a>
  </li>
</ul>


CSS Kodları

Örnekte Roboto isimli fontu kullanıyoruz. Eğer sizler de Roboto’yu kullanmak isterseniz aşağıdaki kodu CSS dosyanızın en üstüne ekleyin.




PHP Kod:
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext); 


Menünün iskelet yapısını stilize ederek başlayalım.




PHP Kod:
ul.contextMenu{
  list-style:none;
  margin:0;padding:0;
  font: 300 15px 'Roboto', sans-serif;
  position: absolute;
  color: #333;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
} 



Tüm menüde gerçekleşecek renk geçişlerine efekt atayalım.





PHP Kod:
ul.contextMenu *{
    transition:color .4s, background .4s;
} 


Şimdi de menü itemlarımızı tanımlayalım.




PHP Kod:
ul.contextMenu li{
  min-width:150px;
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 15px;
  background-color: #fff;
  border-bottom:1px solid #ecf0f1;
}
 
ul.contextMenu li a{
  color:#333;
  text-decoration:none;
}
 
ul.contextMenu li:hover{
  background-color: #ecf0f1;
}
 
ul.contextMenu li:first-child{
  border-radius: 5px 5px 0 0;
}
 
ul.contextMenu li:last-child{
  background:#ecf0f1;
  border-bottom:0;
  border-radius: 0 0 5px 5px
}
 
ul.contextMenu li:last-child a{width:26%;}
ul.contextMenu li:last-child:hover a{color:#2c3e50}
ul.contextMenu li:last-child:hover a:hover{color:#2980b9} 



jQuery Kodları



Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.




PHP Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 


Şimdi sağ tuşla açılan orjinal menüyü kilitleyip kendi menümüzü tetikleyebiliriz.







Kod:
$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $("ul.contextMenu")
        .show()
        .css({top: event.pageY + 15, left: event.pageX + 10});
});
$(document).click(function() {
  isHovered = $("ul.contextMenu").is(":hover");
  if (isHovered == false){
    $("ul.contextMenu").fadeOut("fast");
  }
});
]]> <![CDATA[Jquery Gizle/Göster]]> https://mybbdepo.com/jquery-gizle-goster-konusu.html Wed, 18 Feb 2015 11:57:07 +0200 https://mybbdepo.com/jquery-gizle-goster-konusu.html
PHP Kod:
<a id="gg" href="#">Gizle/Göster</a>
<div class="icerik">İcerik</div> 

JQuery Kod;
Kod:
$(function(){
$(".icerik").hide(); // icerik divini gizle
$("#gg").click(function(){ // id'si "gg" olan dive tıklanınca
$(".icerik").slideToggle(); // icerik divini göster/gizle
return false; // return false "#"'yi göstermez
    });
});
]]>
PHP Kod:
<a id="gg" href="#">Gizle/Göster</a>
<div class="icerik">İcerik</div> 

JQuery Kod;
Kod:
$(function(){
$(".icerik").hide(); // icerik divini gizle
$("#gg").click(function(){ // id'si "gg" olan dive tıklanınca
$(".icerik").slideToggle(); // icerik divini göster/gizle
return false; // return false "#"'yi göstermez
    });
});
]]> <![CDATA[Jquery zaman ayarlı Yükleniyor - Loading yapımı + Text Reklam + Duyuru]]> https://mybbdepo.com/jquery-zaman-ayarli-yukleniyor-loading-yapimi-text-reklam-duyuru-konusu.html Mon, 08 Oct 2012 14:48:22 +0300 https://mybbdepo.com/jquery-zaman-ayarli-yukleniyor-loading-yapimi-text-reklam-duyuru-konusu.html Jquery ile zaman ayarlı Yükleniyor - Loading image yapımı + Text Reklam + Duyuru vb. uygulamalar oluşturma.

Merhaba arkadaşlar,
Bu konumuzda Jquery tekniği ile basit bir şekilde sayfa yükleniyor uygulamasını yapacağız. Aynı zamanda yine bu kodlar sayesinde zaman ayarlı, text reklam, duyuru mesajı vb. gibi şeylerin nasıl yapıldığını anlatmaya çalışacağım. Buyrun hemen anlatıma geçelim..

Jquery sayfa yükleniyor, loading image yapımı:

Css kodları:
PHP Kod:
.Yukleniyor_CSS {
    background: url("images/yukleniyor.gif") repeat scroll 0 0 transparent;
    top: 150px;  /*-[yukarı-aşağı]-*/
    left: 500px;  /*-[saga-sola]-*/
    width: 100px;  /*-[resim genişlik]-*/
    height: 100px;  /*-[resim yükseklik]-*/
    z-index: 2;  /*-[gölge komutu]-*/
    position: absolute;  /*-[pozisyon komutu]-*/
    text-indent: -9999em; /*-[yazi gizle]-*/
} 

html kodları:
PHP Kod:
<div class="Yukleniyor_CSS">Sayfa Yükleniyor...</div> 

js kodları 1:
PHP Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('.Yukleniyor_CSS').hide();  //oto göster ve gizle - kendi halinde
});
</script> 

js kodları 2 (zaman ayarlı):
PHP Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.Yukleniyor_CSS').fadeOut(5000); //zaman ayarı 5 saniye
});
</script> 

Alternatif olarak, css'den resim yerine arkaplan renk kodu atayıp resimide html olarak ekleme:
PHP Kod:
background-color: #333; 

PHP Kod:
<div class="Yukleniyor_CSS">
<img src="http://destek.mybb.com.tr/images/spinner_big.gif" alt="Yükleniyor..." />
</div> 

Ya da..
PHP Kod:
background: #333 url("http://destek.mybb.com.tr/images/spinner_big.gif") repeat scroll 0 0 transparent; 

Ve ya..
PHP Kod:
background-color: #333;
background-image: url("http://destek.mybb.com.tr/images/spinner_big.gif") repeat scroll 0 0 transparent; 

Aynı zamanda, bu uygulama sayesinde, zaman ayarlı text reklam, duyuru vs. gibi şeylerde gösterilebilir..

Örnek:
PHP Kod:
<div class="Yukleniyor_CSS">Reklam, Yazı, Duyuru içeriği buraya gelecek.</div> 

Yazının gözükmesi için, css kodundan yazıyı gizleyen kodu silmek yeterlidir.
PHP Kod:
text-indent: -9999em; /*-[yazi gizle]-*/ 

Görünüşü oval yapmak için css kodlarına aşağıdaki css elementlerini ekleyebilirsiniz.
PHP Kod:
border-radius: 5px;  //Son sürüm tarayıcılar
 -o-border-radius: 5px;  //Opera
 -ms-border-radius: 5px;  //MSI
 -moz-border-radius: 5px; //Mozilla
 -khtml-border-radius: 5px;  //Konqueror, ABrowse, Apple Safari, Nokia
 -webkit-border-radius: 5px;  //Chrome 

Sabitlemek için css kodlarına aşağıdaki css elementini ekleyebilirsiniz.
PHP Kod:
position: fixed;  //Sabitleme kodu 

Eğer CSS bilgisi yeterli seviyede ise, css kodlarını geliştirip daha farklı uygulamalar içinde kullanılabilir..

Ekteki resmi, ftp'den ''./images'' klasörünün içine yüklemeyi unutmayınız.

Demo Link: http://mybbdepo.com/

Kaynak: Jquery zaman ayarlı Yükleniyor Yapımı Alıntı
MCTR - XpSerkan

.gif   yukleniyor.gif (Dosya Boyutu: 5.72 KB / İndirme Sayısı: 30) ]]> Jquery ile zaman ayarlı Yükleniyor - Loading image yapımı + Text Reklam + Duyuru vb. uygulamalar oluşturma.

Merhaba arkadaşlar,
Bu konumuzda Jquery tekniği ile basit bir şekilde sayfa yükleniyor uygulamasını yapacağız. Aynı zamanda yine bu kodlar sayesinde zaman ayarlı, text reklam, duyuru mesajı vb. gibi şeylerin nasıl yapıldığını anlatmaya çalışacağım. Buyrun hemen anlatıma geçelim..

Jquery sayfa yükleniyor, loading image yapımı:

Css kodları:
PHP Kod:
.Yukleniyor_CSS {
    background: url("images/yukleniyor.gif") repeat scroll 0 0 transparent;
    top: 150px;  /*-[yukarı-aşağı]-*/
    left: 500px;  /*-[saga-sola]-*/
    width: 100px;  /*-[resim genişlik]-*/
    height: 100px;  /*-[resim yükseklik]-*/
    z-index: 2;  /*-[gölge komutu]-*/
    position: absolute;  /*-[pozisyon komutu]-*/
    text-indent: -9999em; /*-[yazi gizle]-*/
} 

html kodları:
PHP Kod:
<div class="Yukleniyor_CSS">Sayfa Yükleniyor...</div> 

js kodları 1:
PHP Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('.Yukleniyor_CSS').hide();  //oto göster ve gizle - kendi halinde
});
</script> 

js kodları 2 (zaman ayarlı):
PHP Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(window).load(function(){
jQuery('.Yukleniyor_CSS').fadeOut(5000); //zaman ayarı 5 saniye
});
</script> 

Alternatif olarak, css'den resim yerine arkaplan renk kodu atayıp resimide html olarak ekleme:
PHP Kod:
background-color: #333; 

PHP Kod:
<div class="Yukleniyor_CSS">
<img src="http://destek.mybb.com.tr/images/spinner_big.gif" alt="Yükleniyor..." />
</div> 

Ya da..
PHP Kod:
background: #333 url("http://destek.mybb.com.tr/images/spinner_big.gif") repeat scroll 0 0 transparent; 

Ve ya..
PHP Kod:
background-color: #333;
background-image: url("http://destek.mybb.com.tr/images/spinner_big.gif") repeat scroll 0 0 transparent; 

Aynı zamanda, bu uygulama sayesinde, zaman ayarlı text reklam, duyuru vs. gibi şeylerde gösterilebilir..

Örnek:
PHP Kod:
<div class="Yukleniyor_CSS">Reklam, Yazı, Duyuru içeriği buraya gelecek.</div> 

Yazının gözükmesi için, css kodundan yazıyı gizleyen kodu silmek yeterlidir.
PHP Kod:
text-indent: -9999em; /*-[yazi gizle]-*/ 

Görünüşü oval yapmak için css kodlarına aşağıdaki css elementlerini ekleyebilirsiniz.
PHP Kod:
border-radius: 5px;  //Son sürüm tarayıcılar
 -o-border-radius: 5px;  //Opera
 -ms-border-radius: 5px;  //MSI
 -moz-border-radius: 5px; //Mozilla
 -khtml-border-radius: 5px;  //Konqueror, ABrowse, Apple Safari, Nokia
 -webkit-border-radius: 5px;  //Chrome 

Sabitlemek için css kodlarına aşağıdaki css elementini ekleyebilirsiniz.
PHP Kod:
position: fixed;  //Sabitleme kodu 

Eğer CSS bilgisi yeterli seviyede ise, css kodlarını geliştirip daha farklı uygulamalar içinde kullanılabilir..

Ekteki resmi, ftp'den ''./images'' klasörünün içine yüklemeyi unutmayınız.

Demo Link: http://mybbdepo.com/

Kaynak: Jquery zaman ayarlı Yükleniyor Yapımı Alıntı
MCTR - XpSerkan

.gif   yukleniyor.gif (Dosya Boyutu: 5.72 KB / İndirme Sayısı: 30) ]]>