bildirgec.org

yahoo user interface hakkında tüm yazılar

Yahoo User Interface ile Tab

admin | 28 July 2009 02:48

Selam arkadaşlar,
Öyle gözüküyor ki uzun bir süredir yazmıyorum. YUI serisine devam edeyim dedim. Bu sefer başka frameworkle karşılaştırmayacağım tamam!
Çok uzatmadan konuya girelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!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">

<head>

<!-- Skini include ediyoruz. ;) -->

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css">



<!-- YUI a ait tablerin görünür olabilmesi için gerekli js dosyaları -->

<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/element/element-min.js"></script>

<!-- TAB için dosya-->

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

<!--   yui-skin-sam  -->

<script type="text/javascript">

var tabim = new YAHOO.widget.TabView("tabornegi", { activeIndex: 1 });

// şey activeIndex varya 0 koyarsan ilk tab gözükür  1 koyarsan 2.

   

</script>

</head>

<body class="yui-skin-sam">

<div class="yui-navset" id="tabornegi">

    <ul class="yui-nav">

        <li class="selected"><a href="#yerli"><em>Yerli Diziler</em></a></li>

        <li><a href="#yabanci"><em>Yabancı Diziler</em></a></li>

        <li><a href="#tumu"><em>Karışık</em></a></li>

    </ul>            

    <div class="yui-content">

        <div><p><li>Selena</li><li>Sihirli Annem</li><li>Kayıp Prenses</li></p></div>

        <div><p><li>Lost</li><li>Prison Break</li><li>Ugly Betty</li><li>Super Natural</li></p></div>

        <div><p><li>Selena</li><li>Lost</li><li>Prison Break</li><li>Ugly Betty</li><li>Super Natural</li></p></div>

    </div>

</div>



</body>

Yahoo! User Interface ile Drag & Drop

s4l1h | 28 May 2009 15:04

Yahoo Developer Network
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.

1
2
3
4
5
 
<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.

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

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

1
2
3
4
5
6
7
 
<style type="text/css">

.pref {

width:90px;

height:75px;

background-color:FFFF66;

}

</style>

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

1
 
<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