tipswindown 在asp.net中弹出层内的控件失效的解决办法
2011-11-02 00:53
561 查看
首先说一下tipswindown的使用方法吧,即使像其他jquery插件一样简单
还是写详细点吧,既然是js那么少不了导入js文件,既然是jquery插件,那么少不了jquery导入及插件样式的导入,这样说是不是很罗嗦,直接上代码
好了,导入完毕啦,开始使用,按照作者 Await 的本意 有以下几种方式
1。弹出文本信息提示: tipsWindown("此为标题","text:提示信息内容","250","150","true","","true","msg")
2。弹出页面中的某个ID的对象(一般为div):tipsWindown("标题","id:testID","300","200","true","","true","id")
3。弹出图片: tipsWindown("图片","img:图片路径","250","150","true","","true","img")
4。get加载一个.html文件(也可以是其他后缀名也可以带参数,如a.aspx?id=123之类的): tipsWindown("标题","url:get?test.html","250","150","true","","true","text");
5。加载一个页面到框架显示:tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme");
6.弹出一个不能拖动且没有遮罩背景的文本信息层: tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")
7.弹出一个不能拖动,三秒钟自动关闭的层: tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")
我用了第二种弹出页面的某个div,然后在div中的控件添加了时间,比如加了按钮,结果按钮事件不执行,基于这种情况我查看了作者的js源文件
中的对外调用的方法
更改后
当然调用的时候要多加个参数即多传个form的id
除此之外呢,还需要把插件中应用的图片下载下来放到你的项目中以加快弹出层的加载效率,修改js 源文件的这句
var templateSrc = "/Themes/default/zh-cn"; //设置loading.gif路径 ,作者写的很清晰啦,这里路径不要带"/"
因为他的路径是后面串起来的 看这句$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />"); 可见,写路径要注意了,放到images文件夹中
其他还有样式中的图片路径
background: url(/themes/default/zh-cn/images/bg.png) 0 -330px repeat-x; 路径改成自己的,我这里写的自己的
以上修改后的内容,及图片文件我都上传到了这里,有需要的可以下载,也可以自己修改
点这里去下载页
最后值的称赞的是 作者 Await 最新更新 XYTipsWindow 2.8,有兴趣的可以去用用,再次感谢 Await
还是写详细点吧,既然是js那么少不了导入js文件,既然是jquery插件,那么少不了jquery导入及插件样式的导入,这样说是不是很罗嗦,直接上代码
<script src="/utility/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="/utility/tipswindown.js" type="text/javascript"></script> <link type="text/css" href="/style/tipswindown.css" rel="stylesheet" />
好了,导入完毕啦,开始使用,按照作者 Await 的本意 有以下几种方式
1。弹出文本信息提示: tipsWindown("此为标题","text:提示信息内容","250","150","true","","true","msg")
2。弹出页面中的某个ID的对象(一般为div):tipsWindown("标题","id:testID","300","200","true","","true","id")
3。弹出图片: tipsWindown("图片","img:图片路径","250","150","true","","true","img")
4。get加载一个.html文件(也可以是其他后缀名也可以带参数,如a.aspx?id=123之类的): tipsWindown("标题","url:get?test.html","250","150","true","","true","text");
5。加载一个页面到框架显示:tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme");
6.弹出一个不能拖动且没有遮罩背景的文本信息层: tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")
7.弹出一个不能拖动,三秒钟自动关闭的层: tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")
我用了第二种弹出页面的某个div,然后在div中的控件添加了时间,比如加了按钮,结果按钮事件不执行,基于这种情况我查看了作者的js源文件
中的对外调用的方法
function tipsWindown(title,content,width,height,drag,time,showbg,cssName) { $("#windown-box").remove(); //请除内容 var width = width>= 950?this.width=950:this.width=width; //设置最大窗口宽度 var height = height>= 527?this.height=527:this.height=height; //设置最大窗口高度 if(showWindown == true) { var simpleWindown_html = new String; simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>"; simpleWindown_html += "<div id=\"windown-box\">"; simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>"; simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; simpleWindown_html += "</div>"; $("body").append(simpleWindown_html);//看这句,作者是把层放到了当前页的body上面, //可想而知,弹出层里的控件都加到了aspx页面form外 //form 外的控件肯定失效了,于是做如下改动 show = false; }
更改后
function tipsWindown(title,content,width,height,drag,time,showbg,cssName,form) { //多加了个form参数,为当前页的form的id $("#windown-box").remove(); //请除内容 var width = width>= 950?this.width=950:this.width=width; //设置最大窗口宽度 var height = height>= 527?this.height=527:this.height=height; //设置最大窗口高度 if(showWindown == true) { var simpleWindown_html = new String; simpleWindown_html = "<div id=\"windownbg\" style=\"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;z-index: 999901\"></div>"; simpleWindown_html += "<div id=\"windown-box\">"; simpleWindown_html += "<div id=\"windown-title\"><h2></h2><span id=\"windown-close\">关闭</span></div>"; simpleWindown_html += "<div id=\"windown-content-border\"><div id=\"windown-content\"></div></div>"; simpleWindown_html += "</div>"; // $("body").append(simpleWindown_html); $(form).append(simpleWindown_html);//把弹出层加到form里面,里面的控件也自然到了form里面,一切恢复正常 show = false; }
当然调用的时候要多加个参数即多传个form的id
<script type="text/javascript"> //弹出层的方法 function showDivView() { tipsWindown("认领商品前请先回答供应商几个问题", "id:showDiv", "650", "500", "true", "", "true", "id", $('form')[0]) return false; } </script>
除此之外呢,还需要把插件中应用的图片下载下来放到你的项目中以加快弹出层的加载效率,修改js 源文件的这句
var templateSrc = "/Themes/default/zh-cn"; //设置loading.gif路径 ,作者写的很清晰啦,这里路径不要带"/"
因为他的路径是后面串起来的 看这句$(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />"); 可见,写路径要注意了,放到images文件夹中
其他还有样式中的图片路径
background: url(/themes/default/zh-cn/images/bg.png) 0 -330px repeat-x; 路径改成自己的,我这里写的自己的
以上修改后的内容,及图片文件我都上传到了这里,有需要的可以下载,也可以自己修改
点这里去下载页
最后值的称赞的是 作者 Await 最新更新 XYTipsWindow 2.8,有兴趣的可以去用用,再次感谢 Await
相关文章推荐
- asp.net updatePanel easyUI控件 失效问题解决办法
- asp.net 导出excel 表之后 按钮 页面控件失效不可用,没反应的解决办法。
- asp.net 验证控件失效的解决办法
- ASP.NET 使用alert弹出对话框后,CSS样式失效,字体变大的解决方法
- VS2012使用验证控件出现[ASP.NET]WebForms UnobtrusiveValidationMode 需要 'jquery' 的 ScriptResourceMapping。請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)。的解决办法。
- Asp.net页面使用showModalDialog时Postback弹出新页面解决办法
- asp.net控件img总与table之间有白边的解决办法
- validateRequest="false" 在asp.net 4.0中失效的解决办法
- asp.net中ListView控件动态绑定数据源后,使用DataPager出现错误的原因及解决办法
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- 常量,字段,构造方法 调试 ms 源代码 一个C#二维码图片识别的Demo 近期ASP.NET问题汇总及对应的解决办法 c# chart控件柱状图,改变柱子宽度 使用C#创建Windows服务 C#服务端判断客户端socket是否已断开的方法 线程 线程池 Task .NET 单元测试的利剑——模拟框架Moq
- 关于ASp.net中的session失效问题的解决办法之一
- 关于asp.net3.5(S2008)中ajaxcontroltoolkit控件不能使用的解决办法
- ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题的起因及解决办法
- asp.net验证控件不起作用的解决办法
- ASP.NET jquery.uploadify上传控件中文乱码解决办法
- ASP.NET 使用alert弹出对话框后,CSS样式失效,字体变大的解决方法
- IE7,IE8,上传文件控件input file和asp.net FileUpload控件无法获取完整路径的解决办法
- ASP.NET 使用alert弹出对话框后,CSS样式失效,字体变大的解决方法
- Asp.net中与codePage="936"有关的css失效等奇怪问题的解决办法(原创)