jQuery Ui.Layout.js——PrintArea.js学习

2025-02-12 技术教程

最近在学习jQuery、想做一个自己的页面框架、但是自己的美工水平实在不敢恭维。于是考虑到Ext什么的、但是Ext呢、从来没有接触过、就选择了jQuery、找了半天、也瞎摸了半天、英文水平不好(单词量基本上都是java语言或者Oralce语言的关键字、而且还不全)、学编程确实很吃力、官网上的东西如同天书、如果想好好深入的话、确实该好好学学英文了！

jQuery不光是提供Layout插件、还有很多很多的插件、csdn上搜索一下"jQuery插件"。出来的前几页标题基本一致~~~！！！非常之无语、希望csdn能对搜索引擎这块做做优化吧~~~！！！从官方网站(http://jqueryui.com/download)上下载、今天已经是2011年7月7号、一个特殊的日子、不是农历的七夕、而是"77事变"~~~、怀恋下革命先烈、你们永垂不朽！jQueryUI的版本已经发展到1.8.14了！发展快、很快、相当快！

OK、下载好过后、找到demos文件夹、点击里面的index.html页面、你就可以看到官网提供的UI示例了！附带示例代码的、推荐使用Mozilla FireFor浏览器查看、点击Open demo in a new window然后在新的窗口中查看源代码、你会发现、有一个demos.css文件、它在你点击View Source 的时候没有的！如果你没有引用这个css文件、后果很严重、你会发现你跟示例一模一样的代码、就是出不来示例中的效果！用火狐还有一个好处就是、当你找不到某个页面引用文件的时候、只需要在查看页面源代码的时候、点击文件引用地址就能够看到里面的代码、复制一下、创建一个名称相同的文件、粘帖进去就OK了！里面的示例代码都有、我就不贴出来了！

然后在看看Layout~~~！！！这个东西需要单独下载、在另一个网站里面(http://layout.jquery-dev.net/demos.cfm)。点击DEMOC导航、然后会看到很多超链接、点击这些超链接你能看到Layout设计出的框架了、有很多超链接就意味着有很多框架~~~！！！如果你对页面布局非常熟悉的话、可以直接修改源代码、来达到你想要的效果！需要的js可以点击导航DOWNLOADS去下载、看看示例、在看看示例的页面源代码你就知道要什么js跟css了！

另外、我遇到一个问题、就是在火狐上能运行、但是到IE就出不了效果~~~这是一件很头大的事情、把新建jsp页面的时候生成的DOCTYPE节点增加点东西就OK了、加上：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/strict.dtd"> 这个牵扯到协议方面的东西、我不是很清楚！

其中头部的falsh、我找了好久、硬是没有找到满意的、！如果大家有好的falsh素材请告诉我一下！

然后iframe控件对应的就是jQuery UI其他插件了！

主题编辑区域：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><basehref="<%=basePath%>"><title>jQueryUIDialog-Modalform</title><linktype="text/css"href="js/themes/base/jquery.ui.all.css"rel="stylesheet"/><scripttype="text/javascript"src="js/jquery-1.4.2.js"></script><scripttype="text/javascript"src="js/external/jquery.bgiframe-2.1.1.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.core.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.widget.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.mouse.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.button.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.draggable.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.position.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.resizable.js"></script><scripttype="text/javascript"src="js/ui/jquery.ui.dialog.js"></script><scripttype="text/javascript"src="js/ui/jquery.effects.core.js"></script><linktype="text/css"href="js/demos.css"rel="stylesheet"/><styletype="text/css">body{font-size:62.5%;}label,input{display:block;}input.text{margin-bottom:12px;width:95%;padding:.4em;}fieldset{padding:0;border:0;margin-top:25px;}h2{font-size:1.2em;margin:.6em0;}div#users-contain{width:350px;margin:20px0;}div#users-containtable{margin:1em0;border-collapse:collapse;width:100%;}div#users-containtabletd,div#users-containtableth{border:1pxsolid#eee;padding:.6em10px;text-align:left;}.ui-dialog.ui-state-error{padding:.3em;}.validateTips{border:1pxsolidtransparent;padding:0.3em;}</style><scripttype="text/javascript">$(function(){//aworkaroundforaflawinthedemosystem(http://dev.jqueryui.com/ticket/4375),ignore!$("#dialog").dialog("destroy");varname=$("#name"),email=$("#email"),password=$("#password"),allFields=$([]).add(name).add(email).add(password),tips=$(".validateTips");functionupdateTips(t){tips.text(t).addClass('ui-state-highlight');setTimeout(function(){tips.removeClass('ui-state-highlight',1500);},500);}functioncheckLength(o,n,min,max){if(o.val().length>max||o.val().length<min){o.addClass('ui-state-error');updateTips("Lengthof"+n+"mustbebetween"+min+"and"+max+".");returnfalse;}else{returntrue;}}functioncheckRegexp(o,regexp,n){if(!(regexp.test(o.val()))){o.addClass('ui-state-error');updateTips(n);returnfalse;}else{returntrue;}}$("#dialog-form").dialog({autoOpen:false,height:500,width:450,modal:true,buttons:{'Createanaccount':function(){varbValid=true;allFields.removeClass('ui-state-error');bValidbValidbValid=bValid&&checkLength(name,"username",3,16);bValidbValidbValid=bValid&&checkLength(email,"email",6,80);bValidbValidbValid=bValid&&checkLength(password,"password",5,16);bValidbValidbValid=bValid&&checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Usernamemayconsistofa-z,0-9,underscores,beginwithaletter.");//Fromjquery.validate.js(byjoern),contributedbyScottGonzalez:http://projects.scottsplayground.com/email_address_validation/bValidbValidbValid=bValid&&checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg.ui@jquery.com");bValidbValidbValid=bValid&&checkRegexp(password,/^([0-9a-zA-Z])+$/,"Passwordfieldonlyallow:a-z0-9");if(bValid){$('#userstbody').append('<tr>'+'<td>'+name.val()+'</td>'+'<td>'+email.val()+'</td>'+'<td>'+password.val()+'</td>'+'</tr>');$(this).dialog('close');}},Cancel:function(){$(this).dialog('close');}},close:function(){allFields.val('').removeClass('ui-state-error');}});$('#create-user').button().click(function(){$('#dialog-form').dialog('open');});});</script></head><body><divclass="demo"><divid="dialog-form"title="Createnewuser"><pclass="validateTips">所有字段均为必填.</p><form><fieldset><labelfor="name">姓名</label><inputtype="text"name="name"id="name"class="textui-widget-contentui-corner-all"/><labelfor="email">Email</label><inputtype="text"name="email"id="email"value=""class="textui-widget-contentui-corner-all"/><labelfor="password">密码</label><inputtype="password"name="password"id="password"value=""class="textui-widget-contentui-corner-all"/></fieldset></form></div><divid="users-contain"class="ui-widget"><h2>现有用户:</h2><tableid="users"class="ui-widgetui-widget-content"><thead><trclass="ui-widget-header"><th>姓名</th><th>Email</th><th>密码</th></tr></thead><tbody><tr><td>JohnDoe</td><td>john.doe@example.com</td><td>johndoe1</td></tr></tbody></table></div><buttonid="create-user">创建新用户</button></div><divclass="demo-description"><p>Useamodaldialogtorequirethattheuserenterdataduringamulti-stepprocess.Embedformmarkupinthecontentarea,setthe<code>modal</code>optiontotrue,andspecifyprimaryandsecondaryuseractionswiththe<code>buttons</code>option.</p></div></body></html>其他部分就不贴了~~~！！！反正都是官方的示例、在来看看PrintArea.js对打印的支持吧：在主页面(index.jsp)中

<prename="code"class="html"><scripttype="text/javascript">functionPrintDiv(){$("#myPrintArea").printArea();}</script><%--主体编辑区域--%>

<divclass="paneui-layout-center"id="myPrintArea"><iframeid="mainFrame"name="mainFrame"class="ui-layout-center"width="100%"height="100%"frameborder="0"scrolling="auto"src="Droppable/Modal_form.jsp"></iframe><inputtype="button"value="打印"onclick="PrintDiv();"/></div>

设置你需要打印部分的id、然后：

<prename="code"class="html">$("#myPrintArea").printArea();

注意、需要引用：

<scripttype="text/javascript"src="js/jquery.PrintArea.js"></script>

这个js、在官网上有下载资源：http://plugins.jquery.com/project/PrintArea

点击View all releases到里面去选择版本！我选的是2.1版的、要注意、看清楚它的下载链接、狗日的小得老火、我找半天没找着！

在这里给大家贴出来jquery.PrintArea.js_4.txt。

看看效果吧、有图有真相：

其中头部由于没有好的falsh就不弄出来丢人了、底部也是一样！！！