您现在的位置: 365建站网 > 365学习 > jQuery InputHintBox

jQuery InputHintBox

文章来源:365jz.com     点击数:242    更新时间:2009-09-16 11:38   参与评论
  1<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2<html>
  3<head>
  4    <title>jQuery Input Floating Hint Box - Demo - Examples</title>
  5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6    <meta name="keywords" content="jQuery InputHintBox" />
  7    <meta name="description" content="jQuery InputHintBox" />
  8</head>
  9<body>
 10<script src="http://nicolae.namolovan.googlepages.com/jquery-1.2.3.min.js"></script>
 11<script src="http://nicolae.namolovan.googlepages.com/jquery.dimensions.min.js"></script>
 12
 13<script src="http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.js"></script>
 14
 15<style>
 16body {
 17    color:#000;
 18    min-width: 600px;
 19    font-family: arial,helvetica,clean,sans-serif;
 20    font-size: 9pt;
 21    line-height: 1.32em;
 22}

 23.textstyle {
 24    font-size:100%;
 25    font-family: Arial,Helvetica,sans-serif;
 26    border-color: #A7A7A7 #CCCCCC #CCCCCC #CCCCCC;
 27    border-style:solid;
 28    border-width:1px;
 29    color:#555555;
 30    font-size:1em;
 31}

 32.alignToRight {
 33    text-align:right;
 34    vertical-align:top;
 35}

 36/* Some round fancies */
 37.tl, .tr, .bl, .br {
 38    background: url(corners.gif);
 39    width: 10px;
 40    height: 10px;
 41    font-size: 0;
 42}

 43
 44.tl, .bl {
 45    float: left;
 46}

 47.tr, .br {
 48    float: right;
 49}

 50
 51.shiny_box {
 52    background: #0066FF;
 53    color: #FFF;
 54    width: 210px;
 55    overflow: hidden;
 56}

 57.shiny_box p {
 58    margin:10px;
 59}

 60
 61.shiny_box .tl {
 62    background-position: -340px 0px;    
 63}

 64.shiny_box .tr {
 65    background-position: -350px 0px;    
 66}

 67.shiny_box .bl {
 68    background-position: -340px 10px;    
 69}
    
 70.shiny_box .br {
 71    background-position: -350px 10px;    
 72}

 73
 74.shiny_box_body {
 75    clear: both;
 76    padding: 0 10px;
 77    overflow: hidden;    
 78}

 79* html .shiny_box_body {
 80    height: 1%;    
 81}

 82
 83.simple_box {
 84    width:200px;
 85    padding:10px;
 86    background-color:#D9E6F7;
 87    border:3px solid green;
 88}

 89
</style>
 90<br>
 91<h1 align="center">jQuery InputHintBox</h1>
 92<div style="margin-left:100px">
 93
 94Click on some input element
 95
 96<table cellpadding="4">
 97<tr>
 98    <td class="alignToRight">
 99        &nbsp;<label for="input_text_0">Username:</label>
100
101    </td>
102    <td>
103        <input type="text" id="input_text_0" class="textstyle titleHintBox" title="Username, &lt;b&gt;you &lt;br&gt;can use html&lt;/b&gt;Username, &lt;b&gt;you &lt;br&gt;can use html&lt;/b&gt;Username, &lt;b&gt;you &lt;br&gt;can use html&lt;/b&gt;Username, &lt;b&gt;you &lt;br&gt;can use html&lt;/b&gt;Username, &lt;b&gt;you &lt;br&gt;can use html&lt;/b&gt;">
104    </td>
105</tr>
106<tr>
107    <td class="alignToRight">
108        &nbsp;<label for="input_text_1">Password:</label>
109    </td>
110
111    <td>
112        <input type="text" id="input_text_1" class="textstyle titleHintBox" title="Password, make it longer">
113    </td>
114</tr>
115<tr>
116    <td class="alignToRight">
117        &nbsp;<label for="input_text_2">Other:</label>
118    </td>
119    <td>
120
121        <input type="text" id="input_text_2" class="textstyle titleHintBox2" title="This a simple box with a class as style Other bla bla bla Other bla bla blaOther bla bla blaOther bla bla blaOther bla bla blaOther bla bla bla">
122    </td>
123</tr>
124<tr>
125    <td class="alignToRight">
126        &nbsp;<label for="input_text_3">Other Same1:</label>
127    </td>
128    <td>
129        <input type="text" id="input_text_3" class="textstyle titleHintBox3">
130
131    </td>
132</tr>
133<tr>
134    <td class="alignToRight">
135        &nbsp;<label for="input_text_4">Other Same2:</label>
136    </td>
137    <td>
138        <input type="text" id="input_text_4" class="textstyle titleHintBox3">
139    </td>
140
141</tr>
142<tr>
143    <td class="alignToRight">
144        &nbsp;<label for="input_text_5">Other Same3:</label>
145    </td>
146    <td>
147        <input type="text" id="input_text_5" class="textstyle titleHintBox3">
148    </td>
149</tr>
150<tr>
151
152    <td class="alignToRight">
153        &nbsp;<label for="select_0">Select box:</label>
154    </td>
155    <td>
156        <select id="select_0" class="textstyle titleHintBox" title="Select hint..">
157            <option>Option 1</option>
158            <option>Option 2</option>
159
160            <option>Option 3</option>
161            <option>Option 4</option>
162        </select>
163    </td>
164</tr>
165<tr>
166    <td class="alignToRight">
167        &nbsp;
168    </td>
169
170    <td>
171        <label for="checkbox">
172            <input type="checkbox" id="checkbox" class="titleHintBox" title="Checkbox help"> Checkbox
173        </label>
174    </td>
175</tr>
176</table>
177
178<div>
179Js used:<br><br>
180<!-- Gen with http://www.chami.com/colorizer/ -->
181
182<pre>
183$<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=PURPLE>'.titleHintBox'</FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>.</B></FONT>inputHintBox<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=BLUE SIZE=+1><B>{</B></FONT>div<FONT COLOR=BLUE SIZE=+1>:</FONT>$<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=PURPLE>'#shiny_box'</FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>div_sub<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'.shiny_box_body'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>source<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'attr'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>attr<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'title'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>incrementLeft<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=BROWN>5</FONT><FONT COLOR=BLUE SIZE=+1><B>}</B></FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>;</B></FONT>
184
185$<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=PURPLE>'.titleHintBox2'</FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>.</B></FONT>inputHintBox<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=BLUE SIZE=+1><B>{</B></FONT>className<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'simple_box'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>source<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'attr'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>attr<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'title'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>incrementLeft<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=BROWN>5</FONT><FONT COLOR=BLUE SIZE=+1><B>}</B></FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>;</B></FONT>
186
187$<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=PURPLE>'.titleHintBox3'</FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>.</B></FONT>inputHintBox<FONT COLOR=BLUE SIZE=+1><B>(</B></FONT><FONT COLOR=BLUE SIZE=+1><B>{</B></FONT>className<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'simple_box'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>html<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=PURPLE>'Same text for more inputs'</FONT><FONT COLOR=BLUE SIZE=+1><B>,</B></FONT>incrementLeft<FONT COLOR=BLUE SIZE=+1>:</FONT><FONT COLOR=BROWN>5</FONT><FONT COLOR=BLUE SIZE=+1><B>}</B></FONT><FONT COLOR=BLUE SIZE=+1><B>)</B></FONT><FONT COLOR=BLUE SIZE=+1><B>;</B></FONT></pre>
188
189
190
191
192
193
194
195</div>
196
197</div>
198
199<div id="shiny_box" class="shiny_box" style="display:none;">
200    <span class="tl"></span><span class="tr"></span>
201    <div class="shiny_box_body"></div>
202    <span class="bl"></span><span class="br"></span>
203
204</div>
205
206
207
208<script>
209$().ready(function(){
210    $('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5});
211    $('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:5});
212    $('.titleHintBox3').inputHintBox({className:'simple_box',html:'Same text for more inputs',incrementLeft:5});
213}
);
214
</script>
215
216</body>
217</html>

 

 

 

 

 

 

Tag标签: jQuery

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (242人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------