最近在学习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了、加上：" http://www.w3.org/TR/html4/strict.dtd"> 这个牵扯到协议方面的东西、我不是很清楚！

   
   
   
   
    
    
    
    
    
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
    2. 
    
    
    
    
  2. <%   
    3. 
    
    
    
    
  3. String path = request.getContextPath();   
    4. 
    
    
    
    
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    5. 
    
    
    
    
  5. %>   
    6. 
    
    
    
    
  6.    
    7. 
    
    
    
    
  7. >   
    8. 
    
    
    
    
  8. <html>   
    9. 
    
    
    
    
  9.     <head>   
    10. 
    
    
    
    
  10.         <title>UI测试title>   
    11. 
    
    
    
    
  11.         <link type="text/css" rel="stylesheet" href="js/layout-default-latest.css" />   
    12. 
    
    
    
    
  12.         <style type="text/css">   
    13. 
    
    
    
    
  13.             html, body {   
    14. 
    
    
    
    
  14.                 background: #666;   
    15. 
    
    
    
    
  15.                 width:      100%;   
    16. 
    
    
    
    
  16.                 height:     100%;                      
    17. 
    
    
    
    
  17.                 padding:    0;   
    18. 
    
    
    
    
  18.                 margin:     0;   
    19. 
    
    
    
    
  19.                 overflow:   auto; /* when page gets too small */   
    20. 
    
    
    
    
  20.             }   
    21. 
    
    
    
    
  21.             #container {   
    22. 
    
    
    
    
  22.                 background: #999;   
    23. 
    
    
    
    
  23.                 height:     100%;   
    24. 
    
    
    
    
  24.                 margin:     0 auto;   
    25. 
    
    
    
    
  25.                 width:      100%;   
    26. 
    
    
    
    
  26.                 max-width:  900px;   
    27. 
    
    
    
    
  27.                 min-width:  700px;   
    28. 
    
    
    
    
  28.                 _width:     700px; /* min-width for IE6 */   
    29. 
    
    
    
    
  29.             }   
    30. 
    
    
    
    
  30.             .pane {   
    31. 
    
    
    
    
  31.                 display:    none; /* will appear when layout inits */   
    32. 
    
    
    
    
  32.             }   
    33. 
    
    
    
    
  33.         style>   
    34. 
    
    
    
    
  34.         <script type="text/javascript" src="js/jquery-1.4.2.js" >script>   
    35. 
    
    
    
    
  35.         <script type="text/javascript" src="js/jquery-latest.js">script>   
    36. 
    
    
    
    
  36.         <script type="text/javascript" src="js/jquery-ui-latest.js">script>   
    37. 
    
    
    
    
  37.         <script type="text/javascript" src="js/jquery.layout-latest.js">script>   
    38. 
    
    
    
    
  38.         <script type="text/javascript" src="js/jquery.PrintArea.js" >script>   
    39. 
    
    
    
    
  39.         <script type="text/javascript">   
    40. 
    
    
    
    
  40.             $(document).ready(function () {   
    41. 
    
    
    
    
  41.                 $('#container').layout();   
    42. 
    
    
    
    
  42.             });   
    43. 
    
    
    
    
  43.             function PrintDiv(){   
    44. 
    
    
    
    
  44.                 $("#myPrintArea").printArea();   
    45. 
    
    
    
    
  45.             }   
    46. 
    
    
    
    
  46.         script>   
    47. 
    
    
    
    
  47.     head>   
    48. 
    
    
    
    
  48.     <body>   
    49. 
    
    
    
    
  49.     <div id="container">   
    50. 
    
    
    
    
  50.        
    51. 
    
    
    
    
  51.         <%-- 主体编辑区域 --%>   
    52. 
    
    
    
    
  52.         <div class="pane ui-layout-center" id="myPrintArea">   
    53. 
    
    
    
    
  53.             <iframe id="mainFrame" name="mainFrame" class="ui-layout-center"   
    54. 
    
    
    
    
  54.                 width="100%" height="100%" frameborder="0" scrolling="auto"   
    55. 
    
    
    
    
  55.                 src="Droppable/Modal_form.jsp">   
    56. 
    
    
    
    
  56.             iframe>   
    57. 
    
    
    
    
  57.             <input type="button" value="打印" onclick="PrintDiv();" />   
    58. 
    
    
    
    
  58.         div>   
    59. 
    
    
    
    
  59.            
    60. 
    
    
    
    
  60.         <%-- 头部 --%>   
    61. 
    
    
    
    
  61.         <div class="pane ui-layout-north" >   
    62. 
    
    
    
    
  62.             <embed src="flash/00128229.swf" width="875px" height="35px" >embed>   
    63. 
    
    
    
    
  63.         div>   
    64. 
    
    
    
    
  64.            
    65. 
    
    
    
    
  65.         <%-- 底部 --%>   
    66. 
    
    
    
    
  66.         <div class="pane ui-layout-south">   
    67. 
    
    
    
    
  67.             <iframe id="mainFrame" name="mainFrame" class="ui-layout-center"   
    68. 
    
    
    
    
  68.                 width="100%" height="100%" frameborder="0" scrolling="auto"   
    69. 
    
    
    
    
  69.                 src="Droppable/Basic_modal.jsp">   
    70. 
    
    
    
    
  70.             iframe>   
    71. 
    
    
    
    
  71.         div>   
    72. 
    
    
    
    
  72.            
    73. 
    
    
    
    
  73.         <%-- 右导航 --%>   
    74. 
    
    
    
    
  74.         <div class="pane ui-layout-east">   
    75. 
    
    
    
    
  75.             <iframe id="mainFrame" name="mainFrame" class="ui-layout-center"   
    76. 
    
    
    
    
  76.                 width="100%" height="100%" frameborder="0" scrolling="auto"   
    77. 
    
    
    
    
  77.                 src="Droppable/Fill_space.jsp">   
    78. 
    
    
    
    
  78.             iframe>   
    79. 
    
    
    
    
  79.         div>   
    80. 
    
    
    
    
  80.            
    81. 
    
    
    
    
  81.            
    82. 
    
    
    
    
  82.         <%-- 左导航 --%>   
    83. 
    
    
    
    
  83.         <div class="pane ui-layout-west">   
    84. 
    
    
    
    
  84.             <iframe id="mainFrame" name="mainFrame" class="ui-layout-center"   
    85. 
    
    
    
    
  85.                 width="100%" height="100%" frameborder="0" scrolling="auto"   
    86. 
    
    
    
    
  86.                 src="Droppable/Animate_Demo.jsp">   
    87. 
    
    
    
    
  87.             iframe>   
    88. 
    
    
    
    
  88.         div>   
    89. 
    
    
    
    
  89.     div>   
    90. 
    
    
    
    
  90.     body>   
    91. 
    
    
    
    
  91. html> 
    92.

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

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

主题编辑区域：

    
    
    
    
    
     
     
     
     
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
    2. 
     
     
     
     
  2. <%   
    3. 
     
     
     
     
  3. String path = request.getContextPath();   
    4. 
     
     
     
     
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
    5. 
     
     
     
     
  5. %>   
    6. 
     
     
     
     
  6.    
    7. 
     
     
     
     
  7. >   
    8. 
     
     
     
     
  8. <html>   
    9. 
     
     
     
     
  9.   <head>   
    10. 
     
     
     
     
  10.     <base href="<%=basePath%>">   
    11. 
     
     
     
     
  11.        
    12. 
     
     
     
     
  12.     <title>jQuery UI Dialog - Modal formtitle>   
    13. 
     
     
     
     
  13.     <link type="text/css" href="js/themes/base/jquery.ui.all.css" rel="stylesheet" />   
    14. 
     
     
     
     
  14.     <script type="text/javascript" src="js/jquery-1.4.2.js">script>   
    15. 
     
     
     
     
  15.     <script type="text/javascript" src="js/external/jquery.bgiframe-2.1.1.js">script>   
    16. 
     
     
     
     
  16.     <script type="text/javascript" src="js/ui/jquery.ui.core.js">script>   
    17. 
     
     
     
     
  17.    
    18. 
     
     
     
     
  18.     <script type="text/javascript" src="js/ui/jquery.ui.widget.js">script>   
    19. 
     
     
     
     
  19.     <script type="text/javascript" src="js/ui/jquery.ui.mouse.js">script>   
    20. 
     
     
     
     
  20.     <script type="text/javascript" src="js/ui/jquery.ui.button.js">script>   
    21. 
     
     
     
     
  21.     <script type="text/javascript" src="js/ui/jquery.ui.draggable.js">script>   
    22. 
     
     
     
     
  22.     <script type="text/javascript" src="js/ui/jquery.ui.position.js">script>   
    23. 
     
     
     
     
  23.     <script type="text/javascript" src="js/ui/jquery.ui.resizable.js">script>   
    24. 
     
     
     
     
  24.    
    25. 
     
     
     
     
  25.     <script type="text/javascript" src="js/ui/jquery.ui.dialog.js">script>   
    26. 
     
     
     
     
  26.     <script type="text/javascript" src="js/ui/jquery.effects.core.js">script>   
    27. 
     
     
     
     
  27.     <link type="text/css" href="js/demos.css" rel="stylesheet" />   
    28. 
     
     
     
     
  28.     <style type="text/css">   
    29. 
     
     
     
     
  29.         body { font-size: 62.5%; }   
    30. 
     
     
     
     
  30.         label, input { display:block; }   
    31. 
     
     
     
     
  31.         input.text { margin-bottom:12px; width:95%; padding: .4em; }   
    32. 
     
     
     
     
  32.         fieldset { padding:0; border:0; margin-top:25px; }   
    33. 
     
     
     
     
  33.         h1 { font-size: 1.2em; margin: .6em 0; }   
    34. 
     
     
     
     
  34.         div#users-contain { width: 350px; margin: 20px 0; }   
    35. 
     
     
     
     
  35.         div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }   
    36. 
     
     
     
     
  36.         div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }   
    37. 
     
     
     
     
  37.         .ui-dialog .ui-state-error { padding: .3em; }   
    38. 
     
     
     
     
  38.         .validateTips { border: 1px solid transparent; padding: 0.3em; }   
    39. 
     
     
     
     
  39.            
    40. 
     
     
     
     
  40.     style>   
    41. 
     
     
     
     
  41.     <script type="text/javascript">   
    42. 
     
     
     
     
  42.     $(function() {   
    43. 
     
     
     
     
  43.         // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!   
    44. 
     
     
     
     
  44.         $("#dialog").dialog("destroy");   
    45. 
     
     
     
     
  45.            
    46. 
     
     
     
     
  46.         var name = $("#name"),   
    47. 
     
     
     
     
  47.             email = $("#email"),   
    48. 
     
     
     
     
  48.             password = $("#password"),   
    49. 
     
     
     
     
  49.             allFields = $([]).add(name).add(email).add(password),   
    50. 
     
     
     
     
  50.             tips = $(".validateTips");   
    51. 
     
     
     
     
  51.    
    52. 
     
     
     
     
  52.         function updateTips(t) {   
    53. 
     
     
     
     
  53.             tips   
    54. 
     
     
     
     
  54.                 .text(t)   
    55. 
     
     
     
     
  55.                 .addClass('ui-state-highlight');   
    56. 
     
     
     
     
  56.             setTimeout(function() {   
    57. 
     
     
     
     
  57.                 tips.removeClass('ui-state-highlight', 1500);   
    58. 
     
     
     
     
  58.             }, 500);   
    59. 
     
     
     
     
  59.         }   
    60. 
     
     
     
     
  60.    
    61. 
     
     
     
     
  61.         function checkLength(o,n,min,max) {   
    62. 
     
     
     
     
  62.    
    63. 
     
     
     
     
  63.             if ( o.val().length > max || o.val().length < min ) {   
    64. 
     
     
     
     
  64.                 o.addClass('ui-state-error');   
    65. 
     
     
     
     
  65.                 updateTips("Length of " + n + " must be between "+min+" and "+max+".");   
    66. 
     
     
     
     
  66.                 return false;   
    67. 
     
     
     
     
  67.             } else {   
    68. 
     
     
     
     
  68.                 return true;   
    69. 
     
     
     
     
  69.             }   
    70. 
     
     
     
     
  70.    
    71. 
     
     
     
     
  71.         }   
    72. 
     
     
     
     
  72.    
    73. 
     
     
     
     
  73.         function checkRegexp(o,regexp,n) {   
    74. 
     
     
     
     
  74.    
    75. 
     
     
     
     
  75.             if ( !( regexp.test( o.val() ) ) ) {   
    76. 
     
     
     
     
  76.                 o.addClass('ui-state-error');   
    77. 
     
     
     
     
  77.                 updateTips(n);   
    78. 
     
     
     
     
  78.                 return false;   
    79. 
     
     
     
     
  79.             } else {   
    80. 
     
     
     
     
  80.                 return true;   
    81. 
     
     
     
     
  81.             }   
    82. 
     
     
     
     
  82.    
    83. 
     
     
     
     
  83.         }   
    84. 
     
     
     
     
  84.            
    85. 
     
     
     
     
  85.         $("#dialog-form").dialog({   
    86. 
     
     
     
     
  86.             autoOpen: false,   
    87. 
     
     
     
     
  87.             height: 500,   
    88. 
     
     
     
     
  88.             width: 450,   
    89. 
     
     
     
     
  89.             modal: true,   
    90. 
     
     
     
     
  90.             buttons: {   
    91. 
     
     
     
     
  91.                 'Create an account': function() {   
    92. 
     
     
     
     
  92.                     var bValid = true;   
    93. 
     
     
     
     
  93.                     allFields.removeClass('ui-state-error');   
    94. 
     
     
     
     
  94.    
    95. 
     
     
     
     
  95.                     bValidbValidbValid = bValid && checkLength(name,"username",3,16);   
    96. 
     
     
     
     
  96.                     bValidbValidbValid = bValid && checkLength(email,"email",6,80);   
    97. 
     
     
     
     
  97.                     bValidbValidbValid = bValid && checkLength(password,"password",5,16);   
    98. 
     
     
     
     
  98.    
    99. 
     
     
     
     
  99.                     bValidbValidbValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");   
    100. 
     
     
     
     
  100.                     // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/   
    101. 
     
     
     
     
  101.                     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. [email protected]");   
    102. 
     
     
     
     
  102.                     bValidbValidbValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");   
    103. 
     
     
     
     
  103.                        
    104. 
     
     
     
     
  104.                     if (bValid) {   
    105. 
     
     
     
     
  105.                         $('#users tbody').append('<tr>' +   
    106. 
     
     
     
     
  106.                             '<td>' + name.val() + 'td>' +    
    107. 
     
     
     
     
  107.                             '<td>' + email.val() + 'td>' +    
    108. 
     
     
     
     
  108.                             '<td>' + password.val() + 'td>' +   
    109. 
     
     
     
     
  109.                             'tr>');    
    110. 
     
     
     
     
  110.                         $(this).dialog('close');   
    111. 
     
     
     
     
  111.                     }   
    112. 
     
     
     
     
  112.                 },   
    113. 
     
     
     
     
  113.                 Cancel: function() {   
    114. 
     
     
     
     
  114.                     $(this).dialog('close');   
    115. 
     
     
     
     
  115.                 }   
    116. 
     
     
     
     
  116.             },   
    117. 
     
     
     
     
  117.             close: function() {   
    118. 
     
     
     
     
  118.                 allFields.val('').removeClass('ui-state-error');   
    119. 
     
     
     
     
  119.             }   
    120. 
     
     
     
     
  120.         });   
    121. 
     
     
     
     
  121.            
    122. 
     
     
     
     
  122.            
    123. 
     
     
     
     
  123.            
    124. 
     
     
     
     
  124.         $('#create-user')   
    125. 
     
     
     
     
  125.             .button()   
    126. 
     
     
     
     
  126.             .click(function() {   
    127. 
     
     
     
     
  127.                 $('#dialog-form').dialog('open');   
    128. 
     
     
     
     
  128.             });   
    129. 
     
     
     
     
  129.    
    130. 
     
     
     
     
  130.     });   
    131. 
     
     
     
     
  131.     script>   
    132. 
     
     
     
     
  132. head>   
    133. 
     
     
     
     
  133. <body>   
    134. 
     
     
     
     
  134.    
    135. 
     
     
     
     
  135. <div class="demo">   
    136. 
     
     
     
     
  136.    
    137. 
     
     
     
     
  137. <div id="dialog-form" title="Create new user">   
    138. 
     
     
     
     
  138.     <p class="validateTips">所有字段均为必填.p>   
    139. 
     
     
     
     
  139.    
    140. 
     
     
     
     
  140.     <form>   
    141. 
     
     
     
     
  141.     <fieldset>   
    142. 
     
     
     
     
  142.         <label for="name">姓名label>   
    143. 
     
     
     
     
  143.         <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />   
    144. 
     
     
     
     
  144.         <label for="email">Emaillabel>   
    145. 
     
     
     
     
  145.    
    146. 
     
     
     
     
  146.         <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />   
    147. 
     
     
     
     
  147.         <label for="password">密码label>   
    148. 
     
     
     
     
  148.         <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />   
    149. 
     
     
     
     
  149.     fieldset>   
    150. 
     
     
     
     
  150.     form>   
    151. 
     
     
     
     
  151. div>   
    152. 
     
     
     
     
  152.    
    153. 
     
     
     
     
  153.    
    154. 
     
     
     
     
  154. <div id="users-contain" class="ui-widget">   
    155. 
     
     
     
     
  155.    
    156. 
     
     
     
     
  156.         <h1>现有用户:h1>   
    157. 
     
     
     
     
  157.    
    158. 
     
     
     
     
  158.    
    159. 
     
     
     
     
  159.     <table id="users" class="ui-widget ui-widget-content">   
    160. 
     
     
     
     
  160.         <thead>   
    161. 
     
     
     
     
  161.             <tr class="ui-widget-header ">   
    162. 
     
     
     
     
  162.                 <th>姓名th>   
    163. 
     
     
     
     
  163.                 <th>Emailth>   
    164. 
     
     
     
     
  164.                 <th>密码th>   
    165. 
     
     
     
     
  165.    
    166. 
     
     
     
     
  166.             tr>   
    167. 
     
     
     
     
  167.         thead>   
    168. 
     
     
     
     
  168.         <tbody>   
    169. 
     
     
     
     
  169.             <tr>   
    170. 
     
     
     
     
  170.                 <td>John Doetd>   
    171. 
     
     
     
     
  171.                 <td>[email protected]td>   
    172. 
     
     
     
     
  172.                 <td>johndoe1td>   
    173. 
     
     
     
     
  173.    
    174. 
     
     
     
     
  174.             tr>   
    175. 
     
     
     
     
  175.         tbody>   
    176. 
     
     
     
     
  176.     table>   
    177. 
     
     
     
     
  177. div>   
    178. 
     
     
     
     
  178. <button id="create-user">创建新用户button>   
    179. 
     
     
     
     
  179.    
    180. 
     
     
     
     
  180. div>   
    181. 
     
     
     
     
  181.    
    182. 
     
     
     
     
  182. <div class="demo-description">   
    183. 
     
     
     
     
  183.    
    184. 
     
     
     
     
  184. <p>Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modalcode> option to true, and specify primary and secondary user actions with the <code>buttonscode> option.p>   
    185. 
     
     
     
     
  185.    
    186. 
     
     
     
     
  186. div>   
    187. 
     
     
     
     
  187.   body>   
    188. 
     
     
     
     
  188. html>  
    189.
其他部分就不贴了~~~！！！反正都是官方的示例、在来看看PrintArea.js对打印的支持吧：在主页面(index.jsp)中 

   
   
   
   
    
    
    
    
    
  1. <pre name="code" class="html">               <script type="text/javascript">   
    2. 
    
    
    
    
  2.             function PrintDiv(){   
    3. 
    
    
    
    
  3.                 $("#myPrintArea").printArea();   
    4. 
    
    
    
    
  4.             }   
    5. 
    
    
    
    
  5.         script>   
    6. 
    
    
    
    
  6.         <%-- 主体编辑区域 --%>  
    7. 
   
   
   
   
   
   
   
   
    
    
    
    
    
  1. <div class="pane ui-layout-center" id="myPrintArea">   
    2. 
    
    
    
    
  2.     <iframe id="mainFrame" name="mainFrame" class="ui-layout-center"   
    3. 
    
    
    
    
  3.         width="100%" height="100%" frameborder="0" scrolling="auto"   
    4. 
    
    
    
    
  4.         src="Droppable/Modal_form.jsp">   
    5. 
    
    
    
    
  5.     iframe>   
    6. 
    
    
    
    
  6.     <input type="button" value="打印" onclick="PrintDiv();" />   
    7. 
    
    
    
    
  7. div> 
    8.

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

   
   
   
   
    
    
    
    
    
  1. <pre name="code" class="html">$("#myPrintArea").printArea();   
    2.

注意、需要引用：

   
   
   
   
    
    
    
    
    
  1. "text/javascript" src="js/jquery.PrintArea.js" >   
    2.

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

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

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

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

jQuery Ui.Layout.js——PrintArea.js学习_第1张图片

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