`
zarknight
  • 浏览: 147907 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【十】- window的扩展

阅读更多
        浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法,但是我们也知道,由于各大浏览器之间对标准的实现不统一,导致很多方法功能上有所出入,mootools为我们统一了我们最常用的一些方法:
        mootools的Window.Base.js里面,主要实现了对DOM树创建完成的事件监听。以前,我们可能经常把javascript代码写在html代码的最后面获者加上defer属性,以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话,javascript将获取不到目标元素而出错),但是,这种方式看起来还是太杂乱,保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态,而有些浏览器在创建文档树之后会触发onload事件,mootools把这些都包装了起来,形成一个统一的自定义事件"domready",你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法:

js 代码
 
  1. window.addEvent('domready', function(){  
  2.         alert('the dom is ready');  
  3. });  

另外,有个快捷方法,效果和以上相同:
js 代码
 
  1. window.onDomReady(function(e){  
  2.         alert('dom is ready!!!');  
  3. });  

 

mootools的Window.Size.js中呢,提供了一系列和浏览器window的尺寸有关的工具方法,

window的扩展方法:

方法: getWidth - 获取window的当前高度(不包含滚动条的滚动量,即当前能见视野高度)

方法:getHeight - 获取window的当前宽度(不包含滚动条的滚动量,即当前能见视野宽度)

方法:getScrollWidth - 获取window的当前高度(包含了整个内容区域,即可滚动部分也计算在内)

方法:getScrollHeight - 获取window的当前宽度(包含了整个内容区域,即可滚动部分也计算在内)

方法:getScrollLeft - 获取window滚动的水平偏移量

方法:getScrollTop - 获取window滚动的垂直偏移量

方法:getSize - 获取window上面几个方法的提供的数据,格式:

{

   'size':            {'x': this.getWidth(),             'y': this.getHeight()},
   'scrollSize':  {'x': this.getScrollWidth(),  'y': this.getScrollHeight()},
   'scroll':         {'x': this.getScrollLeft(),      'y': this.getScrollTop()}

}

 



 

分享到:
评论

相关推荐

    mootools-中文教程

    #### 十、window的扩展 Mootools 扩展了 window 对象,提供了一些全局可用的方法和属性,方便开发者使用。 #### 十一、多彩的开始 这部分可能介绍了Mootools的一些高级用法或特殊功能,帮助开发者更好地理解和运用...

    mootools-datepicker时间插件精确到年月日时分

    Datepicker是MooTools的一个扩展,它通过添加一个交互式的日历组件到输入字段,使得用户能够方便地选择日期和时间。 在"精确到年月日时分.html"这个示例文件中,我们可以看到以下关键知识点: 1. **初始化插件**:...

    Mootools多选插件

    **Mootools多选插件**是一个专门为Mootools JavaScript框架设计的组件,它扩展了基本的选择功能,允许用户在网页表单中进行多选操作。这个插件由开发者独立创建,特别强调了中文支持,确保了在中国境内的使用体验。 ...

    mootools层拖动实现

    Mootools是一个强大的...在实际项目中,你可以根据需要调整和扩展这些代码,以满足特定的需求。提供的压缩包文件“Mootools_Drag”可能包含了更详细的示例代码和说明,这将有助于你进一步理解和应用这些知识。

    (一) mootools介绍

    Mootools 的设计目标是提高开发效率,同时保持代码的可维护性和可扩展性。在本文中,我们将深入探讨 Mootools 的核心概念、主要特性以及如何在实际项目中使用它。 ### 1. 核心概念 Mootools 基于模块化设计,遵循 ...

    mootools入门教程1

    3. 扩展性强:MooTools 1.2 有许多非常好的扩展,可以让开发者轻松地实现各种 Web 交互效果。 如何使用 MooTools 1.2 ? 1. 下载 MooTools 1.2 核心库:首先,需要下载 MooTools 1.2 的核心库。 2. 上传 MooTools ...

    MooTools Mocha UI 最新版

    这极大地扩展了应用的受众范围,降低了因浏览器兼容问题导致的技术支持负担。 在实际应用中,Mocha UI 提供了丰富的API和文档,帮助开发者快速上手并定制自己的用户界面。例如,通过调用`new MUI.Window(options)`...

    mootools实现同页面不同日期选择效果

    在IT行业中,JavaScript库是构建交互式Web应用的...同时,灵活的设计和良好的代码组织结构也是确保项目可维护性和扩展性的重要因素。通过以上步骤,我们可以创建出符合业务需求、多样化且用户体验良好的日期选择功能。

    mootools drag 拖拽

    limits: { x: [0, window.innerWidth - element.offsetWidth], y: [0, window.innerHeight - element.offsetHeight] }, grid: [10, 10], onStart: function() { console.log('开始拖动'); }, onDrag: function...

    PDF格式的Mootools中文文档

    Mootools是一个简洁、模块化的面向对象JavaScript框架,旨在帮助开发者更快捷、更简单地编写具有高可扩展性和兼容性的JavaScript代码。该框架从Prototype.js中汲取了很多设计理念,并在语法上与其相似,但在功能上比...

    mootools教程.pdf

    根据给定的文件内容,这份“Mootools教程.pdf”文档主要介绍了Mootools框架的基础知识点,包括类的创建和继承、对象的扩展、类型判断、实用函数的使用、定时器的管理和DOM操作等。下面是对这些知识点的详细解释: 1...

    滚动图片(mootools)

    综上所述,`ScrollPicture.js`文件提供了一个基于MooTools的图片滚动解决方案,虽然目前功能有限,但通过扩展和优化,可以实现更加丰富的交互和更好的性能。在实际开发中,我们可以根据需求对其进行定制,以满足各种...

    mootools tips

    在MooTools中,你可以定义自己的类,通过继承已有的类来扩展功能。 对于文本框提示信息的实现,我们可以创建一个自定义的Input提示插件。这个插件会监听文本框的`focus`和`blur`事件,当文本框获得焦点时隐藏提示...

    MooScroll Mootools 滚动条美化插件.zip

    Mootools的核心设计理念是面向对象编程,这使得代码易于维护和扩展。MooScroll就是利用了Mootools的这一特性,将其集成到项目中,以实现滚动条的定制化。 使用MooScroll时,你需要遵循以下步骤: 1. **引入库文件*...

    MooTools插件,显示输入字段的密码强度计。_JavaScr.zip

    这个特定的压缩包“MooTools插件,显示输入字段的密码强度计”是针对MooTools的一个扩展,专门用于增强网站上的密码输入框功能。通过集成这个插件,你可以为用户提供一个实时的密码强度指示器,帮助他们创建更安全的...

    Mootools 1.2教程 事件处理

    Mootools扩展了这一能力,允许你为任何DOM元素添加点击事件监听器。例如,你可能希望在用户点击一个按钮时,触发一个特定的行为或执行一段代码。 为了在Mootools中添加一个点击事件,你可以使用.addEvent()方法,并...

    MooTools 1.2介绍

    MooTools 1.2 被视为对CSS功能的扩展,它允许开发者利用JavaScript实现更复杂的用户交互,如响应鼠标和键盘事件,以及创建丰富的动画效果。 首先,为了使用MooTools 1.2,你需要从官方源下载最新版本的核心库文件,...

    mootools.affix:Mootools.Affix

    Mootools.Affix 插件则是 Mootools 生态系统的一部分,它扩展了框架的功能,使得开发者能够轻松实现类似Bootstrap Affix的效果,即元素在达到特定滚动位置时切换其定位模式,从相对定位变为固定定位。 使用 ...

Global site tag (gtag.js) - Google Analytics