s4l1h, Yazar: Pilli ArsivPilli Arsiv

s4l1h

11 yıl önce üye olmuş, 6 yazı yazmış. 0 yorum yazmış.

bildirileri

Yahoo! User Interface ile Resizable alan yapımı

s4l1h | 03 June 2009 11:56

Öncelikle Merhaba,
EDIT: KODUN BAŞINA

1
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">

Ekleyin. Kaynak kodlar http://pastebin.com/m28b2b08c
YUI Serisinin 2. dersinde nasıl resizable alan yapacağımızı göreceğiz. Neden jQuery yada Mootools kullanmadığımızı sorarsanız bunun nedeni jQuery ve Mootools’un UI framework’u olmaması. Her ne kadar jQuery UI olsa bile bunun ne kadar gelişmiş olduğu tartışılır. Konuya girelim.

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script> 
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script> 
<script src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>

Hosting Önerisi

s4l1h | 29 May 2009 10:17

Merhaba arkadaşlar,
Ben yüksek trafik sağlayacak ve hızlı bir hosting arıyorum. 100 $’ı geçmeyecek bir fiyatta hosting arıyorum. Önerileriniz var mı acaba? Çok teşekkürler.

Yahoo! User Interface ile Drag & Drop

s4l1h | 28 May 2009 15:04

Yahoo Developer Network

Merhabalar,
Spry Serisini bitirdikten sonra karşınızda bir kullanıcı arayüzü librarysi olan Yahoo! User Interface ile devam ediyoruz. YUI bir Yahoo Developer Network ürünü. Ayrıca başarılı olduğunu söylemek mümkün. YUI’ı LinkedIn gibi sitelerde kullanıyor. Sözü uzatmadan YUI ile Drag&Drop nesneler yapmaya başlayalım.

<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<script type="text/javascript" src="http://arsiv.pilli.com/http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js" ></script>
<script type="text/javascript">
var dragg = new YAHOO.util.DD("drag");
</script>

Şimdi koda baktığımızda ilk iki satırda YUI’ı sayfaya dahil ettik. Son satırda var dragg ile draggable olacak yerleri işaretliyoruz.

new YAHOO.util.DD("drag");

Drag yazılı yere herhangi bir ID yada element girebilirsiniz.

<style type="text/css">
.pref {
width:90px;
height:75px;
background-color:FFFF66;
}
</style>

ile de 90*75 Sarı renkte bir kutu oluşturduk.

<div id="drag" class="pref">HEY! DRAG ME!</div>

ile de “Drag” id’li bir div oluşturduk. Herşey bukadar. Bundan sonrası sizin yaratıcılığınıza kalmış.
Dış bağlantılar:
YUI anasayfası
YUI blog

SPRY ile Akordiyon Paneller Oluşturma

s4l1h | 06 May 2009 17:52

Merhabalar,
Yeni başlayanlar için SPRY serileri devam ediyor.Buradave burada spry yazıları yazmıştık. Şimdiki serimizde SPRY ile Accordion paneller oluşturacağız. Yani akordiyon şeklinde açılan paneller. Kodumuza gelelim

var Accordion1 = new Spry.Widget.Accordion("akordiyon");

Burada akordiyon id’li div imizi akordiyon olarak tanımlıyoruz. HTML tarafında ise

Spry ile İpuçları

s4l1h | 30 March 2009 15:41

Spry Framework

Merhabalar,

Bir önceki yazımda Spry’ı kulanma nedenleri ile birlikte efektleri işlemiştik. Şimdi ise Spry ile ipucu (tip) oluşturmayı deniyeceğiz. Önce Spry’ı bu adrestenindirelim .
Sonra sayfamıza şu dosyaları dahil(include) edelim.

1
2

<script src="http://arsiv.pilli.com/http://arsiv.pilli.com/js/SpryTooltip.js" type="text/javascript"></script>
<link href="css/oylesinebircssadresi.css" rel="stylesheet" type="text/css" />

Şimdi tooltip için Javascript kodumuzu yazıyoruz.

var sprytooltip1 = new Spry.Widget.Tooltip("cssip", "#css", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip2 = new Spry.Widget.Tooltip("htmlip", "#html", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip3 = new Spry.Widget.Tooltip("phpip", "#php", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip4 = new Spry.Widget.Tooltip("aspip", "#asp", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });

Şimdi kodu inceliyelim. varsprytooltip1 ile ipucunu tanımlıyoruz. şimdi “cssip” olan tarafın nedemek olduğunu anlayalım. Mouse cssip idsine sahip olan yere geldinde tooltipi gösterecek. “css” ise açıklanacak olan ipucunun içeriği. Şimdi setuplara ({ } arasına) bakalım.

Spry ile Efektler

s4l1h | 27 March 2009 17:23

Merhabalar,

Spry framework

Piyasada bir çok Javascript framework’u bulmak mümkün. Bunlardan en popülerleri jQuery, Prototype ve Mootools olarak sıralanabilir. Ama kullanacağınız ufak efekt işlemleri, form kontrolleri için bu kütüphaneleri eklemeniz gereksiz olabilir ve performans kaybı olur. Bu nedenle Spry’ı kullanmak kârlı olacak gibi duruyor. Spry Adobe Labs tarafından geliştiriliyor. Spry’ı bu adresten indirebilirsiniz.
Adobe’ye göre Spry’ı geliştirme nedenleri;