Membuat Windows-like antarmuka dengan jQuery UI

Indonesian (Bahasa Indonesia) translation by Yusuf Samin (you can also view the original English article)

Apakah Anda pernah ingin membuat user interface interaktif untuk aplikasi Anda, tapi tidak tahu bagaimana? Dalam tutorial ini, kita akan membuat Windows-like antarmuka dengan cepat dan mudah, dengan mendapatkan kotor dengan jQuery UI, antarmuka pengguna perpustakaan yang dibangun di atas jQuery.

Ap itu sebenarnya jQuery UI?

jQuery UI menyediakan abstraksi untuk low level interaksi dan animasi, efek lanjutan dan tingkat tinggi, themeable widget.

jQuery UI selalu menjadi alat yang hebat dalam setiap pengembang front-end. Ini memiliki banyak widget yang berbeda dan efek yang indah dibuat untuk bekerja dengan sebagian besar browser. Ingin cara cepat untuk membuat sebuah antarmuka tab? jQuery UI telah mendapat 'em! Ingin membuat sebuah kotak modal dialog? Ia memiliki mereka terlalu!

Dalam tutorial ini, kita akan belajar bagaimana untuk memanfaatkan jQuery UI untuk menciptakan sebuah antarmuka pengguna yang sangat fungsional tanpa menggunakan apa pun. Pada akhirnya, Anda harus akrab dengan jQuery UI, beberapa komponennya, dan pemahaman dasar tentang jQuery UI kustomisasi. Pada akhirnya, kami akan membangun antarmuka pengguna yang mirip dengan windows, dengan kotak dialog yang draggable, resizable, minimizable dan maximizable.

Catatan: Jika Anda benar-benar ingin untuk menyesuaikan setiap sudut-dan-celah jQuery UI tema, Anda harus memeriksa tutorial ini berjudul "Massive panduan untuk tema kustom jQuery UI widget". Ini adalah tutorial premium hanya, tapi saya jamin sangat bagus untuk dibeli.!

Tujuan kami: Untuk membuat dialog seperti windows draggable, resizable, minimizable dan maximizable kotak bahwa kita dapat menerapkan untuk berbagai macam aplikasi

windows-like interface example from Aralista!

Windows-like antarmuka contoh dari Aralista!

Gambar milik http://aralista.com

Langkah 1: Menyiapkan

Untuk memulai, men-download jQuery UI Perpustakaan dari situs mereka, http://jqueryui.com. Setelah Anda mengunjungi situs, Anda akan melihat beberapa pilihan untuk "menyesuaikan" download jQuery UI Anda.

JQuery UI Halaman Download

Untuk tujuan dari tutorial kami, pastikan bahwa semua komponen yang dipilih. Untuk tema, Pilih tema Flick. Periksa lagi bahwa Anda juga memilih 1.8.16 versi, sebagai halaman download jQuery UI menyediakan versi warisan untuk jQuery rilis yang sebelumnya.

JQuery UI download harus datang dengan 1.6.2 versi jQuery perpustakaan juga. Jika Anda menggunakan versi yang lebih terkini jQuery, Anda harus menggunakan itu sebagai gantinya. Ini adalah hanya versi minimum jQuery yang dibutuhkan oleh jQuery UI.

Ambil download ke folder publik proyek Anda. Download ini menunjukkan struktur untuk resource situs Anda:

Suggested file-structure for your site resources

Struktur file disarankan untuk resource situs Anda

folder js untuk file JavaScript (jQuery UI dan jQuery)
css folder untuk file CSS (jQuery UI tema CSS)

Merasa bebas untuk mengubah hal ini sesuai dengan kebutuhan Anda, meskipun dalam pengalaman saya, ini adalah cara yang bagus untuk mengatur resource situs Anda.

Setelah mengekstrak file Anda, membuat file index.html yang akan berisi HTML halaman kami. Isi dari HTML file harus sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
               <meta charset="utf-8">
		<title>Creating a windows-like interface with jQuery UI</title>
		<!-- Load the jQuery UI CSS -->
		<link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" />
		
		<!-- Load jQuery first before jQuery UI! -->
		<script src="js/jquery-1.6.2.min.js"></script>
		<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
	</head>
	<body>
	</body>
</html>

Langkah 2: Buat HTML untuk jendela `Dialog` kami

Sekarang, mari kita mulai dengan membuat HTML untuk jendela Dialog kami. Menurut Dialog dokumentasi halaman situs jQuery UI, kotak Dialog HTML hanyalah<div>. HTML apapun di dalam <div> menjadi isi dari kotak dialog. Mengetahui bahwa, membuat jendela kotak Dialog sederhana dan membukanya menggunakan jQuery UI.</div>

Salin kode berikut ke <body> file HTML:

<div id="dialog_window_1" class="dialog_window" title="This is our first dialog window">
	<p>Hello World!</p>
</div>

Kemudian, memulai kotak Dialog dengan mengeksekusi JavaScript ini. Salin kode berikut di dalam<head>file HTML:

<script>
	$(document).ready(function() {
		$('#dialog_window_1').dialog();
	});
</script>

Setelah Anda me-refresh halaman, Anda harus melihat sesuatu seperti ini:

Halo dunia!

Inisialisasi kotak Dialog dapat dilakukan dengan hanya memanggil fungsi $(element_id).dialog()! Dan seperti yang Anda lihat, kami isi <div> akan dikonversi ke konten menjadi kotak dialog.</div>

Sekarang, membuat form sederhana untuk membuat kotak-kotak Dialog yang baru di dalam kotak Dialog. Menggantikan Hello world! kode dalam kotak Dialog kami awal dengan berikut:

<h3>Create a new <code>Dialog</code> Window</h3>
<table class="dialog_form">
	<tr>
		<th>window Title</th>
	</tr>
	<tr>
		<td><input type="text" id="new_window_title" /></td>
	</tr>
	<tr>
		<th>
			window Content
		</th>
	</tr>
	<tr>
		<td>
			<textarea id="new_window_content"></textarea>
		</td>
	</tr>
	<tr>
		<th>
			window Buttons
		</th>
	</tr>
	<tr>
		<td id="buttonlist">
			<input type="checkbox" id="alertbutton" /><label for="alertbutton">ALERT</label>
			<input type="checkbox" id="closebutton" /><label for="closebutton">CLOSE</label>
			<input type="checkbox" id="clonebutton" /><label for="clonebutton">CLONE</label>
		</td>
	</tr>
</table>

Ketika Anda memperbarui halaman, seharusnya terlihat seperti ini:

Kelihatannya jelek sekarang, tapi jangan khawatir, kami akan menambahkan beberapa penyesuaian untuk jendela Dialog untuk membuatnya terlihat lebih baik

Langkah 3: Menyesuaikan Windows `Dialog` kita melalui `Dialog` opsi dan CSS

Kotak Dialog kami saat ini tidak terlihat baik, tapi kami akan dapat menyesuaikan dengan menyediakan beberapa pilihan inisialisasi kode inisialisasi Dialog kami, dan tentu saja, beberapa CSS.

Mari kita ganti kode inisialisasi kami dengan berikut:

$('#dialog_window_1').dialog({
	width: 'auto',
	height: 'auto'
});

Mari kita juga menambahkan beberapa CSS di <head> HTML kami:

<style>
.dialog_form th {
	text-align: left;
}

.dialog_form textarea, .dialog_form input[type=text] {
	width: 320px;
}
</style>

Jauh lebih baik!

Mari kita memecah beberapa pilihan yang kita digunakan pada kode inisialisasi kami:

width - pilihan ini memungkinkan Anda mengatur lebar tertentu untuk kotak Dialog. Anda juga dapat mengatur untuk 'auto' untuk membiarkan jQuery UI mengatur lebar secara dinamis
height - tidak hampir sama dengan opsi width, tetapi melakukannya untuk height kotak Dialog bukan lebar

Ada lebih banyak pilihan untuk kotak Dialog, tetapi sebagian besar dari mereka menangani perilaku kotak Dialog. Kita akan pergi ke beberapa di langkah berikutnya dari tutorial.

Sekarang bahwa kita memiliki sebuah kotak Dialog yang tampak bagus dengan form di dalamnya, mari kita tambahkan beberapa Buttons ke kotak Dialog kami untuk membuatnya melakukan sesuatu!

Langkah 4: Menambahkan sebuah Button untuk membuka jendela `Dialog` kami

Salah satu hal besar mengenai jQuery UI adalah modularitas yang. Misalnya, kotak Dialog juga menggunakan komponen UI jQuery lain, seperti Draggable, Resizable, dan yang paling penting, komponen Button.

Button contoh dari dokumentasi jQuery UI

Button komponen yang memungkinkan kita untuk membuat tombol dengan fungsi yang disesuaikan setelah mengklik. Dan pada saat yang sama, itu sesuai dengan tema kita diinstal dengan jQuery UI, sehingga mengubah tema juga akan mengubah tampilan tombol, sehingga menjaga desain yang seragam seluruh situs.

Sebagai permulaan, buat Button untuk membuka dan menutup kotak Dialog kami. Tambahkan <body> HTML:

<button id="create_button">Create a new window</button>

Dan menginisialisasi dengan menambahkan ini ke fungsi $(document).ready():

$('#create_button').button();

tombo keren bro

Karena kita melakukan hal-hal dengan tombol, mari kita mengubah kotak centang kami untuk tombol juga sehingga mereka akan terlihat lebih baik. jQuery UI Button komponen juga memungkinkan Anda menciptakan serangkaian kotak centang atau tombol radio ke Buttonset. Untuk melakukannya, hanya Salin kode kode berikut di blok JavaScript:

$('#buttonlist').buttonset();

Sekarang, refresh halaman untuk melihat kotak centang cukup-keren baru:

Sekarang bahwa kotak Dialog dan tombol dirender dengan baik, kita dapat mengubah perilaku mereka sehingga Button membuka dan menutup Dialog. Untuk melakukannya, memperbarui blok JavaScript sehingga ini akan terlihat seperti ini:

$(document).ready(function() {
	//initialize the button and add a click function to our button so that it"ll open the window
	$("#create_button").button().click(function() {
		var create_dialog = $("#dialog_window_1");
		var create_button = $(this);
		
		//if the window is already open, then close it and replace the label of the button
		if( create_dialog.dialog("isOpen") ) {
			create_button.button("option", "label", "Create a new window");
			create_dialog.dialog("close");
		} else {
			//otherwise, open the window and replace the label again
			create_button.button("option", "label", "Close window");
			create_dialog.dialog("open");
		}
	});
	
	//open our dialog window, but set autoOpen to false so it doesn"t automatically open when initialized
	$("#dialog_window_1").dialog({
		width: "auto",
		height: "auto",
		autoOpen : false
	});
	
	//initialize our buttonset so our checkboxes are changed
	$("#buttonlist").buttonset();
});

Mari kita pergi melalui kode baris demi baris:

Kami telah menambahkan fungsi click Button kami yang membuka kotak Dialog setiap kali kita klik di atasnya.
Selain itu, kami menggunakan $(dialog_id).dialog('isOpen') metode, yang mengembalikan true jika Dialog kami sudah terbuka, dan false jika tidak.
Jika Dialog ditutup, kami membuka jendela Dialog dengan memanggil metode $(dialog_id).dialog('open'), dan mengubah label Button "Close window" menggunakan metode $(button_id).button('option').
Jika sudah terbuka, kami melakukan sebaliknya menggunakan metode option yang sama pada Button dan metode $(dialog_id).dialog('close') untuk menutup kotak Dialog.
Kami juga telah mengambil keuntungan dari option Dialog yang lain, yang disebut autoOpen. Bila diatur ke true, hal ini memungkinkan jendela Dialog untuk membuka secara otomatis ketika diinisialisasi. Jika tidak, kemudian jendela Dialog hanya boleh dibuka dengan memanggil metode $(dialog_id).dialog('open'), yang merupakan apa tombol lakukan.

Bro tombol dan kotak centang yang fungsional

Langkah 5: Menambahkan fungsionalitas ke jendela `Dialog` kami

Sekarang bahwa jendela Dialog sudah bangun dan berjalan, mari kita menambahkan fungsionalitas untuk itu untuk membuat jendela Dialog yang baru. Pertama, menambahkan beberapa tombol ke Dialog kami. Syukurlah, jQuery UI memiliki fungsi untuk menambahkan tombol ke setiap kotak Dialog dan menyesuaikan apa yang mereka lakukan ketika diklik. Untuk melakukannya, memodifikasi kode inisialisasi dengan menambahkan parameter buttons:

$('#dialog_window_1').dialog({
	width: 'auto',
	height: 'auto',
	autoOpen : false,
	buttons: [
		{
			text: 'Create',
			click: function() {
				alert('Yay, clicked the button!');
			}
		}
	]
});

Seperti yang Anda lihat dari kode contoh, kami menambahkan tombol "Buat" dengan hanya menambahkan tombol pilihan untuk kode inisialisasi. Tombol pilihan adalah array JSON objek dalam format berikut:

{
	text: 'Name of your button',
	click: function () {
		//Add stuff here to do when the button is clicked
	}
}

Untuk menambahkan tombol, Anda hanya dapat menambahkan lebih JSON objek dalam format yang sama ke array buttons. Ketika Anda memperbarui halaman, seharusnya terlihat seperti:

YAY, mengklik tombol!

Sekarang kami akan menambahkan beberapa fungsi button kami. Menghapus alert ('Yay, clicked the button!'); baris dan menggantinya dengan berikut:

//get the total number of existing dialog windows plus one (1)
var div_count = $('.dialog_window').length + 1;

//generate a unique id based on the total number
var div_id = 'dialog_window_' + div_count;

//get the title of the new window from our form, as well as the content
var div_title = $('#new_window_title').val();
var div_content = $('#new_window_content').val();

//generate a buttons array based on which ones of our checkboxes are checked
var buttons = new Array();
if( $('#alertbutton').is(':checked') ) {
	buttons.push({
		text: 'ALERT',
		click: function() {
			alert('ALERTING from Dialog Widnow: ' + div_title);
		}
	});
}

if( $('#closebutton').is(':checked') ) {
	buttons.push({
		text: 'CLOSE',
		click: function() {
			$('#' + div_id).dialog('close');
		}
	});
}

//append the dialog window HTML to the body
$('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');

//initialize our new dialog
var dialog = $('#' + div_id).dialog({
	width: 'auto',
	height: 'auto',
	title : div_title,
	autoOpen : true,
	buttons: buttons
});

Berikut adalah langkah-langkah kode kami hanya menambahkan di atas:

Pertama, mendapatkan jumlah jendela Dialog pada situs.
Dari ini, menghasilkan id unik baru yang akan digunakan untuk jendela Dialog yang baru.
Mendapatkan nilai window Content dan window Title dari bentuk "Create a new Dialog window" form.
Periksa apakah ALERT dan CLOSE kotak centang dicentang. Jika mereka, membuat sebuah objek JSON, mengikuti format button dari atas, dan mendorongnya ke dalam array buttons.
Menghasilkan dan menambahkan HTML jendela Dialog di dalam halaman yang<body>Tag
Terakhir, menginisialisasi jendela Dialog baru menggunakan kode inisialisasi seperti yang digunakan pada jendela Dialog yang asli.

Bermain-main dengan itu dan mencoba kombinasi yang berbeda untuk tombol. Berikut adalah screenshot dengan semua kemungkinan kombinasi:

Lorem ipsum dolor sit amet

Sekarang bahwa kita akan mampu membuat mutiple windows, mari kita tambahkan beberapa meminimalkan-memaksimalkan fungsi!

Langkah 6: Membuat jendela `Dialog` "Minimizable" dan "Maximizable"

Sayangnya, jQuery UI tidak memiliki built-in minimize dan maximize metode, tetapi kita dapat dengan mudah menambahkan dengan meng-override beberapa hal pada proses inisialisasi jQuery UI Dialog prototype. Pada dasarnya, kita akan menambahkan beberapa kode inisialisasi pasca yang akan secara otomatis membuat "minimized state", menambahkan minimize icon untuk jendela Dialog, serta menambahkan fungsi yang "maximize" jendela diminimalkan ketika minimized state diklik.

Mari kita mulai dengan menambahkan CSS untuk style button dan minimized state:

#dialog_window_minimized_container {
	position: fixed;
	bottom: 0px;
	left: 0px;
}

.dialog_window_minimized {
	float: left;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	margin-right: 2px;
	display: none;
}

.dialog_window_minimized .ui-icon {
	display: inline-block !important;
	position: relative;
	top: 3px;
	cursor: pointer;
}

.ui-dialog .ui-dialog-titlebar-minimize {
	height: 18px;
	width: 19px;
	padding: 1px;
	position: absolute;
	right: 23px;
	top: 9px;
}

.ui-dialog .ui-dialog-titlebar-minimize .ui-icon {
	display: block;
	margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-minimize:hover, .ui-dialog .ui-dialog-titlebar-minimize:focus {
	padding: 0;
}

Kita juga perlu menambahkan sebuah "minimized state" wadah, dimana kami akan menambahkan semua jendela diminimalkan. tambahkanini dalam<body>Tag:

<div id="dialog_window_minimized_container"></div>

Sekarang, tambahkan codeblock JavaScript ini setelah tempat mana jQuery UI Perpustakaan dimuat. Hal ini penting karena tidak akan bekerja jika itu sebelum Perpustakaan di-load.

<script>
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
	//Run the original initialization code
	_init.apply(this, arguments);
	
	//set some variables for use later
	var dialog_element = this;
	var dialog_id = this.uiDialogTitlebar.next().attr('id');
	
	//append our minimize icon
	this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + 
	'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
	'<span class="ui-icon ui-icon-minusthick"></span></a>');
	
	//append our minimized state
	$('#dialog_window_minimized_container').append(
		'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' + 
		dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + 
		'<span class="ui-icon ui-icon-newwin"></div>');
	
	//create a hover event for the minimize button so that it looks good
	$('#' + dialog_id + '-minbutton').hover(function() {
		$(this).addClass('ui-state-hover');
	}, function() {
		$(this).removeClass('ui-state-hover');
	}).click(function() {
		//add a click event as well to do our "minimalization" of the window
		dialog_element.close();
		$('#' + dialog_id + '_minimized').show();
	});
	
	//create another click event that maximizes our minimized window
	$('#' + dialog_id + '_minimized').click(function() {
		$(this).hide();
		dialog_element.open();
	});
};
</script>

Berikut adalah kode ini yang dilakukan:

Biarkan original jQuery UI Dialog kode inisialisasi berjalan melalui _init.apply(this, arguments);
Append minimize icon ke kotak Dialog Title Bar
Append minimize state HTML dalam #dialog_window_minimized_container<div>
Menambahkan event hover minimize icon sehingga itu akan mendapatkan class ui-state-hover ketika mouse adalah hover di atas itu, yang akan menambah efek "mengubah warna latar belakang" yang kita lihat.
Membuat event klik untuk itu yang menutup jendela Dialog dan menunjukkan minimized state
Akhirnya, membuat event klik lainnya untuk minimized state yang menyembunyikan dirinya sendiri dan membuka kembali jendela Dialog

Dan sekarang, kami windows-seperti antarmuka lengkap!

Windows-like antarmuka, hore!

Kesimpulan

Dalam artikel ini, kami telah menunjukkan betapa mudahnya untuk membuat indah dan sangat fungsional antarmuka pengguna menggunakan apa-apa tapi jQuery dan jQuery UI. Sekarang, Anda harus sudah tahu bagaimana:

Men-download dan men-setup jQuery UI perpustakaan untuk proyek Anda
Menggunakan jQuery UI komponen Dialog, Button, dan Buttonset.
Membuat kotak-kotak Dialog yang baik statis dan dinamis menggunakan informasi dari sumber
Secara dinamis membuat tombol Dialog Buttons yang berbeda dengan setiap kotak Dialog yang baru.
Menambahkan fungsionalitas kustom untuk jQuery UI Dialog misalnya minimize dan maximize fungsionalitas.
Menyesuaikan proses inisialisasi jQuery UI

Ini perlu mengambil catatan bahwa ada banyak komponen lain yang Anda dapat memanfaatkan melalui jQuery UI. Sudah pasti cara yang bagus untuk membangun antarmuka pengguna yang luar biasa dengan cepat dan mudah. Mudah-mudahan artikel ini telah terbukti Anda jQuery UI adalah tool penting dalam setiap developer toolkit.

Apakah Anda menggunakan jQuery UI di masa lalu atau berencana untuk menggunakannya untuk proyek nanti? Marilah kita tahu di komentar di bawah ini dan terima kasih banyak sudah membaca!

Membuat Windows-like antarmuka dengan jQuery UI

Ap itu sebenarnya jQuery UI?

Langkah 1: Menyiapkan

Langkah 2: Buat HTML untuk jendela Dialog kami

Langkah 3: Menyesuaikan Windows Dialog kita melalui Dialog opsi dan CSS

Langkah 4: Menambahkan sebuah Button untuk membuka jendela Dialog kami

Langkah 5: Menambahkan fungsionalitas ke jendela Dialog kami

Langkah 6: Membuat jendela Dialog "Minimizable" dan "Maximizable"