<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> #ifrContent { width: 100%; height: 100%; display: block; clear: both; margin: 0; margin-top: 0px; background: #e8e8e8; border: 1px solid #888888; } .box { /* position:absolute; zoom:1; */ display:none; } .box-tl { background: url(images/QQ2008/1_1.gif) no-repeat 0 0; padding-left: 6px; zoom: 1; } .box-tc { height: 28px; background: url(images/QQ2008/1_2.gif) repeat-x 0 0; overflow: auto; color: #000; font-size: 12px; font-weight: bold; line-height: 28px; cursor: move; } .box-tr { background: url(images/QQ2008/1_3.gif) no-repeat right 0; padding-right: 4px; } .box-ml { background: url(images/QQ2008/2_1.gif) repeat-y left; padding-left: 6px; } .box-mc { /*padding:4px 10px;*/ } .box-mr { background: url(images/QQ2008/2_3.gif) repeat-y right; padding-right: 6px; } .box-bl { background: url(images/QQ2008/3_1.gif) no-repeat left; padding-left: 6px; } .box-bc { height: 28px; background: url(images/QQ2008/3_2.gif) repeat-x; } .box-br { background: url(images/QQ2008/3_3.gif) no-repeat right; padding-right: 6px; cursor: se-resize; } .box-tool { position: absolute; top: 1px; right: 6px; } .box-tool a { display: block; height: 19px; width: 31px; background: url(images/QQ2008/close.gif); } .box-tool a:hover { background-position: left -19px; } .overlayClass { background: url(images/back15_043.gif) #fff; } </style> <script type="text/javascript" src="JS/jquery.js"> </script> <script type="text/javascript" src="js/jqModal.js"> </script> <script type="text/javascript" src="JS/jqDnR.js"> </script> <script type="text/javascript"> //definde my selector for jQuery $.extend($.expr[':'],{ over100pixels : function(a){ return $(a).height() > 100; } }); function testOver100pixels(){ var $divs = $("div:over100pixels"); alert($divs[0].innerHTML) } function navigateUrl(obj){ var iframe = document.getElementById("ifrContent"); iframe.src = obj.href; return false; } String.prototype.getQuery = function(name){ var reg = new RegExp("(^|&)"+ name+"=([^&]*)(&|$)"); var r = this.substr(this.indexOf("\?")+1).match(reg); if(r != null)return unescape(r[2]); return null; }; String.prototype.trimEnd = function(str){ var reg = new RegExp("(.*)" + str + "$"); var r = this.match(reg); if(r != null)return r[1]; return this; }; $().ready(function(){ var OpenInFrame = function(hash){ var $modal = $(hash.w); var $trigger = $(hash.t); var $frame =$('iframe',$modal); var url = $trigger.attr("href"); url = (url.lastIndexOf("#") > -1) ? url.slice(0, url.lastIndexOf("#")) : url; var title = $trigger.attr("title"); if(!title || title == "") title = "系; //set the title $('.box-tc',$modal).text(title); //load the page in the iframe from the href $frame.attr("src",url); var nTop = 0; var nLeft = 0; var nWidth = url.getQuery("width") || url.getQuery("w") || $modal.css("width"); var nHeight = url.getQuery("height") || url.getQuery("h") || $modal.css("height"); var bRefresh = url.getQuery("jqmRefresh") || url.getQuery("r"); nWidth = nWidth.trimEnd("px"); nHeight = nHeight.trimEnd("px"); //figure the percentage if(nWidth > 0 ){ if (nWidth.indexOf("%") > -1) { nWidth = nWidth.trimEnd("%"); nWidth = Math.floor(parseInt($(window).width()) * (parseInt(nWidth) / 100)); } nLeft =Math.floor((parseInt($(window).width()) - parseInt(nWidth)) / 2); } if(nHeight > 0) { if(nHeight.indexOf("%") > -1) { nHeight = nHeight.trimEnd("%"); nHeight = Math.floor(parseInt($(window).height()) * (parseInt(nHeight) / 100)); } nTop = Math.floor((parseInt($(window).height()) - parseInt(nHeight)) / 2); } //alert( $(window).width() + " " + $(window).height()) //alert(nWidth + " " + nHeight) // refresh after the close modal window hash.refreshAfterClose = true; //alert(bRefresh) if(bRefresh == false || bRefresh == "false") hash.refreshAfterClose = false; $modal.show(); $modal.css({ width : 0, height : 0, opacity : 0 }).animate({ width : nWidth, height : nHeight, top : nTop, left : nLeft, marginLeft : 0, opacity : 1 },'slow'); var nTemp = parseInt($('.box-tc',$modal).css("height").trimEnd("px")) + parseInt($('.box-bc',$modal).css("height").trimEnd("px")); //alert(nTemp) $frame.css({ height : nHeight - nTemp - 2 }); $modal.resize(function(){ var tmpHeight = parseInt($(this).height()); var tmpWidth = parseInt($(this).width()); if (tmpHeight <= (nTemp + 100)) { tmpHeight = (nTemp + 100) $(this).css("height",tmpHeight); } if(tmpWidth <= 100) { $(this).css("width",100); } $frame.css({ height : tmpHeight - nTemp - 2 }); }); }; var closeFrame = function(hash){ var $modal = $(hash.w); $modal.fadeOut('2000',function(){ hash.o.remove(); //refresh parent window //alert(hash.refreshAfterClose); if(hash.refreshAfterClose == true){ window.location.href = document.location.href; } }); }; $('.box').jqm({ modal : true, overlay : 60, overlayClass : "overlayClass", trigger : '.openDialog', target : false, onShow : OpenInFrame, onHide : closeFrame }).jqDrag(".box-tc").jqResize(".box-bl"); //test jQuery data $("#btnData").click(function(){ var $data = $("#txtData"); var text = $data.data("text"); //alert(jQuery.data($data)) if(text) { if($data.val() != "" && $data.val() != text) $data.data("text",$data.val()); alert(text); }else{ $data.data("text",$data.val()); alert("sucess set the data"); } }); }); </script> </head> <body> <input type="button" value="testOver100pixels" onclick="testOver100pixels()"> <input type="text" id="txtData"> <input type="button" id="btnData" value="btnData" > <a href="dialog.htm?r=false&width=500&height=400" class="openDialog">dialog</a> <a href="http://samlin.cnblogs.com?r=true&width=500&height=400" class="openDialog">MyBlog</a> <input type="button" class="openDialog"> <a href="http://samlin.cnblogs.com" title="Sam Lin' Blog" onclick="return navigateUrl(this)">在frame中log</a> <div class="box" style="width:400px;height:550px;position:absolute;"> <div class="box-tl"> <div class="box-tr"> <div class="box-tc"> 什 </div> </div> </div> <div class="box-ml"> <div class="box-mr"> <div class="box-mc"> <iframe src="" id="ifrContent" frameborder="0"> </iframe> </div> </div> </div> <div class="box-bl"> <div class="box-br"> <div class="box-bc"> dfdf </div> </div>
</div> <div class="box-tool jqmClose"> <a href="#"></a> </div> </div> </body> </html>
From Sam Lin
Technorati 标签: Windows Live Writer
