FrameWarp – iletişim kutusu uygulaması

0
136
Okunma

FrameWrop FrameWarp    iletişim kutusu uygulaması

Facebook sitesinin popülerliğini  herkes bilir. Ne yapsa, ne etse birileri aynısını çıkarır. Özellikle resim, video gibi  içeriklere tıklandığında  aynı çerçevede başka bir kutu içinde açılma özelliği  bir çok site tarafından kullanılıyor ve buna benzer uygulamalar geliştiriliyor. jQuery FrameWarp uygulaması da  Facebook benzeri tıklandğında içeriğin başka bir kutu içinde  açılmasını  sağlayan bir örnektir. FrameWarp  kullanarak tıklandığında açılan kutunun içinde resim, video, form sayfası gibi örneklerin incelenmesini sağlayabilirsiniz. Ayrıca tıklandığında açılan kutu içinde  ajax ile başka bir sayfayı da çağırabilirsiniz. İnternet Explorer 9 sürümüde  html5shiv desteği sayesinde kullanılabiliyor.

Demo  sayfasında dialog penceresi  için  dört  adet  buton bulunuyor.

  1. Try it : frame.html  adlı dosya  içeriğini çekerek  dialog penceresi içinde gösteriyor.
  2. Message Passing :  message.html dosyasını çekerek  dialog penceresi içinde  gösterip ziyaretçilerin yazdığı mesajları sayfada yayınlıyor. Deneme olarak herhangi bir mesaj yazıp pencereyi kapattıktan sonra  mesajı demo sayfasının altında görebilirsiniz.
  3. With Cache : Cache  ile  belirlediğiniz bir websitesini dialog penceresi içinde  gösteren butondur.
  4. Without Cache : Cache olmadan siteyi dialog penceresinde gösteren buton.

Kullanım : 

  • Head etiketleri arsına eklemeniz  gereken bölüm.

IE9 için Html5 Shiv :

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

Js ve css dosya adresleri : 

<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="framewarp/framewarp.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/jquerypp.custom.js"></script>
<script src="framewarp/framewarp.js"></script>

 JavaScript : 

//Copyright Freddy Heppell 2012
//This code is an example, used to power the three demos in the index.html file
//Please keep this copyright notice

//Replace the #b1 , #b2 ect. bit on each script to the id of the element that opens it.
$(function(){

	// This bit powers the first demo.
	//To use this give any hyperlink a id of 'b1'. When the link is clicked it will open the hyperlink's href in a modal

	$('#b1').frameWarp();

	//This powers the message passing. Again no url is provided so the href of the button is used
	//This script shows the passed value on the index.html page.
	$('#b2').frameWarp({
		onMessage: function(msg){
		//Change this bit to do different things to the passed value
			$('#messages').append('<b>Message Received:</b> '+ msg+'<br />');
		}
	});

	// When a url is provided the href of the link should be #
	//This will open the cnn website, with a nice circle loader
	//Change the url to open a different site
	$('#b3').frameWarp({
		url : 'http://www.mintik.com/'
	});

	// This is the same as above but caching is enabled
	$('#b4').frameWarp({
		url : 'http://www.mintik.com/',
		cache:false
	});
});
  •  Body etiketleri arasına eklemeniz gerkene bölüm.

Html : 

<div id="main">
   <img src="assets/img/tooltip.png" width="575" height="217" alt="FrameWarp Plugin"  />
   <a href="frame.html" class="button2" id="b1">Try it!</a>
   <a href="message.html" class="button1" id="b2">Message Passing</a> 
   <a href="#" class="button1" id="b3">With Cache</a> 
   <a href="#" class="button1" id="b4">Without Cache</a>
   <p id="messages"></p>
</div>

 

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here