jquery easyui防止超出浏览器边界

var easyuiPanelOnMove=function(left,top){

    if(left<0){
        $(this).window(‘move‘,{
       left:1
   });
    }
      if(top<0){
         $(this).window(‘move‘,{
           top:1
       });
    }
}        

$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove=easyuiPanelOnMove;
$.fn.dialog.defaults.onMove=easyuiPanelOnMove;

方式一:防止easyui的panel,window,dialog框超出浏览器,如上

方式二:

控制dialog超出浏览器回到原来的地方
//控制dialog超出浏览器回到原来的地方
var default_left;
var default_top;
function onopen(){
        default_left=$(‘#wow-goods-add‘).panel(‘options‘).left;
        default_top=$(‘#wow-goods-add‘).panel(‘options‘).top;
}

function onmove(left,top){
        var body_width=document.body.offsetWidth;//body的宽度
        var body_height=document.body.offsetHeight;//body的高度
        var dd_width= $(‘#wow-goods-add‘).panel(‘options‘).width;//dialog的宽度
        var dd_height= $(‘#wow-goods-add‘).panel(‘options‘).height;//dialog的高度
        if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
               $(‘#wow-goods-add‘).dialog(‘move‘,{
                     left:default_left,
                     top:default_top ,
               });
       }
}
时间: 2024-10-20 17:29:17

jquery easyui防止超出浏览器边界的相关文章

解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug

使用panel的onMove事件解决了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况. 当窗口被拖出浏览器有边界时,$(document).width();会增大,增大的部分就是窗口超过浏览器窗口的部分,所以right > browserWidth条件永远无法满足. 如果我们在思考得多一点,其实对于panel,dialog,window三个组件,我们往往要求的并不是它不能超出浏览器界限,而是要求它不能超出父元素界限,而且当父元素的overflow不是hi

jquery判断一个div的边界是否超出另外一个div的边界

摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理. 1.实现效果 判断前 判断后 2.实现思路 实现类似的判断,主要是获取两个div在浏览器中的上下左右的四至,在jquery中,可以通过div.offset().left和div.offset().top获取div在浏览器中的绝对位置的left和top值:div在浏览器中的绝对位置的right和bottom为div的left+width和top+height,width和height可以通

IE浏览器中,JQuery EasyUI的form(&#39;load&#39;)方法只能加载一次的问题

项目中的页面用到了EasyUI,表单加载数据时,调用了form('load')方法.用Chrome.Firefox访问均没问题,可是用IE浏览器访问时,数据不论怎么修改,加载的都是第一次的数据.这疑似是一直在加载第一次的缓存.于是查资料发现,原来IE浏览器对Jquery EasyUI的支持不好,缓存了表单第一次加载的数据.以后每次加载时,都会从缓存中调用.于是在ajax方法中加入cache:false,取消缓存便解决了. 1 $.ajax({ 2 cache:false, //取消缓存 3 ur

JQuery EasyUI IE浏览器出现‘Rowspan’ 为空或不是对象

环境: EasyUI 1.4.2. 现象: 在使用JQuery EasyUI 的datagrid控件时,使用动态指定columns的方式,相关代码如下: $("#topApList").datagrid({columns:[[ {field:'aaa',title: 'aaa',align: 'center',width: 130}, {field:'bbb',title: 'bbb',align: 'center',width: 100}, ]] }); 在IE8浏览器中打开该页面时

套用JQuery EasyUI列表显示数据、分页、查询

声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近看到一款轻型的UI感觉不错,但是在网上找了好多教程,但是没有一个是完全是C#asp.net写的 无耐下,自己写了下,感觉效果不错,故拿出来和大学分享一下,希望可以抛砖引玉作用. 由于好多人都只是拷贝代码,故在此全用图片作说明. 图片效果图1 这个界面是上左右下结构 左边是一棵树 右边是一个表格 上部

JQuery EasyUI后台UI框架使用连载

在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一.什么是JQuery EasyUI jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面.开发者不需要编写复杂的JavaScript,也不需要对 css 样式有深入的了解,开发者需要

jQuery EasyUI Datagrid性能优化专题(转)

jQuery  EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能 都望而却步了.本博客以后会带着分析Datagrid组件的性能问题,并且给出优化方案,也希望大家能集思广益,给出一些好的想法. 慢在哪些方面 以目前对Datagrid的了解程度去看待性能问题,主要有以下几点: 加载大数据量时比较慢(不考虑服务端返回数据的时间),这点尤其体现在IE浏览器里面: 大数据量时,加载后,操作很不流畅,勾选慢,sin

Jquery EasyUI封装简化操作

//confirm function Confirm(msg, control) { $.messager.confirm('确认', msg, function (r) { if (r) { eval(control.toString().slice(11)); } }); return false; } //load function Load() { $("<div class=\"datagrid-mask\"></div>").cs

jQuery EasyUI入门

什么是jQuery EasyUI? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. jQuery EasyUI的特点 1.基于jquery用户界面插件的集合 2.为一些当前用于交互的js应用提供必要的功能 3.EasyUI支持两种渲染方式分别为javascrip