PHP & JavaScript Room :: 設置サンプル

実行結果

jTip - A jQuery Tool Tip | 設置サンプル

入力ヒントの例

登録情報

  ?

  ?

外部ファイルを読み込んでツールチップ表示

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>jTip - The Jquery Tool Tip | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <link rel="stylesheet" type="text/css" href="/content/lib/jtip/jtip.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script src="/content/lib/jtip/jtip.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1><a href='http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip'>jTip - A jQuery Tool Tip</a> | 設置サンプル</h1>
         <div id="contentPad">
            <h2>入力ヒントの例</h2>
            <fieldset>
               <legend>登録情報</legend>
               <p>
                  <label>パスワード</label>&nbsp;
                  <input name="" type="text" /><span class="formInfo"><a href="/content/lib/jtip/ajax.htm?width=375" class="jTip" id="one" name="パスワードの入力制限">?</a></span>
               </p>
               <p>
                  <label>ユーザーID</label>&nbsp;
                  <input name="" type="text" /><span class="formInfo"><a href="/content/lib/jtip/ajax2.htm?width=475" class="jTip" id="two" name="">?</a></span>
               </p>
            </fieldset>
            <h2>外部ファイルを読み込んでツールチップ表示</h2>
            <ul>
               <li>
                  <a href="/content/lib/jtip/ajax4.htm?width=300" class="jTip" id="six" name="クリスピー・クリーム・ドーナツ">キャプション付、サイズ指定(300px)</a>
               </li>
               <li>
                  <a href="/content/lib/jtip/ajax3.htm?width=375" class="jTip" id="three">キャプションなし、サイズ指定(375px)</a>
               </li>
               <li>
                  <a href="/content/lib/jtip/ajax5.htm" class="jTip" id="four" name="クリスピー・クリーム・ドーナツ">キャプション付、サイズ指定なし</a>
               </li>
               <li>
                  <a href="/content/lib/jtip/wiki.htm?width=500&amp;link=http://ja.wikipedia.org/wiki/Ajax" name="Wikipedia" id="gotowiki" class="jTip">Ajax From Wikipedia</a>
               </li>
            </ul>
         </div>
      </div>
   </body>
</html>