多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

中國最全IT社區(qū)平臺聯(lián)系我們 | 收藏本站

jqueryui教程

jQuery UI 教程

jQuery UI 主題

jQuery UI 部件庫

jQuery UI 參考手冊

jQuery UI 實例

←上一篇： jQuery UI 實例 – 標簽頁（Tabs）

→下一篇：jQuery UI 實例 – 特效（Effect）

jQuery UI 實例 – 工具提示框（Tooltip）

閱讀 (2280)

jQuery UI 實例 - 工具提示框（Tooltip）

可自定義的、可主題化的工具提示框，替代原生的工具提示框。

如需了解更多有關 tooltip 部件的細節(jié)，請查看 API 文檔工具提示框部件（Tooltip Widget）。

默認功能

懸停在鏈接上，或者使用 tab 鍵循環(huán)切換聚焦在每個元素上。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 默認功能</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="部件的名稱">Tooltips</a> 可被綁定到任意的元素上。當您的鼠標懸停在元素上時，title 屬性會顯示在元素旁邊的一個小框中，就像原生的工具提示框一樣。</p>
<p>但是由于它不是一個原生的工具提示框，所以它可以被定義樣式。通過 <a  title="ThemeRoller：jQuery UI 的主題創(chuàng)建應用程序">ThemeRoller</a> 創(chuàng)建的主題也可以相應地定義工具提示框的樣式。</p>
<p>工具提示框也可以用于表單元素，來顯示每個區(qū)域中的一些額外的信息。</p>
<p><label for="age">您的年齡：</label><input id="age" title="年齡僅用于統(tǒng)計。"></p>
<p>懸停在相應的區(qū)域上查看工具提示框。</p>
 
 
</body>
</html>

自定義樣式

懸停在鏈接上，或者使用 tab 鍵循環(huán)切換聚焦在每個元素上。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 自定義樣式</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <script>
  $(function() {
    $( document ).tooltip({
      position: {
        my: "center bottom-20",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
    });
  });
  </script>
  <style>
  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="部件的名稱">Tooltips</a> 可被綁定到任意的元素上。當您的鼠標懸停在元素上時，title 屬性會顯示在元素旁邊的一個小框中，就像原生的工具提示框一樣。</p>
<p>但是由于它不是一個原生的工具提示框，所以它可以被定義樣式。通過 <a  title="ThemeRoller：jQuery UI 的主題創(chuàng)建應用程序">ThemeRoller</a> 創(chuàng)建的主題也可以相應地定義工具提示框的樣式。</p>
<p>工具提示框也可以用于表單元素，來顯示每個區(qū)域中的一些額外的信息。</p>
<p><label for="age">您的年齡：</label><input id="age" title="年齡僅用于統(tǒng)計。"></p>
<p>懸停在相應的區(qū)域上查看工具提示框。</p>
 
 
</body>
</html>

自定義動畫

本實例演示了如何使用 show 和 hide 選項來自定義動畫，也可以使用 open 事件來自定義動畫。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 自定義動畫</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <script>
  $(function() {
    $( "#show-option" ).tooltip({
      show: {
        effect: "slideDown",
        delay: 250
      }
    });
    $( "#hide-option" ).tooltip({
      hide: {
        effect: "explode",
        delay: 250
      }
    });
    $( "#open-event" ).tooltip({
      show: null,
      position: {
        my: "left top",
        at: "left bottom"
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
      }
    });
  });
  </script>
</head>
<body>
 
<p>這里有多種方式自定義工具提示框的動畫。</p>
<p>您可以使用 <a id="show-option"  title="向下滑動顯示">show</a> 和
<a id="hide-option"  title="爆炸隱藏">hide</a> 選項。</p>
<p>您也可以使用 <a id="open-event"  title="向下移動顯示">open</a> 事件。</p>
 
 
</body>
</html>

自定義內容

演示如何通過自定義 items 和 content 選項，來組合不同的事件委托工具提示框到一個單一的實例中。

您可能需要與地圖工具提示框進行交互，這是未來版本中的一個待實現(xiàn)的功能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 自定義內容</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <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  data-geo="">奧地利維也納（Vienna, Austria）</a></h3>
  </div>
  <a >
    <img src="/upload/help//attachments/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen&apos;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  data-geo="">英國倫敦（London, England）</a></h3>
  </div>
  <a >
    <img src="/upload/help//attachments/uploads/2014/03/tower-bridge.jpg" alt="塔橋（Tower Bridge）" class="ui-corner-all">
  </a>
</div>
 
<p>所有的圖片源自 <a >Wikimedia Commons</a>，且歸 <a  title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版權持有人所有。</p>
 
 
</body>
</html>

表單

使用下面的按鈕來顯示幫助文本，或者只需要讓鼠標懸停在輸入框上或者讓輸入框獲得焦點，即可顯示相應輸入框的幫助文本。

在 CSS 中定義一個固定的寬度，讓同時顯示所有的幫助文本時看起來更一致。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 表單</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <style>
  label {
    display: inline-block; width: 5em;
  }
  fieldset div {
    margin-bottom: 2em;
  }
  fieldset .help {
    display: inline-block;
  }
  .ui-tooltip {
    width: 210px;
  }
  </style>
  <script>
  $(function() {
    var tooltips = $( "[title]" ).tooltip();
    $( "<button>" )
      .text( "Show help" )
      .button()
      .click(function() {
        tooltips.tooltip( "open" );
      })
      .insertAfter( "form" );
  });
  </script>
</head>
<body>
 
<form>
  <fieldset>
    <div>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" title="請?zhí)峁┠拿帧?>
    </div>
    <div>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" title="請?zhí)峁┠男帐稀?>
    </div>
    <div>
      <label for="address">地址</label>
      <input id="address" name="address" title="您的家庭或工作地址。">
    </div>
  </fieldset>
</form>
 
 
</body>
</html>

跟蹤鼠標

本實例中的工具提示框是相對于鼠標進行定位的，當鼠標在元素上移動時，它會跟隨鼠標移動。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 跟蹤鼠標</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
  <script>
  $(function() {
    $( document ).tooltip({
      track: true
    });
  });
  </script>
</head>
<body>

<p><a href="#" title="部件的名稱">Tooltips</a> 可被綁定到任意的元素上。當您的鼠標懸停在元素上時，title 屬性會顯示在元素旁邊的一個小框中，就像原生的工具提示框一樣。</p>
<p>但是由于它不是一個原生的工具提示框，所以它可以被定義樣式。通過 <a  title="ThemeRoller：jQuery UI 的主題創(chuàng)建應用程序">ThemeRoller</a> 創(chuàng)建的主題也可以相應地定義工具提示框的樣式。</p>
<p>工具提示框也可以用于表單元素，來顯示每個區(qū)域中的一些額外的信息。</p>
<p><label for="age">您的年齡：</label><input id="age" title="年齡僅用于統(tǒng)計。"></p>
<p>懸停在相應的區(qū)域上查看工具提示框。</p>
 
 
</body>
</html>

視頻播放器

一個虛擬的視頻播放器，帶有喜歡/分享/統(tǒng)計按鈕，每個按鈕都帶有自定義樣式的工具提示框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 視頻播放器</title>
  <link rel="stylesheet" href="/s//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="/upload/help///code.jquery.com/jquery-1.9.1.js"></script>
  <script src="/upload/help///code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" >
  <style>
  .player {
    width: 500px;
    height: 300px;
    border: 2px groove gray;
    background: rgb(200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  .ui-tooltip {
    border: 1px solid white;
    background: rgba(20, 20, 20, 1);
    color: white;
  }
  .set {
    display: inline-block;
  }
  .notification {
    position: absolute;
    display: inline-block;
    font-size: 2em;
    padding: .5em;
    box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
  }
  </style>
  <script>
  $(function() {
    function notify( input ) {
      var msg = "已選擇 " + $.trim( input.data( "tooltip-title" ) || input.text() );
      $( "<div>" )
        .appendTo( document.body )
        .text( msg )
        .addClass( "notification ui-state-default ui-corner-bottom" )
        .position({
          my: "center top",
          at: "center top",
          of: window
        })
        .show({
          effect: "blind"
        })
        .delay( 1000 )
        .hide({
          effect: "blind",
          duration: "slow"
        }, function() {
          $( this ).remove();
        });
    }
 
    $( "button" ).each(function() {
      var button = $( this ).button({
        icons: {
          primary: $( this ).data( "icon" )
        },
        text: !!$( this ).attr( "title" )
      });
      button.click(function() {
        notify( button );
      });
    });
    $( ".set" ).buttonset({
      items: "button"
    });
 
    $( document ).tooltip({
      position: {
        my: "center top",
        at: "center bottom+5",
      },
      show: {
        duration: "fast"
      },
      hide: {
        effect: "hide"
      }
    });
  });
  </script>
</head>
<body>
 
<div class="player">這里是視頻 (HTML5?)</div>
<div class="tools">
  <span class="set">
    <button data-icon="ui-icon-circle-arrow-n" title="我喜歡這個視頻">喜歡</button>
    <button data-icon="ui-icon-circle-arrow-s">我不喜歡這個視頻</button>
  </span>
  <div class="set">
    <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button>
    <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夾</button>
  </div>
  <button title="分享這個視頻">分享</button>
  <button data-icon="ui-icon-alert">標記為不恰當</button>
</div>
 
 
</body>
</html>

←上一篇： jQuery UI 實例 – 標簽頁（Tabs）

→下一篇：jQuery UI 實例 – 特效（Effect）

教程導航