jQuery MiniUI

标题: mini.open 出现滚动条问题 [打印本页]

作者: ainibuhao    时间: 2015-11-10 16:28:34     标题: mini.open 出现滚动条问题

mini.open 打开时候无论是页面是否错误open的出的窗体右侧就有滚动条。[attach]6780[/attach]
第一张图open的页面是没有超出内容是没有滚动条的,可是open窗体是有滚动的条的。


[attach]6779[/attach]


第二张图open的页面是超出内容是有滚动条的,可是open窗体也滚动的条的。



应该怎么消除open自身的滚动条啊? open能写的属性没有滚动条的设置啊!   

作者: dforce    时间: 2015-11-10 16:47:27

1 请使用doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 IE只支持标准模式

3 排除以上2点还有问题的话,请提供重现页面,应该就是你布局的问题了
作者: ainibuhao    时间: 2015-11-10 16:58:46

dforce 发表于 2015-11-10 16:47
1 请使用doctype

排除 dtd 和浏览器问题:

注意:loader.js就是boot.js名字变了而已
open子页面jsp如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <%@ page language="java" contentType="text/html; charset=utf-8"
  4.         pageEncoding="utf-8"%>
  5. <%
  6.         String URL = request.getContextPath();
  7. %>
  8. <head>
  9. <title></title>
  10. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  11. <script src="<%=URL%>/resource/js/loader.js" type="text/javascript"></script>
  12. <script src="<%=URL%>/resource/js/alertNotification.js"
  13.         type="text/javascript"></script>
  14. <style type="text/css">
  15. td {
  16.         font-size: 9pt;
  17.         font-family: Tahoma, Verdana, 宋体;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22.         <!-- 内容 -->
  23.         <div class="mini-toolbar" style="line-height: 30px;"
  24.                 borderStyle="border:0;">
  25.                 <table style="width: 100%;">
  26.                         <tr>
  27.                                 <td style="width: 100%;"><a class="mini-button"
  28.                                         iconCls="icon-add" onclick="showleaderWindow">增加</a> 遇难船舶: <input
  29.                                         id="leaderInfocombox" class="mini-combobox" style="width: 150px;"
  30.                                         onvaluechanged="searchAlertNotification('leaderInfocombox','','','leaderInfoDataGrid')"
  31.                                         valueField="id" emptyText="请选择..."
  32.                                         url="<%=URL%>/rescue/AlertNotification/getShipInfo?json"
  33.                                         textField="vsl_cd" /></td>
  34.                                 <td style="white-space: nowrap;">请输入姓名:<input
  35.                                         id="leaderInfoName" class="mini-textbox" emptyText="请输入姓名"
  36.                                         style="width: 150px;" /> 请输入手机号:<input id="leaderInfoKey"
  37.                                         class="mini-textbox" emptyText="请输入手机号" style="width: 150px;" /> <a
  38.                                         class="mini-button"
  39.                                         onclick="searchAlertNotification('','leaderInfoName','leaderInfoKey','leaderInfoDataGrid')">查询</a>
  40.                                 </td>
  41.                         </tr>
  42.                 </table>
  43.         </div>
  44.         <div class="mini-fit" >
  45.                 <div id="leaderInfoDataGrid" class="mini-datagrid"
  46.                         onrowdblclick="onRowDblClick" style="width: 100%; height: 100%;"
  47.                         idField="id" allowResize="true"
  48.                         borderStyle="border-left:0;border-right:0;"
  49.                         url="<%=URL%>/rescue/AlertNotification/alertNotification?json&noticeType=2">
  50.                         <div property="columns">
  51.                                 <div type="indexcolumn"></div>
  52.                                 <!--  <div field="pk_rescue_notice" width="120" headerAlign="center"
  53.                                         allowSort="true">id</div>-->
  54.                                 <div field="vsl_cd" width="120" headerAlign="center"
  55.                                         allowSort="true">船舶名称</div>
  56.                                 <div field="vsl_nm" width="120" headerAlign="center"
  57.                                         allowSort="true">船舶编号</div>
  58.                                 <div field="charge_name" width="120" headerAlign="center"
  59.                                         allowSort="true">姓名</div>
  60.                                 <div field="charge_phone" width="120" headerAlign="center"
  61.                                         allowSort="true">联系方式</div>
  62.                                 <div field="charge_unit" width="120" headerAlign="center"
  63.                                         allowSort="true">单位</div>
  64.                                 <div field="charge_word" width="120" headerAlign="center"
  65.                                         allowSort="true">职务</div>
  66.                                 <div field="time" width="120" headerAlign="center" allowSort="true">录入时间</div>
  67.                         </div>
  68.                 </div>
  69.         </div>
  70.         <!-- 内容 end-->
  71.         <!-- 添加Windows -->
  72.         <div id="leadAdd" class="mini-window" title="领导通知录入"
  73.                 style="width: 500px; height: 210x;">
  74.                 <div class="mini-fit">
  75.                         <form id="addForm">
  76.                                 <input class="mini-hidden" name="notice_type" value="2" />
  77.                                 <input class="mini-hidden" name="pk_accident_ship_id" />
  78.                                 <input class="mini-hidden" name="pk_rescue_charge_man" />
  79.                                 <table>
  80.                                         <tr>
  81.                                                 <td>已选择的领导:</td>
  82.                                                 <td style="width: 150px;"><input name="showtext"
  83.                                                         class="mini-textbox" allowInput="false" /></td>
  84.                                                 <td><a class="mini-button" iconCls="icon-add"
  85.                                                         onclick="selectLeader()">选择领导</a></td>
  86.                                         </tr>
  87.                                         <tr>
  88.                                                 <td>录入内容:</td>
  89.                                                 <td colspan="3"><input name="NOTICE_CONTENT"
  90.                                                         class="mini-textarea" style="width: 350px; height: 100px;" /></td>
  91.                                         </tr>
  92.                                 </table>
  93.                                 <div style="text-align: center; padding: 10px;">
  94.                                         <a class="mini-button" onclick="onOk"
  95.                                                 style="width: 60px; margin-right: 20px;">确定</a> <a
  96.                                                 class="mini-button" onclick="onCancel" style="width: 60px;">取消</a>
  97.                                 </div>
  98.                         </form>
  99.                 </div>
  100.         </div>
  101.         <!-- 添加Windows End-->
  102.         <!-- 查看内容窗口 -->
  103.         <div id="contentAdd" class="mini-window" title="录入内容详情"
  104.                 style="width: 500px; height: 210x;">
  105.                 <div class="mini-fit">
  106.                         <form id="contentForm">
  107.                                 <table>
  108.                                         <tr>
  109.                                                 <td>录入内容:</td>
  110.                                                 <td colspan="3"><input name="notice_content"
  111.                                                         allowInput="false" class="mini-textarea"
  112.                                                         style="width: 350px; height: 100px;" /></td>
  113.                                         </tr>
  114.                                 </table>
  115.                         </form>
  116.                 </div>
  117.         </div>
  118.         <!-- 查看内容窗口 end-->
  119. </body>
  120. </html>
  121. <script type="text/javascript">
  122.         // 入口函数
  123.         $(document).ready(function() {
  124.                 mini.parse();
  125.                 var grid = mini.get("leaderInfoDataGrid");
  126.                 grid.load();
  127.         });
  128.        
  129.        
  130.         /*
  131.         选择领导
  132.         */
  133.         function selectLeader() {
  134.                 var form=new mini.Form("#addForm");
  135.                 mini.open({
  136.                         url : "<%=URL%>/pageWindow/selectLeaderWindow.jsp",
  137.                         title : "领导列表",
  138.                         width : 580,
  139.                         height : 320,
  140.                         bodyStyle : "padding:0;",
  141.                         allowResize : true,
  142.                         showModal : true,
  143.                         showToolbar : true,
  144.                         showFooter : true,
  145.                         onload : function() {

  146.                         },
  147.                         ondestroy : function(action) {
  148.                                 //if (action == "close") return false;
  149.                                 if (action == "ok") {
  150.                                         var iframe = this.getIFrameEl();
  151.                                         var data = iframe.contentWindow.GetData();
  152.                                         data = mini.clone(data); //必须
  153.                                         if (data) {
  154.                                                 var id = data.pk_rescue_charge_man;
  155.                                                 var text = data.charge_name + " " + data.charge_word;
  156.                                                 var obj = {
  157.                                                         pk_rescue_charge_man : id,
  158.                                                         showtext : text
  159.                                                 }
  160.                                                 form.setData(obj, false, false);
  161.                                         }
  162.                                 }
  163.                         }
  164.                 });

  165.         }
  166.         function onOk() {
  167.                 var form=new mini.Form("#addForm");
  168.                 var data = form.getData();      //获取表单多个控件的数据
  169.                 var json = mini.encode(data);   //序列化成JSON
  170.                 $.ajax({
  171.                     url: "<%=URL%>/rescue/AlertNotification/insertLeaders?json",
  172.                         type : "post",
  173.                         data : {
  174.                                 submitData : json
  175.                         },
  176.                         success : function(text) {
  177.                                 if (text) {
  178.                                         mini.alert("添加成功!");
  179.                                         form.clear();
  180.                                         mini.get("leadAdd").hide();
  181.                                         mini.get("leaderInfoDataGrid").load();

  182.                                 } else {
  183.                                         mini.alert("添加失败!");
  184.                                 }
  185.                         },
  186.                         error : function(jqXHR, textStatus, errorThrown) {
  187.                                 mini.alert("网络错误!");
  188.                         }
  189.                 });

  190.         }
  191.         function onCancel() {
  192.                 mini.get("leadAdd").hide();
  193.         }

  194.         //判断当前遇难船舶是否有记录,有就不显示窗体
  195.         function showleaderWindow() {
  196.                 var form = new mini.Form("#addForm");
  197.                 var comboxData = mini.get("leaderInfocombox").getValue();
  198.                 //if (comboxData != null && comboxData != "") {
  199.                         var obj = {
  200.                                 pk_accident_ship_id : comboxData
  201.                         }
  202.                         form.setData(obj, false, false);//把遇难船舶id放到form
  203.                         mini.get("leadAdd").show();//显现窗体

  204.                 //} else {
  205.                 //        mini.alert("请选择遇难船舶!");
  206.                 //}
  207.         }
  208.         //查看救援内容
  209.          function onRowDblClick(e) {
  210.             var win=mini.get("contentAdd");
  211.             var grid=mini.get("leaderInfoDataGrid");
  212.             var form=new mini.Form("#contentForm");
  213.              var row=grid.getSelected();
  214.              var id=row.pk_rescue_notice;
  215.                      $.ajax({
  216.                                 url: "<%=URL%>/rescue/AlertNotification/alertNotification?json&noticeType=2",
  217.                                         type : "post",
  218.                                         data : {
  219.                                                 showId : id
  220.                                         },
  221.                                         success : function(text) {
  222.                                                 var obj = {
  223.                                                         notice_content : text.notice_content
  224.                                                 }
  225.                                                 form.setData(obj, false, false);
  226.                                                 win.show();
  227.                                         },
  228.                                         error : function(jqXHR, textStatus, errorThrown) {
  229.                                                 alert("网络错误!");
  230.                                         }
  231.                                 });
  232.         }
  233. </script>
复制代码

作者: dforce    时间: 2015-11-10 17:14:39

ainibuhao 发表于 2015-11-10 16:58
排除 dtd 和浏览器问题:

注意:loader.js就是boot.js名字变了而已

[attach]6782[/attach]
未发现什么滚动条


作者: ainibuhao    时间: 2015-11-10 17:20:44

dforce 发表于 2015-11-10 17:14
未发现什么滚动条

是的,我直接用网页打开jsp页面也没出现,那是不是我的其他样式影响到啊?如果影响到,应该在哪里查看或调整啊?
作者: dforce    时间: 2015-11-10 17:26:05

ainibuhao 发表于 2015-11-10 17:20
是的,我直接用网页打开jsp页面也没出现,那是不是我的其他样式影响到啊?如果影响到,应该在哪里查看或 ...

我就是用mini.open弹出你这个页面测试的
不清楚你什么样式影响了
可以用浏览器工具查看
作者: ainibuhao    时间: 2015-11-11 10:09:31

本帖最后由 ainibuhao 于 2015-11-11 10:12 编辑
dforce 发表于 2015-11-10 17:26
我就是用mini.open弹出你这个页面测试的
不清楚你什么样式影响了
可以用浏览器工具查看 ...

[attach]6786[/attach]

问题解决方法就是在 miniui.css 的body .mini-window 加上 overflow: hidden
请你看下有没有在版本更新的时候加上。

作者: felt    时间: 2015-11-11 12:15:19

ainibuhao 发表于 2015-11-11 10:09
问题解决方法就是在 miniui.css 的body .mini-window 加上 overflow: hidden
请你看下有没有在版本更新 ...

是你的其他问题引起的,而不是这样式引起的




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2