Serpito » Javascript

Jquery: Date Picker (Takvim) uygulaması

Atilla Akoğlu — Thu, 08 Apr 2010 06:55:14 +0000

Web sitelerimizde kullanıcılarımız tarih işlemleri yaparken tarihleri uygun bir biçimde yazmaları ve bizimde sorgularımız bu dogrultuda yapmamız gerekir. Tarih işlemleri i “Jquery Date Pick’i ” kullanabiliriz. İnput alanımız aktif edildiği anda karşımızı bir takvim geliyor ve bu alandan sitediğimiz tarihi seçebiliyoruz.

Dosyamıza jsDatePick.min.1.1.js dosyamızı ve jsDatePick.css stil dosyamızı ekliyoruz, ardından aşagıda yer alan javascript kodumuzu yazıyoruz ve input id inputField aktif edildiğinde karşımızam tarhi seçimi yapacağımız takvimimiz geliyor.






Gumusluoglu.Com || JsDatePick Javascript

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

Jquery: CSS: Drop Down Menü

sword fish — Thu, 25 Feb 2010 13:20:42 +0000

Sitelerimizde yer alan açılır menüleri oluşturmak kullanmak kadar kolay ve zevklidir. ul etikeni açıyoruz ve ana menü başlıklarını li etiketi içerisine yazıyoruz.



Konu Başlıkları
Ana Sayfa
İletişim
Hakkımızda

Yukarıdaki kodlar ile sadece yan yana linklerimiz dizmiş oluyoruz, alt menü eklenmemiş halde. Ana menümüze alt menü eklemeye geldi sıra


        
        	Konu Başlıkları
        		
        			 CSS
        			 Genel
        			 Javascript
        			 Jquery
        			 MYSQL
        			 Php

Konu başlıkları menüsünün üzerine geldiğimizde CSS, Genel, Javascript, Jquery, MYSQL ve Php menüleri açılıyor.Konu başlıkları menümüze alt menü eklemek için Konu Başlıkları’nın yer aldığı li etiketini kapatmadan önce class’ı sub_menu olan bir ul açıyoruz ve alt menü içeriklerini li etiketleri arasına yazıyoruz, alt menüleri oluşturduktan sonra ul etiketimizi ve Konu Başlıklarının yer aldığı li yi kapatıyoruz. En son olarakda ana ul mizi kapatıyoruz ve alt menülerimiz oluşuyor.
Örneğimizi biraz daha geliştirelim ve iki ana menü altında alt menülerimizi oluşturalım.


        
        	Konu Başlıkları
        		
        			 CSS
        			 Genel
        			 Javascript
        			 Jquery
        			 MYSQL
        			 Php
        		
        	
        	CSS
        		
        			Link İle Form Submit
        			Jquery Text to İmage
        			Css From Örneği

Konu başlıkları ve CSS ana menüleri altında alt menüler oluşturmuş olduk. Konu Başlıkları ana menüsü altında; CSS, Genel, Javascript, Jquery, MYSQL ve Php, CSS ana menüsü altında ise; Link İle Form Submit, Jquery Text to İmage ve Css Form Örneği alt menülerini oluşturduk.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

Javascript Slider Galeri

sword fish — Tue, 16 Feb 2010 15:42:31 +0000

Web sitelerinde fotografların kullanımları ve kullandığımız fotografların kullanıcılara sunum şekli herzaman için önem arz etmiştir. Galerimizde yer alan fotograflar çok ve sitemizdeki kullanım alanımız sınırlı ise fotografı dizerek değildi bir botun, fotograf veya link’e tıklanıldığında galerimizi ekrana getirebilir ve galerimizdeki fotograflarımız kullanıcılara bu şekilde sunabiliriz, ilk olarak html kodlarımızdan başlayalım.






Gumusluoglu.com Slider Galeri - Images gallery

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

Mootools Slider Buton

Atilla Akoğlu — Mon, 15 Feb 2010 21:58:17 +0000

Web sitelerimizde yer alan butonları mootools ve css ile daha görsel ve kullanışlı hale getirebiliriz. Sayfalarımızda yer alan menü isimleri bazen yeteri kullanıcılara bilgi vermeye bilir. Kullanıcıların butonlara tıklamak için mause ile üzerlerine geldiklerinde açılan bir açıklama bölümü oluşturmaya ögreneceğiz bu uygulamada.

İlk olarak javascript kodlarımızdan başlayalım

<br />
	&lt;script type="text/javascript" src="mootools-1.js"&gt;&lt;/script&gt;<br />
	&lt;script type="text/javascript"&gt;<br />
		window.addEvent('domready',function() {<br />
			$$('.slidebttn').each(function(btn) {<br />
				var prev = btn.getPrevious('a').set('tween',{ duration: 500 });<br />
				var span = prev.getElement('span');<br />
				btn.addEvents({<br />
					mouseenter: function(e) {<br />
						btn.addClass('a');<br />
						prev.tween('width',225);<br />
						span.fade('in');<br />
					},<br />
					mouseleave:function(e) {<br />
						btn.removeClass('button_c');<br />
						prev.tween('width',70);<br />
						span.fade('out');<br />
					}<br />
				});<br />
			});<br />
		});<br />
	&lt;/script&gt;<br />

Html Kodlarımız

<br />
&lt;div id="content"&gt;<br />
    &lt;div class="button_wrap"&gt;<br />
        &lt;a class="button_aRight" id="button_aLeft"&gt;&lt;span style="visibility: hidden; opacity: 0;"&gt;Facebook'a giriş yapma&lt;/span&gt;&lt;/a&gt;<br />
        &lt;a class="button_bRight slidebttn" id="button_bRight"&gt;Facabook&lt;/a&gt;<br />
    &lt;/div&gt;<br />
    &lt;div class="button_wrap"&gt;<br />
        &lt;a class="button_aRight" id="button_aLeft"&gt;&lt;span style="visibility: hidden; opacity: 0;"&gt;Twitter'a giriş yapma&lt;/span&gt;&lt;/a&gt;<br />
        &lt;a class="button_bRight slidebttn" id="button_bRight"&gt;Twitter&lt;/a&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />

Uygulamanın çalışır demosunu incelemek için tıklayınız.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

jQuery Dropdown (Açılır) Menu

Atilla Akoğlu — Thu, 11 Feb 2010 13:50:01 +0000

Web sitelerimizdeki menülerin css’ler ve jquery ile daha ilgi çekici ve ilginç özellikler ekleye biliriz. Bu örneğimizde menü üzerine gelindiğinde menü gözüküyor ve alt menüleri de dropdown olarak gösteriyoruz.

Menü aşağıdaki biçimde açılıyor

Örnek Uygulama

Uygulama dosyaları

HTML kodlarımız


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gumusluoglu.Com</title>

<link rel="stylesheet" href="main.css" />

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="xbreadcrumbs.js"></script>
<link rel="stylesheet" href="xbreadcrumbs.css" />

<script type="text/javascript">
	$(document).ready(function(){
        //  Initialize xBreadcrumbs
        $('#breadcrumbs-1').xBreadcrumbs();
        $('#breadcrumbs-2').xBreadcrumbs({ collapsible: true });
        $('#breadcrumbs-3').xBreadcrumbs();
	});
</script>

<style type="text/css">
    .xbreadcrumbs LI {
        border-right: none;
        background: url(images/separator.gif) no-repeat right center;
        padding-right: 15px;
        padding-left: 10px;
    }
    .xbreadcrumbs LI.current { background: none; }
    .xbreadcrumbs LI UL LI { background: none; }

    .xbreadcrumbs LI A.home {
        background: url(images/home.gif) no-repeat left center;
        padding-left: 20px;
    }

    /*  Custom styles for breadcrums (#breadcrumbs-3)  */
    .xbreadcrumbs#breadcrumbs-3 {
        background: none;
    }
    .xbreadcrumbs#breadcrumbs-3 LI A {
        text-decoration: underline;
        color: #0A8ECC;
    }
    .xbreadcrumbs#breadcrumbs-3 LI A:HOVER, .xbreadcrumbs#breadcrumbs-3 LI.hover A { text-decoration: none; }
    .xbreadcrumbs#breadcrumbs-3 LI.current A {
        color: #333333;
        text-decoration: none;
    }
    .xbreadcrumbs#breadcrumbs-3 LI {
        border-right: none;
        background: url(images/separator-arrow.gif) no-repeat right center;
        padding-right: 15px;
        padding-left: 10px;
    }
    .xbreadcrumbs#breadcrumbs-3 LI.current { background: none; }
    .xbreadcrumbs#breadcrumbs-3 LI UL LI { background: none; padding: 0;  }

    /*  Demo styles  */
    BODY {
        margin: 20px;
        padding: 20px;
    }
    STRONG { color: #000000; }
    .vspacer {
        height: 20px;
    }
    PRE.code {
        padding: 7px;
        background: #777777;
        color: #F0F0F0;
        width: 400px;
        overflow: auto;
    }
</style>
</head>
<body>
    <div id="page">
        <!-- Example 2 -->
        <ul class="xbreadcrumbs" id="breadcrumbs-2">
            <li>
               <a href="#" class="home">Ana Sayfa</a>

               <ul>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/ajax-ile-jquery-kullanici-mesaj-formu/" target="_blank">AJAX ile jQuery Kullanıcıa></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/htaccess-subdomaini-dizine-yonlendirmek/" target="_blank">.htaccess-subdomain’i </a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/jquery-form-validator/" target="_blank">Jquery Form Validator</a></li>
                   <li><a href="#" target="_blank">Advertise With Us</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/slider-login-twitter-tarzi-login/" target="_blank">Slider Login (Twitter Tarzı Login)</a></li>

               </ul>
            </li>

            <li>
               <a href="#">PHP</a>
               <ul>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/php-ile-random-sayi-uretme/" target="_blank">Php ile Random Sayı Üretme</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/jquery-tab-uygulamasi/" target="_blank">Jquery Tab Uygulaması</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/pop-up-sayfa/" target="_blank">Pop-up Sayfa</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/phpde-xml-olusturma/" target="_blank">Php’de XML Oluşturma</a></li>
               </ul>
            </li>
            <li>
               <a href="#">MYSQL</a>
               <ul>

                   <li><a href="http://www.gumusluoglu.com/kategoriler/mysql-lower-ve-upper-komutu/" target="_blank">Mysql Lower ve Upper Komutu</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/mysql-andve-ve-orveya-komutu/" target="_blank">Mysql AND(ve) ve OR(veya) Komutu</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/mysqlde-distict-komutu/" target="_blank">Mysql’de Distinct Komutu</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/mysql-truncate-tablu-icerisini-bosaltma-komutu/" target="_blank">Mysql Truncate (Tablu içerisini boşaltma) Komutu</a></li>
                   <li><a href="http://www.gumusluoglu.com/kategoriler/mysql-join/" target="_blank">Mysql Join</a></li>
               </ul>

            </li>
            <li>
               <a href="#">Dost Siteler</a>
               <ul>
                   <li><a href="http://www.serpito.com/">Serpitp</a></li>
                   <li><a href="http://www.dilmen.net/">Aykut Dilmen</a></li>
               </ul>

            </li>
            <li class="current"><a href="#">Gumusluoglu.Com Site İçeriği</a></li>
        </ul>
	</div>
</body>
</html>

Javascript kodalarımız


/*
	xBreadcrumbs (Extended Breadcrums) jQuery Plugin
	© 2009 ajaxBlender.com
	For any questions please visit www.ajaxblender.com
	or email us at support@ajaxblender.com
*/

;(function($){
	/*  Variables  */
	$.fn.xBreadcrumbs = function(settings){
		var element = $(this);
		var

		settings = $.extend({}, $.fn.xBreadcrumbs.defaults, settings);

		function _build(){
			if(settings.collapsible){
				var sz = element.children('LI').length;
				element.children('LI').children('A').css('white-space', 'nowrap').css('float', 'left');
				element.children('LI').children('A').each(function(i, el){
					if(i != sz - 1){
						$(this).css('overflow', 'hidden');
						$(this).attr('init-width', $(this).width());
						$(this).width(settings.collapsedWidth);
					}
				});
			}

            element.children('LI').mouseenter(function(){
                if($(this).hasClass('hover')){ return; }

            	_hideAllSubLevels();
            	if(!_subLevelExists($(this))){ return; }

            	// Show sub-level
            	var subLevel = $(this).children('UL');
            	_showHideSubLevel(subLevel, true);

            	if(settings.collapsible && !$(this).hasClass('current')){
            		var initWidth = $(this).children('A').attr('init-width');
            		$(this).children('A').animate({width: initWidth}, 'normal');
            	}
            });

            element.children('LI').mouseleave(function(){
                var subLevel = $(this).children('UL');
                _showHideSubLevel(subLevel, false);

                if(settings.collapsible && !$(this).hasClass('current')){
                	$(this).children('A').animate({width: settings.collapsedWidth}, 'fast');
                }
            });
		};

		function _hideAllSubLevels(){
			element.children('LI').children('UL').each(function(){
                $(this).hide();
                $(this).parent().removeClass('hover');
			});
		};

		function _showHideSubLevel(subLevel, isShow){
			if(isShow){
                subLevel.parent().addClass('hover');
                if($.browser.msie){
                	var pos = subLevel.parent().position();
                	subLevel.css('left', parseInt(pos['left']));
                }
				if(settings.showSpeed != ''){ subLevel.fadeIn( settings.showSpeed ); }
				else { subLevel.show(); }
			} else {
                subLevel.parent().removeClass('hover');
                if(settings.hideSpeed != ''){ subLevel.fadeOut( settings.hideSpeed ); }
                else { subLevel.hide(); }
			}
		};

		function _subLevelExists(obj){
			return obj.children('UL').length > 0;
		};

		//    Entry point
		_build();
	};

	/*  Default Settings  */
	$.fn.xBreadcrumbs.defaults = {
		showSpeed:        'fast',
		hideSpeed:        '',
		collapsible:      false,
		collapsedWidth:   10
	};
})(jQuery);

Curvy Corners ile yuvarlak köşeler

Atilla Akoğlu — Thu, 11 Feb 2010 13:19:33 +0000

Her ne kadar yeni nesil tarayıcılarda CSS ile pratik bir şekilde dilediğimiz ölçülerde yuvarlak köşe oluşturabilsek de, microsoft internet explorer tarayıcıları henüz bu özelliği desteklememektedir.

Mozilla Firefox, Google Chrome, Safari gibi popüler web tarayıcı için aşağıdaki CSS kodları istenilen yuvarlak köşelere uyum gösteriyor.

[sourcecode lang="php">

[/sourcecode]

Curvy Corners javascript apisi ile birlikte hızlıca bütün tarayıcılarda kusursuz çalışan yuvarlak köşeler yapabilirsiniz.

Öncelikle CurvyCorners.js dosyasını indiriyoruz.

Yeni bir index.html dosyası oluşturup aşağıdaki kodları içine yapıştırın.

[sourcecode lang="php"]

Curvy Corners by Serpito

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Reading this stuff will rot your mind. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.

Bu sayfa curvyCorners ile yuvarlak köşeler için hazırlanan demoyu inceliyorsunuz.

[sourcecode]

Uygulamanın demosu için tıklayınız.
Curvy Corners dosyalarının tamamını indirmek için tıklayınız.

Yapım Aşamasında Şablonu (Under Construction Template)

Atilla Akoğlu — Mon, 08 Feb 2010 14:21:18 +0000

Yapım aşamasındaki projeler için kaliteli ve ilgi çekici bir giriş sayfası.

Önizleme Şablonu indir

Javascript Pop-up Sayfa Oluşturma

sword fish — Tue, 02 Feb 2010 12:28:04 +0000

Web sayfalarında normal sayfaların dışında pop-up sayfalarda oluşturmak isteyebiliriz. Bu örnegimizde bir pop-up sayfa yapmayı öğreniyoruz.
İndex.html dosyamızın kodları:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',
left='+LeftPosition+',scrollbars='+scroll+',location=no,
directories=no,status=no,menubar=no,toolbar=no,resizable=no';

win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}
function CloseNewWin(){if(win!=null && win.open)win.close()}
// -->
</script>
</head>

<body>
<a href=http://www.serpito.com/ onclick="NewWindow(this.href,'PopUp','600','500','no','center');return false" onfocus="this.blur()">Pop-up Linki</a>
</body>
</html>

Yukarıdaki kodlar ile pop-up bir sayfa oluşturmuş olduk.

Dropdown menu (Açılır menü) uygulaması

sword fish — Fri, 15 Jan 2010 14:21:19 +0000

Web sitelerin de dropdown menuleri çok sıklıkla kullanabiliyoruz. Bu örneğimizde css ler uyguladığımız ve mause üzerine geldiginde kendiliginden açılan br menu oluşturmayı ögreneceğiz.
Sayfamızda dropdown menu’nun açılır ve kapanır olmasını sağlayan kodu inceleyelim.

Yukarıdaki kodlarda :

class’ı dropdownmenu üzerine mause ile gelindiginde id’si menu olan nesneyi açma komutunu verdik.


$(".dropdownmenu").mouseleave(function () {
 $("#menu").slideToggle();
 });

class’ı dropdownmenu üerinden mause çekildiğinde kendiliğinden menünun açıldığı gibi kapanmasını sağladık.

index.htm sayfa kodlarımız:





 
 Gumusluoglu.Com
 
 
 




 
 Site Seçenekleri
 
 Yaşam Öyküsü
 Kültür Tv
 Google
 Serpito
 Gumusluoglu.Com
 Yaşam Öyküsü
 Kültür Tv
 Google
 Serpito
 Gumusluoglu.Com

Jquery: kLabel Fonksiyonu

yedincisenol — Sun, 10 Jan 2010 16:40:45 +0000

Web siteleri kodlarken Html kodlama aşamasında form alanlarında kullanılabilirliği artırmak için label etiketlerini kullanırız; bu etiket belirlenen form nesnesiyle alakalı metin’e tıklandığında ilgili form nesnesine odaklanmayı(focus) sağlar.

Bildiğiniz üzere bir label’e tıklandığında hangi form nesnesine odaklanacağını belirlemek için label etiketine “for” değeri veririz.

[php]
Nesne Tanımı
[/php]

örnek bir kullanım.

Arayüz kodlarken ne kadar az nesne ve etiket kullanırsak o kadar iyidir. Ancak bunu yaparken kullanılabilirliği düşürmekte mantıklı olamaz çünkü ziyaretçiyi memnun etmedikten sonra ne seo’nun ne de okunabilirliğin bir anlamı olur.

O yüzden çalışmalarımız hem okunabilir,hem az etiketli hem de kullanılabilir olmalı.

Label etiketini odaklanacağımız elemana id değeri vermeden kullanabilmek bi’kaç karakterlik’te olsa kodlama,okunabilirlik ve kullanışlılık için fayda sağlayacaktır.

jquery ile hazırladığım bu ufacık foksiyon; for değerinde belirtilen name değerine sahip eleman’a odaklanmayı sağlıyor.

Örnek uygulama | Fonksiyon Kodları

Uygun zaman bulduğumda saf Javascript halini de hazırlar paylaşırım umarım.