facebox.js
上传用户:dbstep
上传日期:2022-08-06
资源大小:2803k
文件大小:6k
源码类别:

WEB源码(ASP,PHP,...)

开发平台:

ASP/ASPX

  1. /*
  2.  * Facebox (for jQuery)
  3.  * version: 1.1 (03/01/2008)
  4.  * @requires jQuery v1.2 or later
  5.  *
  6.  * Examples at http://famspam.com/facebox/
  7.  *
  8.  * Licensed under the MIT:
  9.  *   http://www.opensource.org/licenses/mit-license.php
  10.  *
  11.  * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ]
  12.  *
  13.  * Usage:
  14.  *  
  15.  *  jQuery(document).ready(function() {
  16.  *    jQuery('a[rel*=facebox]').facebox() 
  17.  *  })
  18.  *
  19.  *  <a href="#terms" rel="facebox">Terms</a>
  20.  *    Loads the #terms div in the box
  21.  *
  22.  *  <a href="terms.html" rel="facebox">Terms</a>
  23.  *    Loads the terms.html page in the box
  24.  *
  25.  *  <a href="terms.png" rel="facebox">Terms</a>
  26.  *    Loads the terms.png image in the box
  27.  *
  28.  *
  29.  *  You can also use it programmatically:
  30.  * 
  31.  *    jQuery.facebox('some html')
  32.  *
  33.  *  This will open a facebox with "some html" as the content.
  34.  *    
  35.  *    jQuery.facebox(function() { ajaxes })
  36.  *
  37.  *  This will show a loading screen before the passed function is called,
  38.  *  allowing for a better ajax experience.
  39.  *
  40.  */
  41. (function($) {
  42.   $.facebox = function(data, klass) {
  43.     $.facebox.init()
  44.     $.facebox.loading()
  45.     $.isFunction(data) ? data.call($) : $.facebox.reveal(data, klass)
  46.   }
  47.   $.facebox.settings = {
  48.     loading_image : 'skweb/facefiles/loading.gif',
  49.     close_image   : 'skweb/facefiles/closelabel.gif',
  50.     image_types   : [ 'png', 'jpg', 'jpeg', 'gif' ],
  51.     facebox_html  : '
  52.   <div id="facebox" style="display:none;"> 
  53.     <div class="popup"> 
  54.       <table> 
  55.         <tbody> 
  56.           <tr> 
  57.             <td class="tl"/><td class="b"/><td class="tr"/> 
  58.           </tr> 
  59.           <tr> 
  60.             <td class="b"/> 
  61.             <td class="body"> 
  62.               <div class="content"> 
  63.               </div> 
  64.               <div class="footer"> 
  65.                 <a href="#" class="close"> 
  66.                   <img src="'+this.close_image+'" title="close" class="close_image" /> 
  67.                 </a> 
  68.               </div> 
  69.             </td> 
  70.             <td class="b"/> 
  71.           </tr> 
  72.           <tr> 
  73.             <td class="bl"/><td class="b"/><td class="br"/> 
  74.           </tr> 
  75.         </tbody> 
  76.       </table> 
  77.     </div> 
  78.   </div>'
  79.   }
  80.   $.facebox.loading = function() {
  81.     if ($('#facebox .loading').length == 1) return true
  82.     $('#facebox .content').empty()
  83.     $('#facebox .body').children().hide().end().
  84.       append('<div class="loading"><img src="'+$.facebox.settings.loading_image+'"/></div>')
  85.     var pageScroll = $.facebox.getPageScroll()
  86.     $('#facebox').css({
  87.       top: pageScroll[1] + ($.facebox.getPageHeight() / 10),
  88.       left: pageScroll[0]
  89.     }).show()
  90.     $(document).bind('keydown.facebox', function(e) {
  91.       if (e.keyCode == 27) $.facebox.close()
  92.     })
  93.   }
  94.   $.facebox.reveal = function(data, klass) {
  95.     if (klass) $('#facebox .content').addClass(klass)
  96.     $('#facebox .content').append(data)
  97.     $('#facebox .loading').remove()
  98.     $('#facebox .body').children().fadeIn('normal')
  99.   }
  100.   $.facebox.close = function() {
  101.     $(document).trigger('close.facebox')
  102.     return false
  103.   }
  104.   $(document).bind('close.facebox', function() {
  105.     $(document).unbind('keydown.facebox')
  106.     $('#facebox').fadeOut(function() {
  107.       $('#facebox .content').removeClass().addClass('content')
  108.     })
  109.   })
  110.   $.fn.facebox = function(settings) {
  111.     $.facebox.init(settings)
  112.     var image_types = $.facebox.settings.image_types.join('|')
  113.     image_types = new RegExp('.' + image_types + '$', 'i')
  114.     function click_handler() {
  115.       $.facebox.loading(true)
  116.       // support for rel="facebox[.inline_popup]" syntax, to add a class
  117.       var klass = this.rel.match(/facebox[.(w+)]/)
  118.       if (klass) klass = klass[1]
  119.       // div
  120.       if (this.href.match(/#/)) {
  121.         var url    = window.location.href.split('#')[0]
  122.         var target = this.href.replace(url,'')
  123.         $.facebox.reveal($(target).clone().show(), klass)
  124.       // image
  125.       } else if (this.href.match(image_types)) {
  126.         var image = new Image()
  127.         image.onload = function() {
  128.           $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
  129.         }
  130.         image.src = this.href
  131.       // ajax
  132.       } else {
  133.         $.get(this.href, function(data) { $.facebox.reveal(data, klass) })
  134.       }
  135.       return false
  136.     }
  137.     this.click(click_handler)
  138.     return this
  139.   }
  140.   $.facebox.init = function(settings) {
  141.     if ($.facebox.settings.inited) {
  142.       return true
  143.     } else {
  144.       $.facebox.settings.inited = true
  145.     }
  146.     if (settings) $.extend($.facebox.settings, settings)
  147.     $('body').append($.facebox.settings.facebox_html)
  148.     var preload = [ new Image(), new Image() ]
  149.     preload[0].src = $.facebox.settings.close_image
  150.     preload[1].src = $.facebox.settings.loading_image
  151.     $('#facebox').find('.b:first, .bl, .br, .tl, .tr').each(function() {
  152.       preload.push(new Image())
  153.       preload.slice(-1).src = $(this).css('background-image').replace(/url((.+))/, '$1')
  154.     })
  155.     $('#facebox .close').click($.facebox.close)
  156.     $('#facebox .close_image').attr('src', $.facebox.settings.close_image)
  157.   }
  158.   // getPageScroll() by quirksmode.com
  159.   $.facebox.getPageScroll = function() {
  160.     var xScroll, yScroll;
  161.     if (self.pageYOffset) {
  162.       yScroll = self.pageYOffset;
  163.       xScroll = self.pageXOffset;
  164.     } else if (document.documentElement && document.documentElement.scrollTop) {  // Explorer 6 Strict
  165.       yScroll = document.documentElement.scrollTop;
  166.       xScroll = document.documentElement.scrollLeft;
  167.     } else if (document.body) {// all other Explorers
  168.       yScroll = document.body.scrollTop;
  169.       xScroll = document.body.scrollLeft;
  170.     }
  171.     return new Array(xScroll,yScroll) 
  172.   }
  173.   // adapter from getPageSize() by quirksmode.com
  174.   $.facebox.getPageHeight = function() {
  175.     var windowHeight
  176.     if (self.innerHeight) { // all except Explorer
  177.       windowHeight = self.innerHeight;
  178.     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  179.       windowHeight = document.documentElement.clientHeight;
  180.     } else if (document.body) { // other Explorers
  181.       windowHeight = document.body.clientHeight;
  182.     }
  183.     return windowHeight
  184.   }
  185. })(jQuery);