javascript · [高亮] · [原始]

1. (function($) {
2.   $.fn.figure = function() {
3.     $(this).each(function(i) {
4.       var $self = $(this),
5.           $img  = $self.find(‘img’);
6.           $html = $self.find(‘p.figure_html’),
7.           width = $img.width(),
8.           text  = $html.length ? $html.remove().html() : $img.attr(‘alt’);
9.  
10.       $self.width(width).append(‘<p class="caption"><em class="title">Figure ‘+(++i)+‘</em>’+text+‘</p>’);
11.     });
12.   };
13.  
14.   $(document).ready(function() {
15.     $(‘div.figure’).figure();
16.   });
17. })(jQuery);

(function($) {
  $.fn.figure = function() {
    $(this).each(function(i) {
      var $self = $(this),
          $img  = $self.find(\'img\');
          $html = $self.find(\'p.figure_html\'),
          width = $img.width(),
          text  = $html.length ? $html.remove().html() : $img.attr(\'alt\');

      $self.width(width).append(\'<p class="caption"><em class="title">Figure \'+(++i)+\'</em>\'+text+\'</p>\');
    });
  };

  $(document).ready(function() {
    $(\'div.figure\').figure();
  });
})(jQuery);

[高亮] · [原始] · javascript

xml · [高亮] · [原始]

1. <script type="text/javascript" src="http://your.domain.com/path/to/jquery.js"></script>
2. <script type="text/javascript" src="http://your.domain.com/path/to/figure.js"></script>

<script type="text/javascript" src="http://your.domain.com/path/to/jquery.js"></script>
<script type="text/javascript" src="http://your.domain.com/path/to/figure.js"></script>

[高亮] · [原始] · xml

css · [高亮] · [原始]

1. .figure {
2.   margin: 0 0 1.5em;
3.   color: black;
4.   background: #fee;
5.   border: 1px solid #edd;
6.   padding: 5px;
7.  
8. }
9. .figure .figure_html {
10.   display: none;
11. }
12. .figure img,
13. .figure .caption,
14. .figure .figure_html {
15.   margin: 0;
16.   padding: 0;
17. }
18. .figure .title {
19.   font-weight: bold;
20.   padding-right: 2px
21. }
22. .figure .title:after {
23.   content: ‘:’
24. }

.figure {
  margin: 0 0 1.5em;
  color: black;
  background: #fee;
  border: 1px solid #edd;
  padding: 5px;

}
.figure .figure_html {
  display: none;
}
.figure img,
.figure .caption,
.figure .figure_html {
  margin: 0;
  padding: 0;
}
.figure .title {
  font-weight: bold;
  padding-right: 2px
}
.figure .title:after {
  content: \':\'
}

[高亮] · [原始] · css

xml · [高亮] · [原始]

1. <!–無 HTML 的圖片說明–>
2. <div class="figure">
3.   <img src="your_photo.png" alt="圖片說明" />
4. </div>
5.  
6. <!–使用 HTML 的圖片說明–>
7. <div class="figure">
8.   <img src="your_photo.png" alt="圖片說明" />
9.   <p class="figure_html">使用 <acronym title="Hypertext Markup Language">HTML</acronym> 的圖片說明</p>
10. </div>

<!--無 HTML 的圖片說明-->
<div class="figure">
  <img src="your_photo.png" alt="圖片說明" />
</div>

<!--使用 HTML 的圖片說明-->
<div class="figure">
  <img src="your_photo.png" alt="圖片說明" />
  <p class="figure_html">使用 <acronym title="Hypertext Markup Language">HTML</acronym> 的圖片說明</p>
</div>

[高亮] · [原始] · xml