Membuat Mask/Modal disertai image Loading

Terbiasa menggunakan Framework Extjs jadi terasa bingungnya saat diharuskan menggunakan pure code sendiri karena memerlukan customize yang besar. lalu pilihan jatuh ke Jquery. sederhana sekali saat itu hanya ingin membuat masking dan loading saat load data menggunakan extjs. tapi ternyata begitu repotnya.

Nyari plugin ga ada yang suport dan biasa. akhirnya bisa dibuat setelah browsing2 dan minta bantuan. berikut codenya siapa tau ada yang berkepentingan sama.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Sistem Manajement Surat -  Eksekutif</title>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<style type="text/css">
	#fx_modal{
		background: rgba(62, 128, 163, 0.6);
		float:right;
		left:300px;
		position:absolute;
		z-index:900;
		display:none;
	}
	#fx_loading{
		width:140px;
		text-align:center;
		z-index:901;
		background:#FFF;
		padding:5px;
		border-radius:5px;
		border:2px #CCCCCC solid;
	}
	</style>
	<script type="text/javascript">
	function modal_hide(){
			$("#fx_modal").hide();
	}
  	function modal_show(target_modal){
		//alert(target_modal);
		//hitung panjang,tinggi,kanan dan kiri target, dipakai modal
			var panjang = $(target_modal).width(); 			var tinggi 	= $(target_modal).height();
			var kiri	= $(target_modal).offset().left;	var atas	=$(target_modal).offset().top;
		//hitung untuk letak loading	150=panjang dan tinggi loading.gif 75/2=25
			var kiri_l	= kiri-75+panjang/2;					var	atas_l	=atas-75+tinggi/2;
			$("#fx_modal").show();
			$("#fx_modal").offset({top:atas, left:kiri});
			$("#fx_modal").height(tinggi); $("#fx_modal").width(panjang);
			$("#fx_loading").offset({top:atas_l, left:kiri_l});
	}

	$(document).ready(function(){
	  $("#div_kiri").click(function(){
				modal_show("#div_kanan");
	  });
	  $("#div_kanan").click(function(){
				modal_show("#div_kiri");
	  });
	});
	</script>
</head>
<body>
<div id="fx_modal">
	<div id="fx_loading">
	<img src="loading.gif" /><br />
	Tunggu Sebentar ...
	</div>
</div>

	<a href="javascript:modal_hide()">hide</a>	<a href="javascript:modal_show('#div_kiri')">show</a>
	<div style="width:300px; border-radius:25px; position:absolute; top:100px; height:300px; background:red; float:left;" id="div_kiri">
	Klik disisni
	</div>

	<div style="width:400px; height:600px; background:blue; float:right" id="div_kanan">
	Klik disini Juga. 😀
	</div>
</body>
</html>

SIlahkan bereksperimen.. semoga berhasil… membuat mask/modal dan loading yang diinginkan dengan jquery.

Iklan

Invinite Data using Scroll

Untuk catatan saya sendiri.. ini pemakaian dan ide dasar untuk invinite grid/data mengunakan jquery. mantap abis..

<script>
  var x=20;
  function simulasi_ajax(t) {
    if(t.scrollTop>=t.scrollHeight-100) {
      var s = "";
      for(i=x-19;i<=x;i++) s+=i+"<br>";
      x+=20;
      t.innerHTML+=s;
    }
  }
</script>
<div style="overflow-y:scroll;height:100px;border:1px solid #000;" onscroll="simulasi_ajax(this)">
  <script>
    for(i=1;i<=x;i++) document.write(i+"<br>");
    x+=20;
  </script>

langsung coba aja. dan pahami. ga usah tak jelasin yah. 😀
terima kasih untuk sumbernya dari pak.boo 😀

diskusiweb.com/discussion/43589/grid-invinite-bukan-pake-paging-menggunakan-jquery-gmna-ya-

Conten berada di tengah layar

Mengatur conten agar sesuai dengan tinggi layar monitor adalah hal yang susah. sebelum saya temukan ini.
Ini script Jquery yang beguna. mari kita coba 😀

$(document).ready(function () {
 
    $(window).resize(function () {
 
        $('.elemen').css({
            position: 'absolute',
            left: ($(window).width() - $('.elemen').outerWidth()) / 2,
            top: ($(window).height() - $('.elemen').outerHeight()) / 2
        });
 
    });
 
    $(window).resize();
 
});

Silahkan coba sendiri.. maaf lagi ga sempat jelasin.

Pengertian JQuery

jquery-logo

jquery-logoJQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client

JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan HTML yang berjalan di sisi Client. JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.

Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.

Script JQuery  dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX.  Jquery juga menyediakan layanan atau support  para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga  memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau website aplikasi menjadi Wauw… 😀

Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio  untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.

Beberapa Fitur yang ada di JQuery :

  1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis  dan interaktif.
  2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3
  3. Event
  4. AJAX
  5. Efek-efek dan animasi
  6. Ekstensi dan Plug-ins
  7. Kompatibilitas dengan hampir semua Browser modern
  8. Keperluan lain seperti : User Agent, Feature detection dan lainnya

JQuery hanyalah 1 file yang berisi kode dalam Javascript tetapi bisa berisi banyak fitur seperti di atas. Sehingga cara menggunakaanya sangat mudah..

Kita panggil file JQuerynya terlebih dahulu.

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {
// Kode Jquery anda tuliskan disini
});

</script>

Dan untuk pembahasan detailnya sabar ya.. bukan di artikel ini tempatnya…

Mungkin seperti itu yang bias saya tulis.. maaf jika ada kesalahan karena ini terjemahan langsung masih kurang saya dalam B.Inggris.. Semoga pembahasan mengenai JQuery ini bermanfaat.

Sekarang sudah terdapat sangat banyak sekali plug-ins JQuery, dan pasti teman-teman sudah tidak sabar memakainya.. selamat bersenang senang. Happy coding.. 😀

Sumber : http://en.wikipedia.org/wiki/JQuery