반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

ㄴrㅎnㅂrㄹrㄱi

jQuery UI Tooltip - Custom content 본문

프로그래밍/JAVASCRIPT

jQuery UI Tooltip - Custom content

님투 2013. 5. 8. 22:28
반응형
샘플 : http://jqueryui.com/tooltip/#custom-content
<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tooltip - Custom content</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
  <style>
  .photo {
    width: 300px;
    text-align: center;
  }
  .photo .ui-widget-header {
    margin: 1em 0;
  }
  .map {
    width: 350px;
    height: 350px;
  }
  .ui-tooltip {
    max-width: 350px;
  }
  </style>
  <script>
  $(function() {
    $( document ).tooltip({
      items: "img, [data-geo], [title]",
      content: function() {
        var element = $( this );
        if ( element.is( "[data-geo]" ) ) {
          var text = element.text();
          return "<img class='map' alt='" + text +
            "' src='http://maps.google.com/maps/api/staticmap?" +
            "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
            text + "'>";
        }
        if ( element.is( "[title]" ) ) {
          return element.attr( "title" );
        }
        if ( element.is( "img" ) ) {
          return element.attr( "alt" );
        }
      }
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <h2>St. Stephen's Cathedral</h2>
    <h3><a href="http://maps.google.com/maps?q=대구광역시&amp;z=11" data-geo="data-geo">대구광역시</a></h3>
  </div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <img src="http://blog.joinsmsn.com/usr/s/a/sanbut/43/%EB%8C%80%EB%8D%95%EC%82%B0-%EB%8C%80%EA%B5%AC%EC%8B%9C%20%EB%8C%80%EA%B5%AC.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all" />
  </a>
</div>
 
<div class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <h2>Tower Bridge</h2>
    <h3><a href="http://maps.google.com/maps?q=필리핀&amp;z=11" data-geo="data-geo">필리핀</a></h3>
  </div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <img src="http://c.ask.nate.com/imgs/qrsi.php/8003945/10528745/0/1/A/66.jpg" alt="Tower Bridge" class="ui-corner-all" />
  </a>
</div>
 
<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
 
 
</body>
</html>


반응형
저작자표시 비영리 동일조건

'프로그래밍 > JAVASCRIPT' 카테고리의 다른 글

Javascript 와 Date 날짜  (0) 2019.09.24
현재시간을 실시간으로 일반 시간, 유닉스 타임 2가지 타입으로 보여주기  (0) 2019.09.24
홈피에 자바스크립트로 만든 색상선택기(ColorPicker) 붙여보기  (0) 2009.11.24
event.keyCode 숫자표  (0) 2008.12.26
DHTML Color Picker  (0) 2008.12.22
'프로그래밍/JAVASCRIPT' Related Articles more
Comments