一个easyui-panel控件动态居中方法兼其move使用要点

最新推荐文章于 2021-06-15 21:13:22 发布
最新推荐文章于 2021-06-15 21:13:22 发布
阅读量3.3k 收藏 4
点赞数 1
分类专栏： jQuery与Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hulihui/article/details/82917024
版权
本文探讨了如何在easyui环境中使panel控件动态居中。关键在于设置面板的data-options属性为'style:{position:'absolute'}'，并结合window.onresize事件监听浏览器缩放，确保面板始终居中显示。
摘要由CSDN通过智能技术生成

在设计一个基于easyui-panel的登录网页时，希望该panel能够动态居中。但按照easyui官网上的代码和技术文档，使用panel对象的move方法时总是失效。下面代码介绍的move方法可以满足panel动态居中需要。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Documentation - jQuery EasyUI</title>

    <link rel="stylesheet" type="text/css" href='/Scripts/easyui/themes/default/easyui.css'>
    <link rel="stylesheet" type="text/css" href='/Scripts/easyui/themes/icon.css'>

    <script type="text/javascript" src='/Scripts/jq/jquery-1.11.3.min.js'></script>
    <script type="text/javascript" src='/Scripts/jq/jquery.easyui.min.js'></script>

    <script type="text/javascript">
        $(function ()
        {
最低0.47元/天 解锁文章
长沙三毛
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI实现上下移动
大猴子的专栏
09-22 1693
热点推荐设置                                                .datagrid-view2         {             left:0px;             }                  var lastIndexp;       var tempindexp = -1;    
easyui-panel控件的标题居中方法
HuLihui's Blog
10-04 4547
easyui常用div元素构建控件或布局，例如 easyui-panel、easyui-layout等。这些div元素的标题一般居左显示。使用&lt;center&gt;标题&lt;/center&gt;的形式就可以是标题居中，见如下代码。 &lt;div id="rp" class="easyui-panel" title="&lt;center&gt;系统登录&lt;/center&am
EasyUI Panel 布局
dianyanxia的博客
03-13 764
$('#panel').panel('move',{ position:'absolute', left:200, top:100 }); panel move的问题 没有反应 悬而未决 panel的方法 resize 或者move 在右上角添加按钮功能、 $('#panel').panel({ wid...
解决火狐浏览器使用easyUI生成的panel不在页面中间，而在页面上方，且部分被遮挡
Yuwen_forJava的博客
07-04 734
这个问题在火狐出现，目前谷歌和ie正常，解决方法：&lt;body style="width:100%;height: 100%;"&gt;，加上style即可
easyui-window左右居中设置
aas3637721的博客
05-14 1247
$('#id').window({ width: 650, height: 400, top: 0, left: ($(window).width() - 650) * 0.5, minimizable: false, maximizable: false, resizable: false, closed: false, cache: false, title: "title...
jQuery EasyUI中的日期控件DateBox修改方法
11-29
在jQuery EasyUI框架中，DateBox是一个非常实用的日期选择控件，它允许用户方便地选取日期，并且可以自定义显示样式和格式。在本文中，我们将深入探讨如何修改DateBox的一些关键设置，以适应不同的需求。 首先，...
给Easyui-Datebox设置隐藏或者不可用的解决方法
10-19
最近我在做一个安全监测系统，选择了用easyui进行搭建，easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码，功能上需要加...下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的解决方法
jqeury-easyui-layout问题解决方法
12-09
当 `easyui-layout` 类被放在一个内部的 `<div>` 中时，框架无法正确识别和处理布局，导致样式失效。 正确的做法是将 `easyui-layout` 类赋予 `<body>` 标签，并确保所有带有 `data-options` 属性的 `<div>`（表示...
easyui-textbox和easyui-combobox的onchange事件响应实例
08-01
在上面的例子中，我们创建了一个 `easyui-textbox` 输入框和一个 `easyui-combobox` 下拉选择框。对于 `easyui-textbox`，我们通过 `onchange` 属性直接绑定了一个名为 `handleTextboxChange` 的函数，该函数会弹出...
EasyUI在Panel上动态添加LinkButton按钮
01-19
在最近做的一个将原来的旧系统翻新改造的项目中，为了在个别展示位置与原系统一直，研究了一下Easyui的panel面板，在panel的面板中动态添加Linkbuton按钮的编辑方法，在这里做个记录免得自己以后忘了，也为有需求的...
jquery easyui panel move
zhsalo的博客
12-13 566
在使用esayui 的过程中。发现dialog 不能随着滚动条位置的显示，这样很不符合用户的体验,解决方案： //获取滚动条到顶部的高度 var h1 = (document).scrollTop();//获取浏览器显示区域的高度varh2=(document).scrollTop(); //获取浏览器显示区域的高度 var h2 = (window).height();
EasyUi常用组件（三）Panel 控制面板
szyly的博客
07-06 2870
1. 使用标签创建控制面板 使用标签创建控制面板十分简单，只须要对标签引用'easyui-panel'类。 1.<div id="p" class="easyui-panel" title="My Panel"     2.        style="width:500px;height:150px;padding:10px;background:#fafafa;"   3.        
Day45 EasyUI 搭建后台登录界面和管理系统主界面
新世界的大门
03-06 9011
EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点： 基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
子panel居中小技巧
Jobar's life
06-16 447
子panel居中小技巧 [code="java"]{ xtype: 'container', layout: {//layout设置关键地方 [color=red]type: 'hbox', align: 'middle', pack: 'center'[/color] }, items: [ { xtype: 'container', i...
easyui中window、panel、dialog在移动时，超出边框修复
wei_lanSe的博客
10-20 2020
var panelMo = function(left, top) { var parentObj = $(this).panel('panel').parent(); if (left < 0) { $(this).window('move', { left : 1 }); } if (top < 0) { $(this).
easyUI Tabs
wzh1215的专栏
07-30 595
@author YHC $.fn.tabs.defaults覆盖默认值 tabs显示一个panel的集合,每一次仅仅只是显示一个tab panel,所有tab panel都有标题和一些小的工具按钮,包含close按钮和其他自定义按钮;   使用示例: 创建示例 创建 tabs 1.创建tabs通过标记; 从标记创建tabs非常简单,我们不需要写任何的javascript
html如何让样式居中,如图，如何让样式动态居中
weixin_42398141的博客
06-15 129
如图所示，第一张图为PC时居中显示可行，第二张图为在移动端时，显示为滚动。问题：移动端如何让7始终在可视范围内(向右滚动也)始终保持居中。难点：动态的数据，今天3号，明天4号，3号就会不显示，8月份会加多个7号出现，在这样变动数据下如何实现以上所述问题。。年月周几表格* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: ...
【前端】JS实现控件动态页面居中
bk120的博客
01-03 988
js代码如下： <script> // 初始触发 loadCenter($("#div_head")); // 弹窗位置改变触发 window.οnresize=function(){ loadCenter($("#div_head")); }; function loadCenter(el) { // 可...
关于easyui 窗口位置的调整
weixin_30426957的博客
05-24 560
（一）easyui 默认的窗口位置 浏览器中间 （二）可直接在style里进行更改 <div id="news_dialog" class="easyui-window" title="新闻标题" closed="true" modal="true" footer="#footer" collapsible="false" style="width:500px;height:300px...
bootstrap中哪个控件类似easyui-datagrid控件？
最新发布
01-18
以下是一个使用Bootstrap表格控件的示例： ```html <th scope="col">id 名称 价格 <td>1 商品1 <td>100 <td>2 商品2 <td>200 <td>3 商品3 <td>300 ``` 通过使用Bootstrap的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值