jQuery InputHintBox

zoukankan html css js c++ java

jQuery InputHintBox

 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 
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  <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, you can use htmlUsername, you can use htmlUsername, you can use htmlUsername, you can use htmlUsername, you can use html">
104 </td>
105</tr>
106<tr>
107 <td class="alignToRight">
108  <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  <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  <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  <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  <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  <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  
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: 
180
181
182<pre>
183$('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5});
184
185$('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:5});
186
187$('.titleHintBox3').inputHintBox({className:'simple_box',html:'Same text for more inputs',incrementLeft:5});</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 
201 <div class="shiny_box_body"></div>
202 
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>

哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)成功.---Geovin Du(涂聚文）

查看全文

相关阅读:
Webservice接口和Http接口
 java多线程
 时间显示成一串阿拉伯数字
 jsp静态与动态包含的区别和联系
 解决Win10默认占用80端口
 JAVA中文乱码之解决方案
 相对路径与绝对路径的差异
 JSP静态包含和动态包含的区别和联系
 数据库Oracle
智能指针shared_ptr的用法

原文地址：https://www.cnblogs.com/geovindu/p/1511945.html