Bu plugin jQueryui kitaplığında, kullanım alanı geniş olan checkbox ve radyo butonlarını ihtiyacınıza göre değişik şekillerde karşılayan hoş tasarımlı butonlar yapmanızı sağlar..
Bir tanecik blogumun plugin kategorisinde gölgelenmeye layık gördüğüm için, sizinle paylaşmak istedim..Ekran görüntüsü şöyle; Continue reading
WordPress için hazırlanan bu jQuery uygulaması ziyaretçileriniz için hazırlanan bir iletişim formudur.
Demosunu web sitemizim menü kısmının iletişim linkinde görebileceğiniz gibi şuraya tıklayarakta görebilirsiniz.
It is simple to install and comes packaged with many optional features which can be turned on simply by editing the config file – so no editing of the main source code is needed.
Features:
Included with the script is a detailed user guide which gives you an overview of every setting, tutorials on managing fields and a guide to the form validation fields.
The script gives you the flexibility to integrate the form into your own site without worries about breaking the code. By taking advantage of PHP ’s Object-Oriented features, the class can be built-on to provide additional functionality.
Requires PHP 5
Demo:
http://codecanyon.jordanh.net/demo/
http://codecanyon.net/item/awesome-contact-form/full_screen_preview/83358
jQuery Video derslerimizde daha önce görmüş olduğumuz hide / show metodlarına bir alternatif olarak toggle metodu bulunmaktadır. toggle metodu belirlediğimiz nesneyi kaybedip daha sonra tekrar gösterebilme fonksiyonudur. Continue reading
Merhaba arkadaşlar. İlk dersimizde jQuery’i kullanabilmek için ne gibi alanlardan faydalanabiliriz, jquery‘i sitemize nasıl import ederiz ve fadeOut yöntemini nasıl kullanırız sorularını cevapladık.Bu dersimizde ise jQuery‘de kullanabileceğimiz;
fadeOut, fadeIn, slideUp, slideDown, hide ve show metodlarını gösterdim.Daha kaliteli Görüntü için Videoyu indiriniz
Ben video izlemek istemiyorum diyen arkadaşlarımız için kısa bir özet geçeceğim.Download butonunu kullanarak indirdiğiniz ders içeriğinde, index.html ve jquery.js dosyasını bulacaksınız.
İndex’imizin içerisinde aşağıdaki bölümleri kullandık;
<style type="text/css">
#kutu
{
background: orange;
width: 550px;
height: 520px;
display: none;
}
p a
{
color: orange;
}
</style>
Bir önceki dersimize nazaran bu dersteki CSS farklılıkları;
display: none; :
kutu olarak adlandırdığımız katmanın görünmemesini sağladı.
p a
{
color: orange;
}
<p> olarak kullandığımız paragraf belirtecinin içerisindeki link renklerini turuncu (orange) yapmamızı sağladı
</p>
<p style="text-align: left;"><script type="text/javascript">
$(function() {
$('a').click(function() {
$('#kutu').slideDown ('6000');
$('p a').css('color' , 'green');
});
});
</script></p>
<p style="text-align: left;">
Bir önceki dersimizde gördüğümüz fadeOut yöntemini bu dersimizde slide ve hide / show metordlarıyla gösterdik.
Daha sonra
$(‘p a’).css(‘color’ , ‘green’);
olarak belirttiğimiz fonksiyon, linklerimizden herhangi birine tıklanıldıktan sonra,css kodlarında belirttiğimiz p a belirtecinin rengini green olarak değiştirmesini sağladı.
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Merhaba arkadaşlar.. Bildirgec‘ te ve blogumuzda pm olarak özel istekte bulunan arkadaşlara yöenlik jQuery yeni başlayanlar için dersler hazırlayacağım. Bu konumuzda jQuery öğrenebilmek içni ilk derimizdir.
İlk başta Video ya geçmeden önce jQuery kullanabilmek için jquery resmi sitesinden jQuery Javascript dosyasını indiriniz.Daha sonra Video’yu izleyerek jQuery kalıpları nasıl oluşturulur ve ilk olarak nereden başlamalıyız sorularınıza cevap alabilirsiniz.. Umarım faydalı bir kaynak olmuştur..Daha kaliteli Görüntü için Videoyu indiriniz
jQuery kullanabilmek için videodada gösterdiğim gibi jquery.com sitesinden indirdiğiniz jquery.js dosyası eğer index.html olarak kullandığımız sayfamız ile aynı klasördeyse (farklı klasördeyse yolunu belirtmeniz gerekiyor)aşağıdaki kodu <head> .. </head> tagları arasına giriniz ve videoda gösterdiğim uygulamaları html dosyanıza işleyiniz.
<script src="jquery.js" type="text/javascript"></script>
Ders 1- jQuery Başlangıç
Ders 2 -Fade, Slide hide -show Metodları
Ders 3 -Animate Metodu
Ders 4 – Varyasyon Oluşturma
Ders 5 - toggle ve toggleClass Metodları
Ders 6 - jQuery Slidedown Metodu Kullanımı
Ders 7 - jQuery Dersleri: hover() Metodu
Ders 8 - jQuery hover ve chlidren Metodu
Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme
Demoyu incelediğinizde gerçekten hayran bırakan ve extra seçim aralıklarıyla, menü açıklamaları ve ajax kullanımıyla göz kabartan menü özellğine sahip.. Şimdiye kadar zingocan.com da verdiğimiz dropdown menülerden en iyisi diyebilirim..Ajax menü, Submenü ve submenü başlıkları, menü içerisinde form oluşturabilme ve header image kullanabilme şansımız var…Ayrıca iki çeşit renk düzenine sahip demo1 ve demo 2 de inceyebilirsiniz.
Hemen scrptin kullanımına geçelim..
optional: jquery.metadata.plugin
optional: jquery.hoverIntent.plugin
<code>$(".myMenu").buildMenu(
{
template:"menuVoices.jsp",
additionalData:"",
menuWidth:200,
openOnRight:false,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
</code><code> fadeInTime:200,
fadeOutTime:100,
</code><code>adjustLeft:2,
adjustTop:10,
opacity:.95,
shadow:true,</code><code>
closeOnMouseOut:true,</code><code>
closeAfter:500,
minZindex:200,
hoverIntent:0
});</code>
(bu bağlam opera sistemlerinde tam çalışmayabilir)
<code>$(document).buildContextualMenu(
{
template:"menuVoices.html",
menuWidth:200,
overflow:2,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:false,</code><code>
</code><code> fadeInTime:200,</code>
<code> fadeOutTime:100,</code>
<code> adjustLeft:0,
adjustTop:0,
opacity:.99,
shadow:true,
</code><code>onContextualMenu:function(o,e){}</code>
<code> });</code>
<code><!-- menu voices --><div><table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr> <td menu="menu_12" >ajax menu 1</td> <td menu="menu_2" >menu 2</td> <td menu="menu_3" >menu 3</td> </tr></table> </div> </code> <!– end menu voices –>
<code><!-- example code --><div id="menu_1" class="menu"><a rel="title" >title menu_1.1</a> <!-- menuvoice title-->
<a href="../mb_carusel/carousel.html" target="_blank" img="image.gif" >menu_1.1 (href)</a> <!-- menuvoice with href-->
<a action="document.title=('menu_1.2')" >menu_1.2</a> <!-- menuvoice with js action-->
<a rel="separator"></a> <!-- menuvoice separator-->
<a action="document.title=('menu_1.3')" disabled=true>menu_1.3</a> <!-- menuvoice disabled-->
<a action="document.title=('menu_1.4')" menu="menu_1" img="image.png">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
</div></code>
Bölgelerini kendinize göre değişerek sonuca ulaşınız..Teşekkürler..İşte Örnekler;
Sadece aşağıdaki kod ile örneğin; 2009 yılında en çok yorumlanan konuları gösterebilirsiniz.. Yada siz buına daha özel bir kategori oluşturarak istediğiniz bir tarih aralığında yayımlanan wordpress konularından en çok yorumlanan konuların top list şeklinde gösterebilirsiniz.. Bunu için aşağıda verdiğim kodun 4.satırındaki (line 4)
BETWEEN '2009-01-01' AND '2009-12-31'
parametrelerini istediğiniz tarihe göre düzenleyip gösterime sunabilirsini.. iyi eğlenceler dilerim.. işte kodun tamamı:
<h2>2009 En çok yorumlananları</h2>
<ul>
<?php
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2009-01-01' AND '2009-12-31' ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $topten) {
$postid = $topten->ID;
$title = $topten->post_title;
$commentcount = $topten->comment_count;
if ($commentcount != 0) {
?>
<li><a href="<?php echo get_permalink($postid); ?>"><?php echo $title ?></a></li>
<?php }
}
?>
</ul>
Bu jquery dersimizde CSS ve jQuery kullanarak sadee ve güzel görünümlü bir saat oluşturacağız.. Demoyu inceledikten sonra kaynak dosyamızı indirip Kolları sıvayalım. Continue reading
Artistlik web sitelerinde gördüğünüz efekt vererek silme işlemini 19 satırlık jQuery kodu ile burada olduğu gibi kolayca yapabilirsiniz.
Demosuna buradan bakabilirsiniz.
PHP veri silme kodumuz;
if(isset($_GET['delete'])){$query='DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];$result= mysql_query($query,$link);}
PHP verileri listeleme kodumuz;
.$query='SELECT * FROM my_table ORDER BY title ASC';$result= mysql_query($query,$link);while($row= mysql_fetch_assoc($result)){echo'<div id="record-',$row['item_id'],'"><a href="?delete=%27,$row%5B%27item_id%27%5D,%27"class="delete">Delete</a><strong>',$row['title'],'</strong></div>';}
Ve jQuery kodumuz;
.$(document).ready(function() {$('a.delete').click(function(e) {e.preventDefault();varparent = $(this).parent();$.ajax({type:'get',url:'jquery-record-delete.php',data:'ajax=1&delete='+ parent.attr('id').replace('record-',''),beforeSend:function() {parent.animate({'backgroundColor':'#fb6c6c'},300);},success:function() {parent.slideUp(300,function() {parent.remove();});}});});});
Bu kodları bir sayfada birleştirmeniz yeterli bunun yanı sıra jQuery dosyasınıda sayfaya dahil etmelisiniz.
jQuery dosyasını indirdikden sonra aşağıdaki html kodu ile dahil edebilirsiniz.