1. <nav id="9tq2v"><big id="9tq2v"><video id="9tq2v"></video></big></nav>
        1. <label id="9tq2v"></label>
          设为首页 - 加入收藏 镇江站长网 (http://www.uswotlk.com)- 中小站长必上的网站 - 聚焦镇江站长前沿资讯!
          热搜: 手机 优酷 中国 创业者
          当前位置: 主页 > 新闻资讯 > 传媒 > 正文

          基于jquery的显示窗体控件 可控制位置

          发布时间:2018-09-04 03:20 所属栏目:[传媒] 来源:站长网
          导读:基于jquery开放的显示窗体控件,可设置div的位置在中间或左下角,或右下角。 //显示一个指定位置的窗口,这个是基于jquery开发的,必须引入jquery包,没有的搜下,到处都是,一脚踩一个 /* *@param position如果是center就在浏览器的中间 如果是rigthDown

          基于jquery开放的显示窗体控件,可设置<div>的位置在中间或左下角,或右下角。

          //显示一个指定位置的窗口,这个是基于jquery开发的,必须引入jquery包,没有的搜下,到处都是,一脚踩一个
          /*
          *@param position如果是center就在浏览器的中间
          如果是rigthDown就在浏览器的右下角
          如果是leftDown就在浏览器的坐下角
          如果输入的是个json对象就安坐标设置位置例如:{left:100,top:100}
          */
          $.fn.myWindows = function(position) {

          var windowobj = $(window);
          var browserWidth = windowobj.width(); //浏览器的宽
          var browserHieght = windowobj.height(); //浏览器的高
          var scrollLeft = windowobj.scrollLeft(); //滚动条的横位置
          var scrollTop = windowobj.scrollTop(); //滚动条的竖位置
          var selfWidth = this.outerWidth(true); //这个元素的宽包括magin,padding
          var selfHeight = this.outerHeight(true); //这个元素的高包括magin,padding

          var left;
          var top;
          //中间的窗口
          if (position == "center") {
          left = scrollLeft + (browserWidth - selfWidth) / 2; //获取左边的距离
          top = scrollTop + (browserHieght - selfHeight) / 2; //获取上边的距离
          } else if (position == "rigthDown") {
          //右下角窗口
          left = scrollLeft + browserWidth - selfWidth;
          top = scrollTop + browserHieght - selfHeight;
          } else if ("leftDown") {
          left = scrollLeft + 0;
          top = scrollTop + browserHieght - selfHeight;
          }
          else if (position && position instanceof Object) {
          left = position.left;
          top = position.top;
          }
          this.css("position", "absolute"); //让这个容器绝对定位
          this.css("left", left).css("top", top); //设置这个元素的位置

          var self = this;
          //找到这个元素下clsss是title的元素,这个元素下的图片点击事件,让这个窗口隐藏
          this.children(".title").children("img").click(function() {
          self.hide("show");
          });

          return this; //返回对象本身方便连级操作
          }

          下面是调用的方法:

          html代码:

          <div style="width:100px;height:100px;display:none">
          <div class="title">
          <img src=''/>
          这个是窗体的标题部分,class必须等于title这个图片用来关闭这个窗口的
          <div>
          这里是你的内容
          <div>
          <input type="button" id="showDiv" value="显示窗体" onclick="showWindows()">

          javascript代码:

          <script>
          function showWindows() {
          $("#windwosDiv").myWindows("leftDown");
          }
          </script>

          【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

          网友评论
          推荐文章
          金亚洲游戏