博客园_独孤雁

window.showModalDialog 的使用方法

2012-02-04T09:12:00Z

以前为了浏览器的兼容性，在开发时从未使用过 window.showModalDialog ，从 FF3 开始已经支持 window.showModalDialog （FF2不支持此方法），GOOGLE的浏览器也是支持的（非模式窗体，与open方法打开的窗体一样），今天研究了一下具体的使用方法，如下：

【注意】
在IE下，弹出的模式窗体中，如果存在表单，则在提交表单时，会自动弹出一个新的窗口。
解决方法：
在 <head> </head>中增加如下标签即可
<base target="_self" />

【父窗体 1.html 】

<html>
<head>
<title>ParentWindow</title>
<script>
var a = new Array;
a[0] = 1;
a[1] = 4;

dialogwidth = 450;
dialogheight = 300;

function openModal()
{
dialogleft   = ( window.screen.width - dialogwidth ) / 2;
dialogtop    = ( window.screen.height - dialogheight ) / 2;
//document.getElementById('foo').innerHTML = "HELLO";
var r = window.showModalDialog('2.html',
      window.self, // 此参数可为任意类型 window.self 可使子窗体具备操作父窗体的功能
      "center:0; dialogleft:"+ dialogleft +"px;dialogtop: "+ dialogtop +"px; dialogwidth: "+ dialogwidth +"px; dialogheight: "+ dialogheight +"px; resizable: yes; scroll: yes;");
//alert(r);
if(r==null || r=="undefined"){ // 判断是否异常关闭（点击窗体“关闭”按钮）
    document.getElementById('foo').innerHTML = "NULL";
}else{
    document.getElementById('foo').innerHTML = r;
      // window.location.reload(true); // 刷新窗体
}
//alert(dialogwidth);
}

// 在子窗体中调用此函数
function parentFunc(param){
    //alert(param); // firefox 中加入此句后，模式窗口将不再起作用（即可点击操作父窗体）
    document.getElementById('foo').innerHTML = param;
}
</script>
</head>

<body>
<input type="button" value="Open modal dialog" onclick="openModal();">
<div>
<p>Modal dialog return value:</p>
<p id="foo">
</div>
</body>
</html>

【模式窗体 2.html 】

<html>
<head>
<title>ModalDialog</title>

<script type="text/javascript" src="http://blog.163.com/shihua_23/blog/1.js"></script>

</head>
<body>
<input id="foo" type="text" value="Dialog value...">
<input type="button" value="Close" onclick="closeModalDialog();">
<a href="http://blog.163.com/shihua_23/blog/safe.html">link</a>
</body>
</html>

【js 代码 1.js 】

document.write("Modal dialog got argument: " + window.dialogArguments);
//alert(window.dialogArguments); // 获得参数。注意：在 firefox 中，点击 F5 刷新模式窗体后，此参数将丢失，IE下不会丢失
//alert(window.dialogArguments.dialogwidth);
//window.dialogArguments.dialogwidth = 1000; // 给父窗体中全局变量赋值
window.dialogArguments.parentFunc(window.dialogArguments.dialogwidth); // 调用父窗体函数
//window.dialogArguments.location.reload(true); // 刷新父窗体

function closeModalDialog(){
    //alert(window.dialogArguments);
    window.returnValue = document.getElementById('foo').value; // window.returnValue 为模式窗体的返回值
    window.close();
}

特别注意：
在FF3中，不能将 1.js 的代码放在 2.html 中，例如：

<html>
<head>
<title>ModalDialog</title>

<script type="text/javascript" >
document.write("Modal dialog got argument: " + window.dialogArguments);
//alert(window.dialogArguments); // 获得参数。注意：在 firefox 中，点击 F5 刷新模式窗体后，此参数将丢失，IE下不会丢失
//alert(window.dialogArguments.dialogwidth);
//window.dialogArguments.dialogwidth = 1000; // 给父窗体中全局变量赋值
window.dialogArguments.parentFunc(window.dialogArguments.dialogwidth); // 调用父窗体函数
//window.dialogArguments.location.reload(true); // 刷新父窗体

function closeModalDialog(){
    //alert(window.dialogArguments);
    window.returnValue = document.getElementById('foo').value; // window.returnValue 为模式窗体的返回值
    window.close();
}
</script>

</head>
<body>
<input id="foo" type="text" value="Dialog value...">
<input type="button" value="Close" onclick="closeModalDialog();">
<a href="http://blog.163.com/shihua_23/blog/safe.html">link</a>
</body>
</html>

理由：在 FF3 中，这样写会导致模式窗体自动刷新一次，从而使的 window.dialogArguments 变量重置为null（FF3不支持模式窗体的F5刷新）

本文链接

【jquery插件】搜索文本高亮

2012-01-31T11:01:00Z

在页面上搜索某个关键字，使关键词高亮；

高亮样式自己可以重新定义：

例如：span.highlight { color:#F00; font-weight:700}

使用高亮：

$(‘#fancy-text’).highLight();//清除高亮

$(‘#fancy-text’).highLight(“mode”);//显示高亮

查看demo：http://www.css88.com/demo/highlight/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【jquery插件】搜索文本高亮》

本文链接

【jQuery插件】回到顶部

2012-01-31T10:59:00Z

最近写了个回到顶部的插件，调用方法的

$(“.go-top”).goToTop({});

$(window).bind(‘scroll resize’,function(){

$(“.go-top”).goToTop({});

});

当然可以传一些参数及参数的默认值：

pageWidth:950,//页面宽度

pageWidthJg:10,//按钮和页面的间隔距离

pageHeightJg:50,//按钮和页面底部的间隔距离

startline:20,//出现回到顶部按钮的滚动条scrollTop距离

duration:200,//回到顶部的速度时间

showBtntime:100,//显示\隐藏回到顶部按钮的速度时间

targetObg:”body”//目标位置

演示地址：http://www.css88.com/demo/goToTop/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【jQuery插件】回到顶部》

本文链接

【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断

2012-01-31T10:54:00Z

PS:此插件存在性能问题，请慎用！敬请期待新插件，预计6月发布！

项目中有一个类似于新浪腾讯微博文本域字符数判断，就是想腾讯微博和新浪微博那样，判断文本框中最多嫩输入140个字，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。如果超出就提示！并且实时提示可是输入的文字数。

去年也曾经写过类似一个脚本（http://www.css88.com/archives/2027），只是将上次的代码封装成了jquery插件，做了一点点的性能优化，主要是在文本域获取焦点的时候触发setInterval，文本域失去焦点就clearInterval。
调用方式：

1//默认的参数 
2$(".chackTextarea").chackTextarea({ 
3chackNum : 140,//限定字数，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。 
4chackObj:".chackTextarea-area", //文本域的hook 
5chackNumObj :".chackTextarea-num",//提示文字的hook 
6chackBtn:".chackTextarea-btn", //按钮的hook 
7disabledClass:"chackTextarea-disabled",//按钮disabled状态下的样式 
8errorClass:"chackTextarea-errortxt" //超过限定字符提示文字的样式 
9});

注意disabledClass:”chackTextarea-disabled”和errorClass:”chackTextarea-errortxt”两个参数是样式名，不带“.”；

查看demo：http://www.css88.com/demo/chackTextarea/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断》

本文链接

【jQuery插件】insertContent-在文本框光标位置插入内容并选中

2012-01-31T10:52:00Z

在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。

IE下可以通过document.selection.createRange();获取光标位置，代码也很简单：

1if (document.selection) { 
2    pos = document.selection.createRange(); 
3    pos.text = "要插入的字符串"; 
4}

Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。

1if (obj.selectionStart || obj.selectionStart == '0') { //obj是文本框对象 
2    var startPos = obj.selectionStart; 
3    var endPos = obj.selectionEnd; 
4    obj.value = obj.value.substring(0, startPos) + "要插入的字符串" + obj.value.substring(endPos, obj.value.length); 
5    obj.selectionStart = startPos + myValue.length; 
6    obj.selectionEnd = startPos + myValue.length; 
7} else { 
8    obj.value += "要插入的字符串"; 
9}

这些可以查看Javascript在光标位置插入内容；

现在微博很火，我们可以尝试一下插入话题，你点击话题，在光标位置就会插入：#请在这里输入自定义话题#，注意，“请在这里输入自定义话题”这几文字是被选中，你可以直接敲打键盘编辑文本。
在火狐下先对比较简单，我们只要在上面的代码中插入一句就可以了：
obj.setSelectionRange(startPos-t,obj.selectionEnd+t);
t是根据数值选中插入文本内容两边的边界数值，如：0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。
但是在ie下比较麻烦，要设置光标的位置，然后选中文字。

完整代码如下：

01/** 
02 * Created by 愚人码头 . 
03 * User: 愚人码头 
04 * Date: 11-5-19 
05 * Time: 上午10:24 
06 * 更多查看http://www.css88.com/archives/3627 
07 */
08//在光标位置插入内容 
09(function($) { 
10    $.fn.extend({ 
11        insertContent: function(myValue, t) { 
12            var $t = $(this)[0]; 
13            if (document.selection) { //ie 
14                this.focus(); 
15                var sel = document.selection.createRange(); 
16                sel.text = myValue; 
17                this.focus(); 
18                sel.moveStart('character', -l); 
19                var wee = sel.text.length; 
20                if (arguments.length == 2) { 
21                    var l = $t.value.length; 
22                    sel.moveEnd("character", wee + t); 
23                    t < = 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length); 
24  
25                    sel.select(); 
26                } 
27            } else if ($t.selectionStart || $t.selectionStart == '0') { 
28                var startPos = $t.selectionStart; 
29                var endPos = $t.selectionEnd; 
30                var scrollTop = $t.scrollTop; 
31                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length); 
32                this.focus(); 
33                $t.selectionStart = startPos + myValue.length; 
34                $t.selectionEnd = startPos + myValue.length; 
35                $t.scrollTop = scrollTop; 
36                if (arguments.length == 2) { 
37                    $t.setSelectionRange(startPos - t, $t.selectionEnd + t); 
38                    this.focus(); 
39                } 
40            } 
41            else { 
42                this.value += myValue; 
43                this.focus(); 
44            } 
45        } 
46    }) 
47})(jQuery);

调用方式：

`1`	`$(文本域选择器).insertContent("插入的内容");`

`2`	`$(文本域选择器).insertContent("插入的内容"，数值);` `//根据数值选中插入文本内容两边的边界`

演示地址：http://www.css88.com/demo/insertContent/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《【jQuery插件】insertContent-在文本框光标位置插入内容并选中》

本文链接

jQuery图片居中裁切效果

2012-01-31T10:45:00Z

转自“http://www.css88.com/demo/VMiddleImg/#”

大家在做相册列表的时候可能会遇到这样的情况，用户上传的图片大小不一，长宽不一，然而需求的列表却是固定宽高的如图：

此脚本拟达到以下需求
1.当图片高或宽超过父容器时截取中间部分显示。
2.当图片宽高小于父容器时，居中显示。
查看demo:http://blog.dmtuan.com/demo/zmnImgCenter/demo.html

初次写脚本，请尽量拍砖。

脚本：

^?[Copy to clipboard]View Code JAVASCRIPT

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
32
33
34
35
36
37
38
39
40
41
42

//调用
$(function(){
zmnImgCenter($(".t-img"));//JQ的dom
});
//图片居中
function zmnImgCenter(obj){
obj.each(function(){
var $this=$(this);
var objHeight=$this.height();//图片高度
var objWidth=$this.width();//图片宽度
var parentHeight=$this.parent().height();//图片父容器高度
var parentWidth=$this.parent().width();//图片父容器宽度
var ratio=objHeight/objWidth;
if(objHeight>parentHeight && objWidth>parentWidth){//当图片宽高都大于父容器宽高
if(objHeight>objWidth) {//赋值宽高
$this.width(parentWidth);
$this.height(parentWidth*ratio);
}
else {
$this.height(parentHeight);
$this.width(parentHeight/ratio);
}
objHeight=$this.height();//重新获取宽高
objWidth=$this.width();
if(objHeight>objWidth) {
$(this).css("top",(parentHeight-objHeight)/2);
//定义top属性
}
else
{
//定义left属性
$(this).css("left",(parentWidth-objWidth)/2);
}
}
else{//当图片宽高小于父容器宽高
if(objWidth>parentWidth){//当图片宽大于容器宽，小于时利用css text-align属性居中
$(this).css("left",(parentWidth-objWidth)/2);
}
$(this).css("top",(parentHeight-objHeight)/2);
}
})
}

本文链接

【jQuery插件】autoTextarea-文本框根据输入内容自适应高度的实例页面

2012-01-31T10:42:00Z

转自“http://www.css88.com/demo/autoTextarea/”

CSS代码：

.chackTextarea-area{ line-height: 20px; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial;resize: none; padding: 0;border: 1px solid #CDCDCD; width: 400px; height: 40px}

JS代码，默认的参数及调用：

//默认的参数
$(".chackTextarea-area").autoTextarea({
maxHeight:220,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度
minHeight:$(this).height()//默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示
})

本文链接

【转】9个有用的jQuery日历和网页设计师的日期选择器插件

2011-12-20T07:50:00Z

事件日历和日期选择器是是我们开发当中经常遇到的问题，这个时候我们就需要用jquery插件来实现，昨天我在做项目的时候，遇到了个问题就是如何显示倒计时问题，我这个时候就用jquery插件解决的，今天给大家分享9个其他的时间选择器插件

1。FullCalendar

FullCalendar是一个著名的jQuery日历插件，它提供了拖和下降功能，与谷歌日历整合，并能够通过JSON获取事件等功能。设计人员可以轻松定制外观和感觉的日历，而开发人员可以利用用户触发的事件暴露挂钩。

2. Astonishing iCal-like Calendar

这是一个使用jQuery和CSS来构建一个iPhone风格的日历应用程序的教程。

3 jQuery UI的DatePicker

jQuery UI的DatePicker的是一个高度可配置的插件，他添加到您的网页的日期选择器的功能。您可以自定义的日期格式和语言，限制了可选择的日期范围，并容易添加按钮和其他导航选项。

4。jMonthCalendar

jMonthCalendar支持全月日历和事件。这个插件的有趣的部分是它允许开发者开发互动的日历。

5 日期选择器。

MIT和GPL许可证下发布的日期选择器是一个jQuery日历插件。它有很多的选项和功能。例如，你可以有多个日历组件，标记日期作为特殊的日子，很容易通过CSS自定义，并允许不同的选择模式。所有这些都可以轻松配置。

6。jQuery的周历插件

jQuery的周历是一个插件，其中将包括一个Web应用程序中的周历。事件可以作为一个数组或JSON提供，这些事件可以随意拖动，下拉并调整其大小。有很多的选项和事件的回调，可以参考通过官方插件页面。

7 简单的jQuery日期选择器插件。

这是一个非常简单的的日期选择器插件。但是，它提供了很多有益和必要的日期选择器功能。例如，您可以轻松地浏览，以月和年通过下拉选择框下降。

8jQuery的日期选择器。

这是一个干净，不显眼的jQuery插件，它允许你轻松地添加日期选择器，Web窗体和网页。有很多这个简单的插件的配置和选项。如何使用这个插件的更多例子，你可以参考插件页面。

9。jQuery的互动日期范围选择器

这个强大的日期范围选择器是一个修改后的版本的jQuery UI的DatePicker组件。它有一个更快的日期选择预设日期/范围和平稳过渡的清单。最新版本使用了jQuery UI 1.7和jQuery UI CSS框架。随着jQuery UI的升级，用户现在可以切换日历主题容易。

作者：创想中国(羲闻)

出处："http://www.cnblogs.com/web8cn/

欢迎任何形式的转载，但请务必注明出处。

分享到： QQ空间新浪微博腾讯微博人人网更多 0

本文链接

【转】C# 中文URL编码

2011-08-14T02:03:00Z

正在研究一个程序，输入一个关键字，能够把这个关键字发送到Google，yahoo等搜索引擎，进行搜索，然后打开结果网页。原理很简单。比如在Google搜索China，搜索结果页面的URL就是“http://www.google.com/search?hl=zh-CN&q=China&lr=”。只要替换红颜色的内容，就可以按照不同的关键字搜索。

但是如果关键字是中文，就会出现问题。比如在google搜索“中国”，Url是“http://www.google.com/search?hl=zh-CN&newwindow=1&q=%E4%B8%AD%E5%9B%BD&lr=”。汉字“中国”被按照UTF-8的格式进行编码。

不仅汉字进行编码，一些特殊字符也会进行编码。比如搜索“C#”，URL是“http://www.google.com/search?hl=zh-CN&newwindow=1&q=C%23&lr=”。

一般来说，国外的网站都是按照UTF-8编码，而“百度”是按照“GB2312”进行编码的。比如搜索“中国”，URL是“http://www.baidu.com/s?wd=%D6%D0%B9%FA&cl=3”

我们对比一下：C#中国的编码

编码结果网站
UTF-8 C%23%E4%B8%AD%E5%9B%BD Google
GB2312 C%23%D6%D0%B9%FA BaiDu

总结：
UTF-8中，一个汉字对应三个字节，GB2312中一个汉字占用两个字节。
不论何种编码，字母数字都不编码，特殊符号编码后占用一个字节。

//按照UTF-8进行编码
string tempSearchString1 = System.Web.HttpUtility.UrlEncode("C#中国");
//按照GB2312进行编码
string tempSearchString2 = System.Web.HttpUtility.UrlEncode("C#中国",System.Text.Encoding.GetEncoding("GB2312"));

//--------------------------------------------------------------------------------------------------------------

【转】ASP.NET中c#的URL编码处理
要解决的问题:
将下面的URL作为一个参数传到其他的页面
1 http://domain/de.apx?uid=12&page=15
2 url后面的参数中出现汉字等,如: ....aspx?title=起重机
在出现上面的情况的时候,必须经过一个RUL编码和解码的过程,否则会出现错误.

代码如下:

//传值
string temp = " <a href='Add.aspx?url=" +Server.UrlEncode( skin.Page.Request.Url.AbsoluteUri )+ "&title=" +Server.UrlEncode( skin.Page.Header.Title )+ "'>添加到收藏夹</a>");

//在另外一个文件中取从上面传的值
if (Request.QueryString["url"] != null)
{
    string url = Server.UrlDecode(Request.QueryString["url"].ToString());
    this.txtAddress.Text = url;
}
if (Request.QueryString["title"] != null)
{
    string title = Server.UrlDecode(Request.QueryString["title"].ToString());
    this.txtTitle.Text = title;
}

//-----------------------------------------------

URL编码对照表

1、string s = System.Web.HttpUtility(byte[] data);

这里的s即为转换出来的URL编码，需要注意的是这里的byte数组必须是具有ASCII意义的数组，由string通过System.Text.Encoding.Default.getBytes(str.ToCharArray());是不正确的，不能正确转义！

2、根据URL编码规则写个小程序

******* string UrlEncode(byte[] byt)
{
     string desstr = "";
     for(int i=0; i<byt.Length;i++)
     {
      desstr += "%";
      desstr += byt[i].ToString("X2");
     }
     return desstr;
}

以下是URL编码对照表：

backspace %08
tab       %09
linefeed %0A
creturn   %0D
space     %20
!         %21
"         %22
#         %23
$         %24
%         %25
&         %26
'         %27
(         %28
)         %29
*         %2A
+         %2B
,         %2C
-         %2D
.         %2E
/         %2F
0         %30
1         %31
2         %32
3         %33
4         %34
5         %35
6         %36
7         %37
8         %38
9         %39
:         %3A
;         %3B
<         %3C
=         %3D
>         %3E
?         %3F
@         %40
A         %41
B         %42
C         %43
D         %44
E         %45
F         %46
G         %47
H         %48
I         %49
J         %4A
K         %4B
L         %4C
M         %4D
N         %4E
O         %4F
P         %50
Q         %51
R         %52
S         %53
T         %54
U         %55
V         %56
W         %57
X         %58
Y         %59
Z         %5A
[         %5B
\         %5C
]         %5D
^         %5E
_         %5F
`         %60
a         %61
b         %62
c         %63
d         %64
e         %65
f         %66
g         %67
h         %68
i         %69
j         %6A
k         %6B
l         %6C
m         %6D
n         %6E
o         %6F
p         %70
q         %71
r         %72
s         %73
t         %74
u         %75
v         %76
w         %77
x         %78
y         %79
z         %7A
{         %7B
|         %7C
}         %7D
~         %7E
￠         %A2
￡         %A3
￥         %A5
|         %A6
§         %A7
?         %AB
?         %AC
ˉ         %AD
o         %B0
±         %B1
a         %B2
,         %B4
μ         %B5
?         %BB
?         %BC
?         %BD
?         %BF
A`         %C0
A′         %C1
A^         %C2
A~         %C3
A¨         %C4
A°         %C5
?         %C6
C?         %C7
E`         %C8
E′         %C9
E^         %CA
E¨         %CB
I`         %CC
I′         %CD
I^         %CE
I¨         %CF
D         %D0
N~         %D1
O`         %D2
O′         %D3
O^         %D4
O~         %D5
O¨         %D6
?         %D8
U`         %D9
U′         %DA
U^         %DB
U¨         %DC
Y′         %DD
T         %DE
?         %DF
a`         %E0
a′         %E1
a^         %E2
a~         %E3
a¨         %E4
a°         %E5
?         %E6
c?         %E7
e`         %E8
e′         %E9
e^         %EA
e¨         %EB
i`         %EC
i′         %ED
i^         %EE
i¨         %EF
e         %F0
n~         %F1
o`         %F2
o′         %F3
o^         %F4
o~         %F5
o¨         %F6
÷           %F7
?            %F8
u`           %F9
u′           %FA
u^           %FB
u¨         %FC
y′           %FD
t            %FE
y¨         %FF

本文链接

ASP.NET提供了三种后台输出JS的方式

2011-08-02T03:09:00Z

ASP.NET提供了三种后台输出JS的方式：

一、后台输出已有js文件

首先创建 js文件testjs.js

以下是代码片段：
　if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "keys"))//判断keys是否已注册过
{
Page.ClientScript.RegisterClientScriptInclude("keys", "testjs.js");
}

二、输出js代码块

以下是代码片段：
　string scriptstrs = "";//此处只作为演示，如代码需多次拼接应采用StringBuilder方式
scriptstrs += "function test(str)";
scriptstrs+="{alert(str);}";
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "keys"))
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "keys", scriptstrs, true);
}

三、输出一次性使用的js代码

以下是代码片段：
　string scriptstrs = "";
if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(),"welcome"))
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "welcome", scriptstrs);
}

此外，运用Response.Write(" "); 方式也可输出简单js代码，但我个人不提倡采用此种方式。因为在以前开发中遇到有些情况下此种方式会导致弹出提示信息后页面字号改变的现象，所以安全起见建议采用上述三种方式。

本文链接