首页>>Jquery文字>>各种弹出层的一个插件,iframe,自定义大小等(2013-12-17)

各种弹出层的一个插件,iframe,自定义大小等

各种弹出层的一个插件,iframe,自定义大小等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="pronto">  
  2.   <article class="project_details lab_details">  
  3.     <header class="bordered_bottom page_header"></header>  
  4.     <div class="bordered_bottom project_info">  
  5.         <div class="row">  
  6.             <div class="desktop-8 tablet-6 mobile-3">  
  7.                                       
  8.                                   
  9.     <div class="project_section">  
  10.                       
  11. <pre class="  language-markup"><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Caption<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  
  12.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>thumbnail.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Thumbnail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>  
  13. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>  
  14.   
  15. <h5>Demo</h5>  
  16. <div class="clear_fix">  
  17.     <a href="images/nasa-bw-1.jpg" class="boxer boxer_image" title="By NASA on The Commons (Apollo-Soyuz) [Public domain], via Wikimedia Commons">  
  18.         <img src="images/nasa-bw-1.jpg" alt="" style="height: 100px;">  
  19.     </a>  
  20. </div>  
  21. <hr>  
  22. <h3>Gallery</h3>  
  23. <p><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image_1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Caption One<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gallery<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  
  24.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>thumbnail_1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Thumbnail One<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>  
  25.     <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>  
  26.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image_2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Caption Two<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>gallery<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  
  27.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>thumbnail_2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Thumbnail Two<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>  
  28.     <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></p>  
  29. <h5>Demo</h5>  
  30. <div class="clear_fix">  
  31.     <a href="images/nasa-bw-1.jpg" class="boxer boxer_image" rel="gallery" title="By NASA on The Commons (Apollo-Soyuz) [Public domain], via Wikimedia Commons">  
  32.         <img src="images/nasa-bw-1.jpg" alt="" style="height: 100px;">  
  33.     </a>  
  34.     <a href="images/nasa-bw-2.jpg" class="boxer boxer_image" rel="gallery" title="By NASA on The Commons (Bumper V-2 Launch) [Public domain], via Wikimedia Commons">  
  35.         <img src="images/nasa-bw-2.jpg" alt="" style="height: 100px;">  
  36.     </a>  
  37.     <a href="images/nasa-bw-3.jpg" class="boxer boxer_image" rel="gallery" title="By NASA on The Commons [Public domain], via Wikimedia Commons">  
  38.         <img src="images/nasa-bw-3.jpg" alt="" style="height: 100px;">  
  39.     </a>  
  40. </div>  
  41.   
  42. <hr>  
  43.   
  44.   
  45. <h3>Fixed Positioning</h3>  
  46. <p><code class="  language-javascript">$<span class="token punctuation">(</span><span class="token string">".boxer"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>boxer<span class="token punctuation">(</span><span class="token punctuation">{</span>  
  47.     fixed<span class="token punctuation">:</span> <span class="token boolean">true</span>  
  48.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p>  
  49. <h5><a href="images/nasa-bw-1.jpg" class="boxer boxer_image boxer_fixed" rel="gallery_fixed" title="By NASA on The Commons (Apollo-Soyuz) [Public domain], via Wikimedia Commons">  
  50.         <img src="images/nasa-bw-1.jpg" alt="" style="height: 100px;">  
  51.     </a>  
  52.     <a href="images/nasa-bw-2.jpg" class="boxer boxer_image boxer_fixed" rel="gallery_fixed" title="By NASA on The Commons (Bumper V-2 Launch) [Public domain], via Wikimedia Commons">  
  53.         <img src="images/nasa-bw-2.jpg" alt="" style="height: 100px;">  
  54.     </a>  
  55.     <a href="images/nasa-bw-3.jpg" class="boxer boxer_image boxer_fixed" rel="gallery_fixed" title="By NASA on The Commons [Public domain], via Wikimedia Commons">  
  56.         <img src="images/nasa-bw-3.jpg" alt="" style="height: 100px;">  
  57.     </a></h5>  
  58. <hr>      
  59.   
  60. <h3>Top Positioning</h3>  
  61. <p><code class="  language-javascript">$<span class="token punctuation">(</span><span class="token string">".boxer"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>boxer<span class="token punctuation">(</span><span class="token punctuation">{</span>  
  62.     top<span class="token punctuation">:</span> <span class="token number">50</span>  
  63.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p>  
  64. <h5><a href="images/nasa-bw-1.jpg" class="boxer boxer_image boxer_top" rel="gallery_top" title="By NASA on The Commons (Apollo-Soyuz) [Public domain], via Wikimedia Commons">  
  65.         <img src="images/nasa-bw-1.jpg" alt="" style="height: 100px;">  
  66.     </a>  
  67.     <a href="images/nasa-bw-2.jpg" class="boxer boxer_image boxer_top" rel="gallery_top" title="By NASA on The Commons (Bumper V-2 Launch) [Public domain], via Wikimedia Commons">  
  68.         <img src="images/nasa-bw-2.jpg" alt="" style="height: 100px;">  
  69.     </a>  
  70.     <a href="images/nasa-bw-3.jpg" class="boxer boxer_image boxer_top" rel="gallery_top" title="By NASA on The Commons [Public domain], via Wikimedia Commons">  
  71.         <img src="images/nasa-bw-3.jpg" alt="" style="height: 100px;">  
  72.     </a></h5>  
  73. <hr>  
  74.   
  75. <h3>In-Line Content</h3>  
  76. <p><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#hidden<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Show Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>  
  77.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display: none;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  
  78.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  
  79.         ...  
  80.         <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>  
  81.         <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></p>  
  82. <h5><a href="http://www.benplum.com/formstone/boxer/#hidden_content" class="boxer button small">Show Hidden Content</a></h5>  
  83. <div id="hidden_content" style="display: none;">  
  84.   <div class="inline_content">  
  85.         <h2>Some Content!</h2>  
  86.         <p>This was hidden on the page and loaded into the new Boxer instance.</p>  
  87.         <a href="http://www.benplum.com/formstone/boxer/#" class="button small resize_modal no-pronto" style="margin: 10px;">Resize</a>  
  88.         <a href="http://www.benplum.com/formstone/boxer/#" class="button small close_modal no-pronto" style="margin: 10px;">Close</a>  
  89.     </div>  
  90. </div>  
  91.   
  92. <hr>  
  93.   
  94.   
  95. <h3>jQuery Objects</h3>  
  96. <p><code class="  language-javascript">$obj <span class="token operator">=</span> $<span class="token punctuation">(</span><span class="token string">"Content!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
  97.     <span class="token comment" spellcheck="true">// OR  
  98.     </span>$obj <span class="token operator">=</span> $<span class="token punctuation">(</span><span class="token string">"<div />"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>load<span class="token punctuation">(</span>"http<span class="token punctuation">:</span><span class="token comment" spellcheck="true">//www.url.com/partial-markup/");  
  99.     </span>  
  100. $<span class="token punctuation">.</span>boxer<span class="token punctuation">(</span>$obj<span class="token punctuation">)</span><span class="token punctuation">;</span></code></p>  
  101. <h5><a href="http://www.benplum.com/formstone/boxer/#" class="boxer button small object">Show jQuery Object</a></h5>  
  102. <hr>  
  103.   
  104. <h3>iFrame</h3>  
  105. <p><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></p>  
  106. <h5><a href="http://www.freejs.net/" class="boxer button small" data-scout-event="http://www.freejs.net/">View freejs.net</a></h5>  
  107. <hr>  
  108.   
  109. <h3>Custom Sizing</h3>  
  110. <p><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span> <span class="token attr-name">data-height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">data-width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></p>  
  111. <h5><a href="http://freejs.net/" class="boxer button small" data-height="500" data-width="500" data-scout-event="ExternalLink, Click, freejs.net/">View freejs.net</a></h5>  
  112. <hr>   
  113.   
  114. <h3>Custom Caption Formats</h3>  
  115. <p><code class="  language-javascript">$<span class="token punctuation">(</span><span class="token string">".boxer"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>boxer<span class="token punctuation">(</span><span class="token punctuation">{</span>  
  116.     formatter<span class="token punctuation">:</span> formatCaptions  
  117.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
  118.   
  119.     <span class="token keyword">function</span> formatCaptions<span class="token punctuation">(</span>$target<span class="token punctuation">)</span> <span class="token punctuation">{</span>  
  120.     <span class="token keyword">return</span> <span class="token string">'<h3>'</span> <span class="token operator">+</span> $target<span class="token punctuation">.</span>attr<span class="token punctuation">(</span><span class="token string">"title"</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'</h3>'</span><span class="token punctuation">;</span>  
  121.     <span class="token punctuation">}</span></code></p>  
  122. <h5><a href="images/nasa-bw-1.jpg" class="boxer boxer_image boxer_format" title="By NASA on The Commons (Apollo-Soyuz) [Public domain], via Wikimedia Commons">  
  123.         <img src="images/nasa-bw-1.jpg" alt="" style="height: 100px;">  
  124.     </a></h5>  
  125. <hr>  
  126.   
  127. <h3>Retina Support</h3>  
  128. <p><code class="  language-javascript">$<span class="token punctuation">(</span><span class="token string">".boxer"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>boxer<span class="token punctuation">(</span><span class="token punctuation">{</span>  
  129.     retina<span class="token punctuation">:</span> <span class="token boolean">true</span>  
  130.     <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p>  
  131. <pre class="  language-markup"><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image-2x.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>boxer<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Caption - Retina<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>  
  132.     <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>thumbnail-2x.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Thumbnail - Retina<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>  
  133. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>  
  134.   
  135. <h5><a href="images/nasa-bw-retina.jpg" class="boxer boxer_image retina" title="By Apollo 15 astronaut.Bubba73 at en.wikipedia [Public domain], from Wikimedia Commons">  
  136.         <img src="images/nasa-bw-retina.jpg" alt="" style="height: 100px;">  
  137.     </a></h5>  
  138. <hr>  
  139.                 </div>  
  140.                                   
  141.                                   
  142.           
  143.                   
  144.             </div>  
  145.         </div>  
  146.     </div>  
  147. </article><br>  
  148.         </div>  
  149.         </div>  
  150.         <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>  
  151.         <link href="images/jquery.fs.boxer.css" rel="stylesheet" type="text/css" media="all">  
  152. <script src="images/jquery.fs.boxer.js"></script>  
  153.   
  154. <script>  
  155.     $(document).ready(function() {  
  156.       $(".boxer").not(".retina, .boxer_fixed, .boxer_top, .boxer_format, .object").boxer();  
  157.       $(".boxer.boxer_fixed").boxer({  
  158.           fixed: true  
  159.         });  
  160.       $(".boxer.boxer_top").boxer({  
  161.           top: 50  
  162.         });  
  163.       $(".boxer.retina").boxer({  
  164.           retina: true  
  165.         });  
  166.       $(".boxer.boxer_format").boxer({  
  167.             formatter: function($target) {  
  168.               return '<h3>' + $target.attr("title") + "</h3>";  
  169.             }  
  170.         });  
  171.         
  172.       $(".boxer.object").click(function(e) {  
  173.         e.preventDefault();  
  174.         e.stopPropagation();  
  175.         $.boxer( $('<div class="inline_content"><h2>More Content!</h2><p>This was created by jQuery and loaded into the new Boxer instance.</p></div>') );  
  176.       });  
  177.         
  178.       $(window).one("pronto.load", function() {  
  179.         $(".boxer").boxer("destroy");  
  180.       });  
  181.               
  182.       $("body").on("click", ".resize_modal", function() {  
  183.         $("#boxer").trigger("resize", [500, 500]);  
  184.         return false;  
  185.       }).on("click", ".close_modal", function() {  
  186.         $("#boxer").trigger("close");  
  187.         return false;  
  188.       });  
  189.     });  
  190. </script>     

 


原文地址:http://www.freejs.net/article_jquerywenzi_176.html