白开心
IT博客
::
首页
:: ::
联系
::
聚合
::
管理
::
9 随笔 :: 76 文章 :: 28 评论 :: 0 Trackbacks
<
2024年12月
>
日
一
二
三
四
五
六
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
公告
独坐在路边街角,冷风吹醒,默默地伴着我的孤影。
常用链接
我的随笔
我的评论
我参与的随笔
留言簿
(12)
给我留言
查看公开留言
查看私人留言
文章分类
.Net(学习ing...)(39)
(rss)
Asp+vbScript(14)
(rss)
JavaScript(14)
(rss)
T-SQL(8)
(rss)
经典收藏(8)
(rss)
设计模式
(rss)
文章档案
2013年4月 (1)
2013年3月 (1)
2012年7月 (1)
2012年4月 (1)
2011年10月 (1)
2011年8月 (1)
2011年3月 (1)
2011年2月 (1)
2011年1月 (1)
2010年9月 (1)
2010年6月 (1)
2010年4月 (2)
2010年1月 (1)
2009年11月 (1)
2009年10月 (6)
2009年9月 (3)
2009年8月 (2)
2009年5月 (1)
2008年10月 (2)
2008年9月 (2)
2008年7月 (2)
2008年6月 (1)
2008年3月 (1)
2008年2月 (1)
2008年1月 (1)
2007年12月 (5)
2007年11月 (4)
2007年10月 (2)
2007年9月 (2)
2007年7月 (1)
2007年6月 (2)
2007年4月 (2)
2007年1月 (1)
2006年12月 (1)
2006年11月 (2)
2006年8月 (1)
2006年7月 (1)
2006年5月 (2)
2006年4月 (1)
2006年2月 (1)
2006年1月 (1)
2005年12月 (10)
相册
PhotoShop Study For HuangHuaXiang
我的相册
收藏夹
.NET(1)
(rss)
其他类别
(rss)
搜索
最新评论
1. re: JQUERY的表单异步提交[未登录]
1111111
--111
2. re: JQUERY的表单异步提交
eqedqedasd
--123
3. re: 委托和匿名函数
评论内容较长,点击标题查看
--bracelet shopping
4. re: 递归查询
您好!你的在我这里怎么执行不了啊!
--小陈
5. re: JS操作Xml的相关方法[未登录]
不能保丰到服务器上?
--11
阅读排行榜
1. 窦房折返性心动过速(928)
2. ∷∷∷∷男人感悟一百条∷∷∷∷(710)
3. 人生致命的八个经典问题(657)
4. 秋天不回来(570)
5. 圣诞(467)
评论排行榜
1. 圣诞(0)
2. 人生致命的八个经典问题(0)
3. ∷∷∷∷男人感悟一百条∷∷∷∷(0)
4. 窦房折返性心动过速(0)
5. 秋天不回来(0)
JS应用(文本框输入出现自动提示框和右键菜单)
1
<%
@ Control Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
AutoComplete.ascx.cs
"
Inherits
=
"
AutoComplete
"
%>
2
<
script language
=
"
javascript
"
>
3
var
searchText,keyRows;
4
var
mouseOverColor
=
"
#8985CF
"
;
5
var
mouseOutColor
=
"
#efefef
"
;
6
var
inputs
=
document.getElementsByTagName(
"
input
"
);
7
for
(
var
i
=
0
;i
<
inputs.length;i
++
)
8
{
9
if
(inputs[i].id.indexOf(
"
InputKeywords
"
)
>
-
1
)
10
{
11
searchText
=
inputs[i];
12
}
13
}
14
15
/**/
/*
**************************************
*/
16
/**/
/*
17
以下是对搜索输入框的修饰,加入输入提示框,右键菜单功能。
18
输入提示框后台取数据使用 AJAX
19
右键菜单全部 JS 功能。 ---------- HJ
20
*/
21
/**/
/*
**************************************
*/
22
if
(searchText
!=
null
)
23
{
24
searchText.autocomplete
=
"
off
"
;
25
searchText.onmousedown
=
function
()
26
{
//
/ 右键菜单
27
rightMenu();
28
}
29
searchText.onkeyup
=
function
()
30
{
//
/ 自动搜索输入提示框
31
if
(window.event.keyCode
!=
"
40
"
&&
window.event.keyCode
!=
"
38
"
)
32
{
//
/ 不是上下两个方向键
33
keyRows
=
null
;
//
/ 将选择关键字的指针变量清空;
34
if
(
this
.value
!=
""
)
35
{
36
createList(
this
.value);
37
}
38
else
39
{
40
RemoveList();
41
}
42
}
43
}
44
}
45
46
//
/ 用户按下回车键自动跳转页面 Add By HJ 2007-12-5
47
document.body.onclick
=
function
()
48
{
49
hideMenu();
50
RemoveList();
51
}
52
53
document.body.onkeydown
=
function
()
54
{
55
//
/ 用户按下回车键自动跳转页面 Add By HJ 2007-12-5
56
var
page;
57
page
=
document.getElementById(
"
GoToPageIndex
"
);
58
if
(page
!=
null
)
59
{
60
var
PageIndex
=
page.value;
61
if
(window.event.keyCode
==
"
13
"
&&
PageIndex
!=
""
)
62
{
63
goToPage();
64
}
65
}
66
67
//
/ 自动选择相关提示列
68
var
trCount;
69
var
table
=
document.getElementById(
"
keyTable
"
);
70
if
(table
!=
null
)
71
{
72
trCount
=
table.firstChild.childNodes.length
-
2
;
73
debugger
;
74
if
(window.event.keyCode
==
"
40
"
)
75
{
//
/ 向下
76
if
(keyRows
==
null
)keyRows
=
0
;
77
else
if
(keyRows
>=
trCount)
78
{
79
table.firstChild.childNodes[keyRows].bgColor
=
mouseOutColor;
80
keyRows
=
0
;
81
}
82
else
83
{
84
table.firstChild.childNodes[keyRows].bgColor
=
mouseOutColor;
85
keyRows
++
;
86
}
87
table.firstChild.childNodes[keyRows].bgColor
=
mouseOverColor;
88
if
(searchText
!=
null
) searchText.value
=
table.firstChild.childNodes[keyRows].firstChild.innerText;
89
table.firstChild.childNodes[keyRows].focus();
90
}
91
else
if
(window.event.keyCode
==
"
38
"
)
92
{
//
/ 向上
93
if
(keyRows
==
null
)
94
{
95
keyRows
=
0
;
96
}
97
else
if
(keyRows
==
0
)
98
{
99
table.firstChild.childNodes[keyRows].bgColor
=
mouseOutColor;
100
keyRows
=
trCount;
101
}
102
else
103
{
104
table.firstChild.childNodes[keyRows].bgColor
=
mouseOutColor;
105
keyRows
--
;
106
}
107
table.firstChild.childNodes[keyRows].bgColor
=
mouseOverColor;
108
if
(searchText
!=
null
) searchText.value
=
table.firstChild.childNodes[keyRows].firstChild.innerText;
109
table.firstChild.childNodes[keyRows].focus();
110
}
111
}
112
}
113
114
/**/
/*
******************************************
115
加入右键菜单处理 HJ
116
2007-12-26
117
******************************************
*/
118
//
显示菜单
119
function
showMenu()
120
{
121
nocontextmenu(
true
);
122
123
var
X,Y;
124
Y
=
document.body.scrollTop
+
event.clientY;
125
X
=
document.body.scrollLeft
+
event.clientX;
126
var
obj
=
document.getElementById(
"
showContent
"
);
127
if
(obj
==
null
)
return
;
128
129
//
控制菜单不超过边界
130
if
(parseInt(obj.width)
+
parseInt(X)
>
window.screen.width)
131
{
132
X
-=
parseInt(obj.width);
133
}
134
135
if
(parseInt(obj.height)
+
parseInt(Y)
>
window.screen.height)
136
{
137
Y
-=
parseInt(obj.height);
138
}
139
obj.style.display
=
"
block
"
;
140
obj.style.left
=
X.toString()
+
"
px
"
;
141
obj.style.top
=
Y.toString()
+
"
px
"
;
142
}
143
144
//
隐藏菜单
145
function
hideMenu()
146
{
147
document.oncontextmenu
=
""
;
148
var
obj
=
document.getElementById(
"
showContent
"
);
149
if
(obj
!=
null
)
150
{
151
obj.style.display
=
"
none
"
;
152
}
153
nocontextmenu(
false
);
154
}
155
156
//
屏蔽系统的右键菜单
157
function
nocontextmenu(hid)
158
{
159
event.cancelBubble
=
hid
160
event.returnValue
=
!
hid;
161
}
162
163
/**/
/*
如果当前浏览器是Internet Explorer,document.all就返回真
*/
164
function
rightMenu()
165
{
166
if
(document.all
&&
window.print)
167
{
168
if
(event.button
==
2
)
169
{
170
document.oncontextmenu
=
showMenu;
171
}
172
else
173
{
174
hideMenu();
175
}
176
}
177
}
178
179
//
/右键菜单事件
180
function
searchStartKey(keyValue)
181
{
182
if
(searchText
!=
null
)
183
{
184
var
val
=
searchText.value;
185
for
(
var
i
=
0
;i
<
searchStartKeys.length;i
++
)
186
{
187
if
(val.indexOf(searchStartKeys[i])
==
0
)
188
{
189
val
=
val.substr(searchStartKeys[i].length);
190
break
;
191
}
192
}
193
searchText.value
=
keyValue
+
val;
194
searchText.focus();
195
setCursorPos(searchText);
196
}
197
}
198
199
function
searchJoinType(typeName)
200
{
201
if
(searchText
!=
null
&&
searchText.value
!=
""
)
202
{
203
searchText.value
+=
"
"
+
typeName
+
"
"
;
204
searchText.focus();
205
setCursorPos(searchText);
206
}
207
}
208
209
//
/光标停留在文本框的最后面
210
function
setCursorPos(x)
211
{
212
var
txtRange
=
x.createTextRange();
213
txtRange.moveStart(
"
character
"
, x.value.length);
214
txtRange.moveEnd(
"
character
"
,
0
);
215
txtRange.select();
216
}
217
/**/
/*
****************
218
End
219
*****************
*/
220
221
222
223
/**/
/*
**************************
224
模仿 Google 搜索框,输入关键字时出现相匹配的下拉框
225
Create By HJ 2008-2-20
226
***************************
*/
227
function
RemoveList()
228
{
229
var
div
=
document.getElementById(
"
QuickSearch
"
);
230
if
(div
!=
null
)
231
{
232
div.innerHTML
=
""
;
233
}
234
}
235
236
function
setSerachValue(str)
237
{
238
if
(searchText
!=
null
)
239
{
240
searchText.value
=
str;
241
}
242
}
243
244
function
createList(obj)
245
{
246
//
/ 创建一个Div,显示在输入框的下方
247
var
RankWords
=
AjaxService.getRankWords(obj).value;
248
if
(RankWords
==
null
||
RankWords
==
""
)
249
{
250
RemoveList();
251
return
;
252
}
253
var
Div;
254
Div
=
document.getElementById(
"
QuickSearch
"
);
255
256
var
Table
=
document.createElement(
"
table
"
);
257
var
tableValign
=
document.createAttribute(
"
valign
"
);
//
创建属性
258
tableValign.value
=
"
top
"
;
259
Table.setAttributeNode(tableValign);
//
添加属性
260
tableValign
=
document.createAttribute(
"
id
"
);
//
创建属性
261
tableValign.value
=
"
keyTable
"
;
262
Table.setAttributeNode(tableValign);
//
添加属性
263
tableValign
=
document.createAttribute(
"
cellpadding
"
);
//
创建属性
264
tableValign.value
=
"
0
"
;
265
Table.setAttributeNode(tableValign);
//
添加属性
266
tableValign
=
document.createAttribute(
"
cellspacing
"
);
//
创建属性
267
tableValign.value
=
"
0
"
;
268
Table.setAttributeNode(tableValign);
//
添加属性
269
tableValign
=
document.createAttribute(
"
border
"
);
//
创建属性
270
tableValign.value
=
"
0
"
;
271
Table.setAttributeNode(tableValign);
//
添加属性
272
Table.style.width
=
searchText.style.width;
273
274
var
Keys
=
RankWords.split(
"
$$
"
);
275
var
Tr,Td1,Td2,Td1Text,Td2Text,Td1Align,Td2Align;
276
var
Td2Font,FontText,FontColor;
277
var
Key,RowCounts;
278
for
(
var
i
=
0
;i
<
Keys.length;i
++
)
279
{
280
Key
=
Keys[i].substring(
0
,Keys[i].indexOf(
"
||
"
));
281
RowCounts
=
Keys[i].substr(Keys[i].indexOf(
"
||
"
)
+
2
);
282
Tr
=
document.createElement(
"
tr
"
);
283
TrClick
=
document.createAttribute(
"
onclick
"
);
//
创建属性
284
TrClick.value
=
"
setSerachValue('
"
+
Key
+
"
');
"
;
285
Tr.setAttributeNode(TrClick);
//
添加属性
286
TrClick
=
document.createAttribute(
"
onmousemove
"
);
//
创建属性
287
TrClick.value
=
"
if(keyRows!=null)this.parentNode.childNodes[keyRows].bgColor=mouseOutColor;this.bgColor='
"
+
mouseOverColor
+
"
';
"
;
288
Tr.setAttributeNode(TrClick);
//
添加属性
289
TrClick
=
document.createAttribute(
"
onmouseout
"
);
//
创建属性
290
TrClick.value
=
"
this.bgColor='
"
+
mouseOutColor
+
"
';
"
;
291
Tr.setAttributeNode(TrClick);
//
添加属性
292
Tr.style.cursor
=
"
hand
"
;
293
294
Td1
=
document.createElement(
"
td
"
);
295
Td2
=
document.createElement(
"
td
"
);
296
Td1Text
=
document.createTextNode(Key);
297
298
Td2Font
=
document.createElement(
"
font
"
);
299
FontColor
=
document.createAttribute(
"
color
"
);
//
创建属性
300
FontColor.value
=
"
#008000
"
;
301
Td2Font.setAttributeNode(FontColor);
//
添加属性
302
303
FontText
=
document.createTextNode(RowCounts
+
"
结果
"
);
304
Td2Font.appendChild(FontText);
305
Td2.appendChild(Td2Font);
306
307
Td1Align
=
document.createAttribute(
"
align
"
);
//
创建属性
308
Td1Align.value
=
"
left
"
;
309
Td1.setAttributeNode(Td1Align);
//
添加属性
310
311
Td2Align
=
document.createAttribute(
"
align
"
);
//
创建属性
312
Td2Align.value
=
"
right
"
;
313
Td2.setAttributeNode(Td2Align);
//
添加属性
314
315
Td1.appendChild(Td1Text);
316
Tr.appendChild(Td1);
317
Tr.appendChild(Td2);
318
Tr.bgColor
=
mouseOutColor;
319
Table.appendChild(Tr);
320
}
321
//
/ 创建一个关闭行
322
Tr
=
document.createElement(
"
tr
"
);
323
Td1
=
document.createElement(
"
td
"
);
324
Td1Align
=
document.createAttribute(
"
align
"
);
//
创建属性
325
Td1Align.value
=
"
right
"
;
326
Td1.setAttributeNode(Td1Align);
//
添加属性
327
Td1Align
=
document.createAttribute(
"
colspan
"
);
//
创建属性
328
Td1Align.value
=
"
2
"
;
329
Td1.setAttributeNode(Td1Align);
//
添加属性
330
331
var
aClose
=
document.createElement(
"
a
"
);
332
Td1Align
=
document.createAttribute(
"
href
"
);
//
创建属性
333
Td1Align.value
=
"
#
"
;
334
aClose.setAttributeNode(Td1Align);
//
添加属性
335
Td1Align
=
document.createAttribute(
"
onclick
"
);
//
创建属性
336
Td1Align.value
=
"
RemoveList();
"
;
337
aClose.setAttributeNode(Td1Align);
//
添加属性
338
aCloseText
=
document.createTextNode(
"
关闭
"
);
339
aClose.appendChild(aCloseText);
340
Td1.appendChild(aClose);
341
Tr.appendChild(Td1);
342
Tr.bgColor
=
mouseOutColor;
343
Table.appendChild(Tr);
344
345
Div.innerHTML
=
Table.outerHTML;
346
var
a
=
getElementPos(searchText);
347
Div.style.left
=
a.x;
348
Div.style.top
=
a.y
+
20
;
349
}
350
351
//
/ 获取控件的位置
352
function
getElementPos(el)
353
{
354
var
ua
=
navigator.userAgent.toLowerCase();
355
var
isOpera
=
(ua.indexOf('opera')
!=
-
1
);
356
var
isIE
=
(ua.indexOf('msie')
!=
-
1
&&
!
isOpera);
//
not opera spoof
357
358
if
(el.parentNode
===
null
||
el.style.display
==
'none')
359
{
360
return
false
;
361
}
362
363
var
parent
=
null
;
364
var
pos
=
[];
365
var
box;
366
if
(el.getBoundingClientRect)
//
IE
367
{
368
box
=
el.getBoundingClientRect();
369
var
scrollTop
=
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
370
var
scrollLeft
=
Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
371
return
{x:box.left
+
scrollLeft, y:box.top
+
scrollTop}
;
372
}
373
else
if
(document.getBoxObjectFor)
//
gecko
374
{
375
box
=
document.getBoxObjectFor(el);
376
var
borderLeft
=
(el.style.borderLeftWidth)
?
parseInt(el.style.borderLeftWidth):
0
;
377
var
borderTop
=
(el.style.borderTopWidth)
?
parseInt(el.style.borderTopWidth):
0
;
378
pos
=
[box.x
-
borderLeft, box.y
-
borderTop];
379
}
380
else
//
safari & opera
381
{
382
pos
=
[el.offsetLeft, el.offsetTop];
383
parent
=
el.offsetParent;
384
if
(parent
!=
el)
385
{
386
387
while
(parent)
{
388
pos[
0
]
+=
parent.offsetLeft;
389
pos[
1
]
+=
parent.offsetTop;
390
parent
=
parent.offsetParent;
391
}
392
}
393
if
(ua.indexOf('opera')
!=
-
1
394
||
( ua.indexOf('safari')
!=
-
1
&&
el.style.position
==
'absolute' ))
395
{
396
pos[
0
]
-=
document.body.offsetLeft;
397
pos[
1
]
-=
document.body.offsetTop;
398
}
399
}
400
401
if
(el.parentNode)
{ parent
=
el.parentNode; }
402
else
{ parent
=
null
; }
403
while
(parent
&&
parent.tagName
!=
'BODY'
&&
parent.tagName
!=
'HTML')
404
{
//
account for any scrolled ancestors
405
pos[
0
]
-=
parent.scrollLeft;
406
pos[
1
]
-=
parent.scrollTop;
407
if
(parent.parentNode)
{ parent
=
parent.parentNode; }
408
else
{ parent
=
null
; }
409
}
410
return
{x:pos[
0
], y:pos[
1
]}
;
411
}
412
/**/
/*
**************************
413
End
414
***************************
*/
415
416
/**/
/*
***********************
417
复制和粘帖
418
************************
*/
419
function
copy()
420
{
//
复制
421
if
(searchText
!=
null
)
422
{
423
var
clipBoardContent
=
'';
424
clipBoardContent
=
searchText.value;
425
window.clipboardData.setData(
"
Text
"
,clipBoardContent);
426
}
427
}
428
429
function
paste()
430
{
//
粘帖
431
var
clipboard
=
window.clipboardData.getData('text');
432
if
(clipboard
!=
null
&&
searchText
!=
null
)
433
{
434
searchText.value
+=
clipboard;
435
}
436
}
437
/**/
/*
***********************
438
End
439
************************
*/
440
</
script
>
441
442
<
div id
=
"
QuickSearch
"
style
=
"
position:absolute;filter: alpha(opacity=100); opacity: 0.7;
"
>
443
</
div
>
444
<!--
右键菜单 Start
-->
445
<
div id
=
"
showContent
"
style
=
"
z-index: 101; left: 488px; position: absolute; top: 384px;
446
display: none; filter: alpha(opacity=100); opacity: 0.7;
"
width
=
"
100px
"
height
=
"
200px
"
>
447
<
table border
=
"
1
"
cellspacing
=
"
0
"
cellpadding
=
"
0
"
width
=
"
100px
"
style
=
"
border-collapse: collapse;
"
>
448
<
tr height
=
"
20px
"
bgcolor
=
"
#efefef
"
onclick
=
"
searchJoinType('and');
"
onmouseover
=
"
this.bgcolor='#ADD8E6';this.style.cursor='pointer';
"
449
onmouseout
=
"
this.bgcolor='#efefef'
"
>
450
<
td
>
451
并且
</
td
>
452
</
tr
>
453
<
tr height
=
"
20px
"
bgcolor
=
"
#ffffff
"
onclick
=
"
searchJoinType('or');
"
onmouseover
=
"
this.bgcolor='#ADD8E6';this.style.cursor='pointer';
"
454
onmouseout
=
"
this.bgcolor='#ffffff'
"
>
455
<
td
>
456
或者
</
td
>
457
</
tr
>
458
<
tr height
=
"
20px
"
bgcolor
=
"
#efefef
"
onclick
=
"
copy();
"
onmouseover
=
"
this.bgcolor='#ADD8E6';this.style.cursor='pointer';
"
459
onmouseout
=
"
this.bgcolor='#efefef'
"
>
460
<
td
>
461
复制
</
td
>
462
</
tr
>
463
<
tr height
=
"
20px
"
bgcolor
=
"
#ffffff
"
onclick
=
"
paste();
"
onmouseover
=
"
this.bgcolor='#ADD8E6';this.style.cursor='pointer';
"
464
onmouseout
=
"
this.bgcolor='#ffffff'
"
>
465
<
td
>
466
粘帖
</
td
>
467
</
tr
>
468
</
table
>
469
</
div
>
470
<!--
右键菜单 End
-->
posted on 2008-02-22 12:17
白开心
阅读(5541)
评论(0)
编辑
收藏
引用
所属分类:
JavaScript
只有注册用户
登录
后才能发表评论。
Powered by:
IT博客
Copyright © 白开心