pillinetwork hesabınızla giriş yapın.

Yahoo! User Interface ile Resizable alan yapımı

Ö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.
1
2
3
4
5
 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script> 

<script src="http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>

Yukarıdaki kodlar ile sayfamıza Resize işlemi için gerekli olan javascript dosyalarını dahil ediyoruz.

1
2
3
4
5
6
 
#resizable {

        height: 150px;

        width: 277px;

        border: 4px solid black;

		background-color:#FFFF00;

            }

Burada resize id'si için özellikler atadık.
1
2
3
 
<div id="resizable">

Hey! Resize ME!

</div>

Burada HTML alanımızı oluşturduk.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var Dom = YAHOO.util.Dom,

        Event = YAHOO.util.Event;



        var resize = new YAHOO.util.Resize('resizable', {

            handles: 'all',

            knobHandles: true,

            proxy: true,

	    maxHeight:180,

	    maxWidth:377,

            draggable: false, // or true

            animate: true,

            animateDuration: .75,

            animateEasing: YAHOO.util.Easing.elasticIn

        });

Kodun çalışması için en gerekli yer burasıydı. Açıklarsak
var resize ile alanı işaretledik. "Maxheight" ve "maxWidth" ile alanın en fazla aç piksel resize olacağını ayarlıyoruz.(px cinsinden) draggable ile nesnenin sürükle bırak olmasını sağlayabilirsiniz. Görsellik açısından gerektiği yerde kullanılabilir. "Animate" true diyerek bir animasyon hazırlamak için ilk adımı atıyoruz. Animasyonun geçerli olacağı süreyi belirtiyoruz ve "animateeasing" ile YUI içinde olan bir animasyon efektini ekliyoruz. Resizable alan böylece oluşmuş oluyor. Sorunlarınızı yorum olarak yazarsanız yardımcı olmaya çalışacağım dilerim ilgi çeker.

/* Etiketler: , , , , */
/* s4l1h yazdı. 03 Haziran 2009 11:56. 17 yorum var */

Yorumlar

jQuery'i tartışmak anlamsız olur

aynı işi yapan jQuery örneği

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 03 Haziran 2009 19:59 */

1. Bahsettiğim jQuery UI ve diğer UI frameworklarine baktıımızda jQuery UI ın nekadar gelişmiş olduğunu tartışamak anlamsız olur.
2. Yine paylaştığın bir eklenti sayesinde olur. YUI! yada Extjs'de bu geçerli değil.

/* s4l1h | 03 Haziran 2009 22:25 */

Ve yine belirtmeliyim ki jQuery'nin yaptığı işe laf eden yok.

/* s4l1h | 03 Haziran 2009 22:26 */

bir sürü yui dosyası include etmişsiniz sizde! onlar eklenti değil de nedir?

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 04 Haziran 2009 00:38 */

Buradakiler zaten YUI'ın çekirdeğinde var ayrı bir eklentiye gerek yok. Aslında bütün işlemi bu halledebilri.Ama diğerleri drag&drop gibi işler için.. Ben tek bir dosyayla Drag&drop ve resize yapmak istiyorum diyorsan http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js bunu include etmek çözecektir. Artı jQuery benim işimi fazlasıyla görüyor ama jqueryui.com 'daki UI benim için çok iyi sayılmaz.

/* s4l1h | 04 Haziran 2009 12:19 */

hocam paylaşım güzel yalnız bende bi sorun çıktı. .verdiğin talimatlara uyarak yaptığım sayfayı firefox ile çalıştırdığımda hata konsolunda şöyle bir uyarı çıkıyor :

Hata: G is null
Kaynak dosya: http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js
Hat: 7

bu sebeple sayfa çalışmıyor.sayfayı asp.net ile yaptım. onun kodu:

asp.net kodu
/* sakirsensoy | 04 Haziran 2009 12:33 */

var Dom ... diye giden scripti elementten sonra yazacaksın. sen önce yazmışsın. o zaman o hatayı almazsın.

ben de denedim kodları ama hiç bir tarayıcıda resize etttiremedim. sadece draggable : true yaparak sürükle bırak özelliğinin çalıştığına tanık oldum. bir bug olsa gerek kodlarınızda.

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 04 Haziran 2009 12:54 */

Javascript'i sayfanın altına girin. Hem böylece daha fazla performans alacaksınız ve kod çalışacak.

/* s4l1h | 04 Haziran 2009 13:19 */
Js'yi sayfanın sonuna ekleyin
Js'yi sayfanın sonuna ekleyin

Kodun stili yukarıdaki gibi

/* s4l1h | 04 Haziran 2009 13:31 */

resize yapmadı firefox 3.1 ie7.0 ve chrome son sürümde. sadece drag drop oluyor. (değişkeni true yapınca)

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 04 Haziran 2009 15:22 */

çalıştığın kodu yollar mısın?

/* s4l1h | 04 Haziran 2009 17:53 */

senin makaleye yazdıklarını kopyaladım işte birebir. sırasın bozmadım yani

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 04 Haziran 2009 19:27 */

Dostum ne yalan söyleyeyim Dediğin browserlarda çalışıyor.

/* s4l1h | 04 Haziran 2009 20:10 */

Arkadaşlar dediğiniz gibi kodu alt tarafa aldım ama yinede çalışmadı. Bu sefer herhangi bir hata vermedi. Firefox 3.0.10, IE 8.0 ve Chrome 2.0 ile denedim. Olmadı.

/* sakirsensoy | 05 Haziran 2009 01:12 */

şöyle denermisin http://pastebin.com/m28b2b08c

/* s4l1h | 05 Haziran 2009 11:28 */

evet bu şekilde çalıştı. kodlara doctype eklemek gerekiyormuş. bu durumu makale içinde belirtmeniz gerekirdi. veya kodlara doctype eklemek gerekirdi.

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 05 Haziran 2009 14:18 */

Dostum eklemeden de çalışır durumdaydı opera chrome, mozilla, ie anlayamadm

/* s4l1h | 05 Haziran 2009 14:40 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu Yazıyı Tutanlar

ceyhun aksan
queennothing
s4l1h
byRuGaL
Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork