my97日期控件弹出位置显示异常

使用my97日期选择控件的时候,如果整个页面是有滚动条的,根据触发显示日期的控件的父控件的position不同会显示不同的情况

1、position不为fixed则滑动滚动条,显示的日期层不会出现异常位移,如下图

滚动条不动,正常显示

滚动条没去,正常显示

2、position为fixed则滑动滚动税票,显示的日期层会根据滚动条的移动而移动,如下图

滚动条不动,正常显示

滚动条滑动,异常位移

对于第二种情况解决方法如下:

写一个方法 如下:

function showDate() {
        $(‘iframe[hidefocus]‘).parent().hide();//用于强制重新计算坐标值
        new WdatePicker();
        var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
        var oldTop = $(‘iframe[hidefocus]‘).parent().css(‘top‘).replace(‘px‘, ‘‘);//日期控件最终计算的top值
        var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
        var iCount = 0;
        //下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
        var intHandle = setInterval(function () {
            var top = $(‘iframe[hidefocus]‘).parent().css(‘top‘).replace(‘px‘, ‘‘);
            iCount++;
            if (iCount < 10) {
                $(‘iframe[hidefocus]‘).parent().css({
                    ‘position‘: ‘fixed‘,
                    ‘top‘: newTop
                });
            }
            else {
                clearInterval(intHandle);
            }
        }, 100);
    }

触发的控件的onclick事件直接调用 此方法,完成页面html和调用代码如下

<h2>Index</h2>

<div style="height: 1000px; background-color: yellow">
</div>
<div style="position: absolute; top: 50%; left:50%; background-color: blue;">
    <input type="text" class="form-control" onclick="showDate();"/>
</div>
<script src="~/Scripts/plugin/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    function showDate() {
        $(‘iframe[hidefocus]‘).parent().hide();//用于强制重新计算坐标值
        new WdatePicker();
        var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
        var oldTop = $(‘iframe[hidefocus]‘).parent().css(‘top‘).replace(‘px‘, ‘‘);//日期控件最终计算的top值
        var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
        var iCount = 0;
        //下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
        var intHandle = setInterval(function () {
            var top = $(‘iframe[hidefocus]‘).parent().css(‘top‘).replace(‘px‘, ‘‘);
            iCount++;
            if (iCount < 10) {
                $(‘iframe[hidefocus]‘).parent().css({
                    ‘position‘: ‘fixed‘,
                    ‘top‘: newTop
                });
            }
            else {
                clearInterval(intHandle);
            }
        }, 100);
    }
</script>

最终显示结果如下,日期显示框没有位移

原文地址:https://www.cnblogs.com/zbspace/p/12013263.html

时间: 2024-10-10 00:00:38

my97日期控件弹出位置显示异常的相关文章

根据条件决定My97DatePicker日期控件弹出的日期格式

代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>根据条件决定My97DatePicker日期控件弹出的日期格式</title> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.

my97日期控件

http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerelease 发布于2008-04-22 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用该

在控件的任意位置显示图片

在控件的任意位置显示图片 效果图 xml代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent&

My97日期控件用法

http://www.my97.net/dp/demo/index.htm 查看控件日期范围限定的说明: 通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围 <input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-1

JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ================================================================= <input id="dlgReleaseTime" class="easyui-datebox"></input> $('#dl

九、点击控件弹出复制粘贴剪切选择等(UIMenuController)

默认情况下,有以下控件已经支持UIMenuController UITextField UITextView UIWedView 以UITable为例,说明点击后弹出复制剪切粘贴等为例 使用的整体思路:(系统自带的文字) 1.新建一个UILabel的类,如果想以后storyboard和Xib都可以用,就可以调用awakeFromNib和initWithFrame方法,同时进行初始化操作 2.使UILabel成为第一响应者作用: 提供两种方法canBecomeFirstResponder和canP

DetailsView控件弹出删除确认对话框

方法一:添加事件代码 protected void DetailsView1_ItemCreated(object sender, EventArgs e) { int cc = DetailsView1.Controls[0].Controls.Count; LinkButton lb=(LinkButton)DetailsView1.Controls[0].Controls[cc-2].Controls[0].Controls[0]; lb.Attributes.Add("onclick&q

Easyui 的日期控件单击文本框显示日历

注意:可 用 ctrl+f 搜索 "_outerWidth():0" 1. jQuery.easyui.min.js1.3.2 版本   function _745(_746,_747){var opts=$.data(_746,"combo").options;var _748=$.data(_746,"combo").combo;var _749=$.data(_746,"combo").panel;if(_747){op

jsp日期插件My97DatePicker 强大的日期控件 使用方便简单

本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途:WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名con