jQuery InputHintBox

最新推荐文章于 2024-08-06 12:58:11 发布

weixin_30608131

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量141

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/geovindu/archive/2009/06/26/1511945.html

版权

<! 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

< script src ="http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.js" ></ script >
14

< style >

body {

}{
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

.tl, .bl {

}{
45

float: left;
46

}
47

.tr, .br {

}{
48

float: right;
49

}
50

.shiny_box {

}{
52

background: #0066FF;
53

color: #FFF;
54

width: 210px;
55

overflow: hidden;
56

}
57

.shiny_box p {

}{
58

margin:10px;
59

}
60

.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

.shiny_box_body {

}{
75

clear: both;
76

padding: 0 10px;
77

overflow: hidden;
78

}
79

* html .shiny_box_body {

}{
80

height: 1%;
81

}
82

.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

Click on some input element
95

< 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 >
179

Js 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 >

转载于:https://www.cnblogs.com/geovindu/archive/2009/06/26/1511945.html

weixin_30608131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery InputHintBox

1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html>3<head>4<title>jQueryInputFloatin...
复制链接

扫一扫