网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 网页素材 > AJAX代码 > 正文
手把手教你制作个性化弹出提示框(附源码下载)
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 11/01/18

个性化提示框图例:       源码下载

1:纯文本提示。

2:带选择按钮的提示框。

主旨:现今的js框架已经非常成熟,这是不争的事实,但用起来多少也有些值得考虑的地方:
1:好的js框架都不小,无论怎么优化,怎么压缩,一般都有几十K;
2:要想应用js框架,首先你要去花一段时间去学习,了解它,往往这个过程还有点漫长,常常看到有的朋友问在某某框架中如何实现某些功能。
3:应用js框架,就说明你要依赖它,大多开发员只会应用框架本身提供的功能,没有的功能就显得有点吃力,除非你自己的js水平相当。
我喜欢的做法:看到好的框架中提供了一些不错的功能,我们可以学着从框架中提取你感兴趣的部分,例如prototype在展示图片的功能就相当不错,是有动画效果的,提取出来后放进你整理的js文件中,其它的冗余的js代码你并不需要。

整理后的所得:
1:js阅读能力进一步加强。
2:知道动态注册脚本的执行时间,可能发生在页面没并没有完全加载的情况下。
3:在js中应用了委托。
4:知道了<script>标记中的defer含义及用法。
5:美化网页,提高用户体验。

更新:实现OnClientClick="return confirm(''确认删除吗?'')"功能。

本来我的想法是这样的: OnClientClick="return IsDelete();",最后发现回调完后并不返回结果。

<script language ="javascript" type ="text/javascript">  
//是否删除  
var _confirm=false;  
function IsDelete()  
{  
alert(convert("确定删除吗?"),callback);  
return _confirm;  
}
  
function callback(value)  
{  
if(value=="1")  
{_confirm= true;}  
}
  
</script>

解决方案:OnClientClick=''return IsDelete(this.name);''利用__dopostback方法手动去触发点击按钮事件。不知道大家有没有更好的解决方案,这个方案还有一个问题,就是需要设置页面属性EnableEventValidation ="false",否则会报错。

//是否删除
var _confirm=false;
//要执行的事件
var sName;
function IsDelete(_sName)
{
   sName=_sName;
  alert(convert("确定删除吗?"),callback);
  return _confirm;
}

//回调方法
function callback(value)
{
  //alert(value);
  if(value=="1")
  {
    _confirm= true;
    //触发事件
    __doPostBack(sName ,null);
    
  }

}

 原因:这次我在作网页时,老感觉windows自带的那个alert功能太过简陋,想到以前学习ajax时,有一个现成的例子,就想拿过来用。代码全部加起来不过100行,用的时候发现如下问题:
第一:只支持单行文本显示。
第二:只支持文本提示,不支持带确认按钮的功能,就相当于windows的confirm。


于是从网上再搜索一个,发现以上两点功能都解决了,但有一个重要问题,遮罩层以及html元素都是write出来的,造成不能屏蔽下拉框以及flash。对于这种情况如果不动手解决的话,很难实现你要的效果,除非用js框架。

改造过程:
第一:由于之前的版本很好的解决了下拉框以及flash的屏蔽问题,所有就选用它。
第二:解决只支持单行文本的限制。原方法的提示内容是放在一个p标记中,

var txt=top.document.createElement("p");//显示提示内容的容器
   txt.style.margin="1em 0"
   txt.setAttribute("id","msgTxt");//设置id
   txt.innerHTML="<font color=\"Black\">"+str+"</font>";//设置提示内容

我改用div标记,然后对传入的文本做一个约束,以\n为分隔符,程序中把所有的\n换成html的换行符<br/>。

//把文件中的换行符换成html的<br/>
   while(str.indexOf("\n")>-1){  
      str=str.replace("\n","<br\/>");  
    }
  
var txt=top.document.createElement("div");//显示提示内容的容器
   txt.setAttribute(''id'',''divJMAlertContent'');
   txt.setAttribute("align","left");
   txt.style.width =  "60%";

   txt.innerHTML=str;//设置提示内容
   top.document.getElementById("msgDiv").appendChild(txt);//添加提示内容

发现问题:
1:换行后,文本间距过大,于是找同事帮忙终于发现了问题所在。原文中由于是显示一行文本,所有有一个行间距的设置:

msgObj.style.lineHeight = (msgh-titleheight) + "px";

修改后的代码:

//解决多行文件换行间距大的问题
msgObj.style.lineHeight = "23px";

2:当文本行数较多时,提示框显示不全所有的文本,原代码中设置了提示框的高度。

msgh=100;//提示窗口的高度

修改后的代码:

//根据文本的行数改变消息框的高度
    var iHeight=(str.split(''\n'').length+1)*23;
    msgObj.style.height =iHeight + "px";

第三:当程序中动态注册脚本后报错,就是点击一个服务器按钮后,动态执行一段代码:原代码:

string strmes;
            strmes = "<script language=''javascript''>alter(''aaa'');</script>";
            Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", strmes );

原因:在页面没有完全加载的情况下调用是document.body.appendChild。修改后的代码如下: 就是在script标记中加上defer属性,这个属性要求这段代码在页面加载完成之后再执行。

string strmes;
            strmes = "<script language=''javascript'' defer =\"defer\">firm();</script>";
            Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", strmes );

第四:增加确认和否定按钮功能。如果只是弹出一个提示框,那么这种confirm还是那么难看,决定再改造下。

1:再提示文本div下面来增加一个相关按钮的div。
2:增加一个确认按钮,一个包含空格字符串的div(为了美化),一个否定按钮。
3:对外设置一个全局变量用来表明按钮的值,如点击确认按钮返回1,否定按钮返回0。

//按钮值
var MB_value = -1;

4:设置一个委托,使用户能根据返回值调用相应的回调方法。

//委托方法
var MB_CALLBACK = null;

5:页面调用代码,需要写一个回调方法。

//提示用户是否需要登录
function firm()
{
      alert(convert("您是注册用户吗?"),callback)
}

function callback(value)
{
  if(value=="1")
  {
     //中转到登录页面
     location.href="/Login.aspx?nextUrl="+escape(window.location.href );
  }

}

增加按钮容器相关代码如下:

点击展开

第五:判断是纯显示提示文本呢,还是显示一个带确认的选择提示框。上面的方法中总会显示按钮,我们可以根据第二个参数是否存在来做为判断依据,如果没有回调方法就认为是显示文本,否则显示按钮和文本

if(MB_CALLBACK==null)
   {  
     //判断是否需要显示确认按钮
     //如果没有回高方法则认为不需要显示按钮
     return;
   }

网学推荐

免费论文

原创论文

浏览:
设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
湘ICP备09003080号