Rabu, 07 Januari 2009

Mengenal ajaX.........................???

Menu di defenisikan d class Ext.menu.Menu fungsinya dapat di gunakan sebagai container dari menu menu yang kita defenisikan baik di defenisikan secara langsung atau di defenisikan dari referensi variable lain.

1. Mendefenisikan Menu dengan secara langsung
• Buat sebuah objek menu yang akan menampung menu yang kita buat.

Var menu = new Ext.menu.Menu({

)}
• Setelah itu kita dapat mengisikan properties dari objek menu yang kita buat.
Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
)}

Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
Items : [ // isi dari menu yang di buat
{
text : ‘New’

},
{
text : ‘Open’

},
{
text : ‘Sub Menu’, // mengisikan sub menu secara langsung
menu : {
items :[
{
text: ‘Menu2’
},
{
text: ‘Menu3’
}

]}
}

]
});


2. Mengisikan menu dari variable yang sudah kita defenisikan terlebih dahulu
Sama seperti contoh di atas tapi kita harus mendefenisikan dulu variabelnya.

var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg(’Date Selected’, ‘You chose {0}.’, date.format(’M j, Y’));
}
});

Lalu kita tambahkan ke var menu

Var menu = new Ext.menu.Menu({
Id : ‘Menu Utama’, // id dari menu yang kita buat
Items : [ // isi dari menu yang di buat
{
text : ‘New’

},
{
text : ‘Open’

},
{
text : ‘Sub Menu’, // mengisikan sub menu secara langsung
menu : {
items :[
{
text: ‘Menu2’
},
{
text: ‘Menu3’
}

]}
},
{
text: ‘Kalender’,
menu : dateMenu
}

]
});

3. sampai pada langkah ke dua kita sudah mendefenisikan sebuah menu untuk selanjutnya kita harus meletakkan menu di dalam toolbar dengan merender nya ke salah satu div yang sudah kita sediakan di halaman html

var tb = new Ext.Toolbar(); // membuat toolbar
tb.render(’toolbar’); // me render toolbar ke div yang namanya toolbar

tb.add({
text:’Button w/ Menu’,
iconCls: ‘bmenu’, // <– icon
menu: menu // memanggil var menu
}
Read More
Posting data dengan mootools
April 8th, 2008by admin

1. Pengenalan mootools

Mootools merupakan sebuah frameworks javascript yang di gunakan untuk mempermudah seorang web developer untuk mengembangkan berbagai macam aplikasi web yang membutuhkan interaksi dengan user. Antara lain mootools sering di gunakan untuk mengirimkan data lewat ajax. Dalam pembahasan kali ini kita akan membahas tentang ajax nya saja :D

2. Struktur file yang di gunakan

Pada tutorial kali ini kita akan membutuhkan file file sebagai berikut :

· Form.html -> di gunakan sebagai tampilan dari form yang akan dip roses dengan ajax.

· Form.js -> menjadi controller / yang memproses perintah untuk mengirim data lewat ajax.

· Form.css -> mengatur tampilan dari halaman form yang di buat penting banget coz element yang di akses dengan ajax menggunakan id dari css yang di buat.

· Mootools.js -> frameworks mootools yang dapat di download di sini http://mootools.net/download

3. File Form.html

File ini berisi tampilan ke user yang merupakan tampilan web, berisi sebuah form dengan dua buah field yang nantinya akan di isi dengan data masukan dari user, dalam hal ini data yang di masukkan adalah data email dan password.

Beri nama file ini dengan nama index.html









Form Login















Sign in



Do you have an account? Sign in!























4. File form.css

File css ini di gunakan untuk mengatur tampilan dari halaman html.

#form_box {

float: left;

width: 290px;

background: #f8f8f8;

border: 1px solid #d6d6d6;

border-left-color: #e4e4e4;

border-top-color: #e4e4e4;

font-size: 11px;

font-weight: bold;

padding: 0.5em;

margin-top: 10px;

margin-bottom: 2px;

}

#form_box div {

height: 25px;

padding: 0.2em 0.5em;

}

#form_box div.hr {

border-bottom: 2px solid #e2e2e1;

height: 0px;

margin-top: 0pt;

margin-bottom: 7px;

}

#form_box p {

float: left;

margin: 4px 0pt;

width: 120px;

}

#log {

float: left;

padding: 0.5em;

margin-left: 10px;

width: 290px;

border: 1px solid #d6d6d6;

border-left-color: #e4e4e4;

border-top-color: #e4e4e4;

margin-top: 10px;

}

.log_res {

overflow: auto;

}

.log_res.ajax-loading {

padding: 20px 0;

background: url(img/spinner.gif) no-repeat center;

}

5. File form.js

File ini di gunakan untuk mengatur event yang terjadi di halaman index.html

window.addEvent(’domready’, function() {

$(’myForm’).addEvent(’submit’, function(e) { //mengambil elemen dom ber id myform dan memberikan event ke element tersebut

new Event(e).stop();

var log = $(’log_res’).empty().addClass(’ajax-loading’); //jika di submit tambahkan class css ajax-loading ke log_res

this.send({

update: log,//jika sudah selesai hilangkan class ajax-loading dari log_res

onComplete: function() {

log.removeClass(’ajax-loading’);

}

});

});

});

6 File ceklogin.php

File ini yang nantinya di gunakan untuk mengecek masukan yang di berikan dan pada file yang di berikan di bawah ini Cuma mencetak data yang di post dari index.html.


print “
”.print_r($_POST, true).”
”;

?>

link download script na :D

Script Login

Script + dokumentasi na
Read More
slide effect’s with mootools
February 12th, 2008by admin

“MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.”

actually i fallin love with mootools in first sight :)

fist time i visit the official web http://mootools.net/ .. i think this is great i love it ..

so this is my firs application … its rather simple and easy …
before we start the appllication we need to download the frameworks from http://mootools.net/download

we can write a simpe slide menu with three files

* html files
* javascript files
* css files

this is the html files


/xhtml1-transitional.dtd">







Untitled Document











menu





menu1


menu2


menu3












this is the javascript files

window.addEvent('domready',function(){



var mySlide = new Fx.Slide(’slidemenu’,{transition:Fx.Transitions.Sine.easeIn, duration:100});

mySlide.hide();

$ES(’.menu’).addEvent(’click’, function(e){

e = new Event(e);

mySlide.toggle();

e.stop();

});





});

this is the css file

/* CSS Document by ubie v1.0 */

.menu{

width:200px;

height:20px;

background:#336699;

font-family:tahoma;

font-size:12;

}

.container{

width:200px;

}

.slidemenu{

background:#3366CC;

font-family:tahoma;

font-size:10px;}

Tidak ada komentar:

Poskan Komentar