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

実行結果

jQuery Input Floating Hint Box | 設置サンプル

▼フォーム要素をクリックすると、右側にツールチップが表示されます。

設置サンプルのソース

<!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>jQuery Input Floating Hint Box | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script src="/content/lib/jquery/jquery.jquery.dimensions-1.2.js" type="text/javascript"></script>
      <script src="/content/lib/jquery/jquery.inputHintBox.js" type="text/javascript"></script>
      <script type='text/javascript'>
         $(function() {
            $('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5});
            $('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:50});
            $('.titleHintBox3').inputHintBox({className:'simple_box',html:'オプションの「html」でツールチップを指定しています。',incrementLeft:5});
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         label { width:10em; display:block; float:left; clear:left; text-align:right; padding-right:1em; }
         p.group { margin-left:11em; }
         p.group label { width:auto; display:inline; float:none; padding:0; }
         .textstyle { border-color:#a7a7a7 #ccc #ccc #ccc; border-style:solid; border-width:1px; color:#555; }
         .alignToRight { text-align:right; vertical-align:top; }
         /* 角丸ツールチップ */
         .tl, .tr, .bl, .br { background:url(/content/img/ajax/corners.gif); width:10px; height:10px; font-size:0; }
         .tl, .bl { float:left; }
         .tr, .br { float:right; }
         .shiny_box { background:#0066FF; color:#FFF; width:210px; overflow:hidden; }
         .shiny_box p { margin:10px; }
         .shiny_box .tl { background-position:-340px 0; }
         .shiny_box .tr { background-position:-350px 0; }
         .shiny_box .bl { background-position:-340px 10px; }
         .shiny_box .br { background-position:-350px 10px; }
         .shiny_box_body { clear:both; padding:0 10px; overflow:hidden; }
         * html .shiny_box_body { height:1% }
         .simple_box { width:200px; padding:10px; background-color:#d9e6f7; border:3px solid green; }
      </style>
   <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://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html'>jQuery Input Floating Hint Box</a> | 設置サンプル</h1>
         <p>▼フォーム要素をクリックすると、右側にツールチップが表示されます。</p>
<!-- CODE -->
         <form action="#">
            <p>
               <label for="input_text_0">ユーザー名：</label>
               <input type="text" id="input_text_0" class="textstyle titleHintBox" title="&lt;strong&gt;ユーザー名&lt;/strong&gt;を入力してください。">
            </p>
            <p>
               <label for="input_text_1">パスワード：</label>
               <input type="password" id="input_text_1" class="textstyle titleHintBox" title="&lt;strong&gt;パスワード&lt;/strong&gt;を4文字以上8文字以内で入力してください。">
            </p>
            <p>
               <label for="input_text_2">コメント：</label>
               <textarea id="input_text_2" cols="50" rows="5" class="textstyle titleHintBox2" title="「incrementLeft:50」を指定して、input要素から50px離れた位置にツールチップを表示しています。"></textarea>
            </p>
            <p>
               <label for="input_text_3">その他１：</label>
               <input type="text" id="input_text_3" class="textstyle titleHintBox3">
            </p>
            <p>
               <label for="input_text_4">その他２：</label>
               <input type="text" id="input_text_4" class="textstyle titleHintBox3">
            </p>
            <p>
               <label for="input_text_5">その他３：</label>
               <input type="text" id="input_text_5" class="textstyle titleHintBox3">
            </p>
            <p>
               <label for="select_0">セレクトボックス：</label>
               <select id="select_0" class="textstyle titleHintBox" title="選択してください">
                  <option>項目１</option>
                  <option>項目２</option>
                  <option>項目３</option>
                  <option>項目４</option>
                  <option>項目５</option>
               </select>
            </p>
            <p class="group">
               <label for="c1"><input type="checkbox" id="c1" class="titleHintBox" title="チェックボックスのヘルプ１"> 項目１</label>
               <label for="c2"><input type="checkbox" id="c2" class="titleHintBox" title="チェックボックスのヘルプ２"> 項目２</label>
               <label for="c3"><input type="checkbox" id="c3" class="titleHintBox" title="チェックボックスのヘルプ３"> 項目３</label>
            </p>
            <p class="group">
               <label for="r1"><input type="radio" id="r1" name="r" class="titleHintBox" title="ラジオボタンのヘルプ１"> 項目１</label>
               <label for="r2"><input type="radio" id="r2" name="r" class="titleHintBox" title="ラジオボタンのヘルプ２"> 項目２</label>
               <label for="r3"><input type="radio" id="r3" name="r" class="titleHintBox" title="ラジオボタンのヘルプ３"> 項目３</label>
            </p>
            <p>
               <input type="button" id="btn" class="titleHintBox" title="ボタンにもツールチップを表示できます。" value="ボタン" />
            </p>
         </form>
         <!-- ツールチップ用 -->
         <div id="shiny_box" class="shiny_box" style="display:none;">
            <span class="tl"></span><span class="tr"></span>
            <div class="shiny_box_body"></div>
            <span class="bl"></span><span class="br"></span>
         </div>
<!-- CODE / -->
      </div>
   </body>
</html>