mootools

JS三教九流系列-Mootools.js-另一款非常优秀的js类库(一)

独自空忆成欢 提交于 2019-12-06 00:56:48
相比于jq,mootools很多人是没有听说过得,他的api和对dom的操作没有jq的好,不容易上手。 设计也不如jq复杂,jq我们在使用时很容易上手,不得不承认,在容易上手的背后有着很复杂的原理,大神们都说过,能分析jq源码,几乎再去分析其他类库源码都没有压力了! mootools其实也是非常优秀的js类库,对象的操作有着非常大的优势。我们开始学习和使用moootools开发项目! mootools类库下载地址: http://apps.bdimg.com/libs/mootools/1.4.5/mootools-yui-compressed.js mootools中文api地址: http://www.chinamootools.com/core.html 一、了解mootools api 我们会将moootools的api与jq进行对比 1.类库运行代码的外部环境 mootools jq window.addEvent('domready', function() { alert(1);//代码位置 }); $(function(){ alert(1);//代码位置 }) jq的代码要包裹在document对象的ready事件内部,我们的是简写 mootools的是包裹在window对象的domready事件内部,准备事件是类库自定义的,

howto create the iPhone Contacts header scroll Effect for html?

不打扰是莪最后的温柔 提交于 2019-12-05 08:19:13
I've setup a basic jsFiddle to give more of an idea of what I'd like to happen. http://jsfiddle.net/nicekiwi/p7NaQ/2/ Hopefully if you think of the contact page on the iOS for the iPhone in terms of what section of the alphabet of contacts you're looking at and how it changes as you scroll the page you'll get the idea, if not read on. Basicly, I have sections of content within a single column vertical scrolling page. When the top of the first header (title 1 in the jsFiddle) get to the top of the screen as ou scroll down the page it would stick at the top until you get to the next header

Firefox 18 breaks mootools 1.2.5 selector engine

匆匆过客 提交于 2019-12-05 08:05:54
Working jsfiddle example here: http://jsfiddle.net/CfJyd/ The problem only occurs in Firefox 18 that I know of. The following html: <div class="test">Test Div</div> <div class="testIgnore">This should stay the same</div> With this js: window.addEvent('domready',function() { $$('.test').set('html','Only Test should update'); }); Results in this output: Only Test should update Only Test should update Upgrading to Mootools 1.4.5 isn't an option at the moment because of lots of plugins that use 1.2.5, can anybody point me in the right direction on getting a fix? I've found the answer here: https:/

JavaScript keypress event get end value of textarea

我的未来我决定 提交于 2019-12-05 04:31:23
I was wondering if it were possible to get the end result in the keypress event? Currently, I am using the keyup because it is activated after the user has done text editing in a texteara, but I have written a method that does something similar using the Mootools library: input.addEvent("keypress", function (input) { var previous_result = this.value; var end_result = this.value + input.key; }); However, this method is horrible when dealing with special keys such as backspace, or if the user chooses to use CTRL + a && Backspace in which case the value of the input element would not be "an empty

MooTools教程(4):函数和MooTools

给你一囗甜甜゛ 提交于 2019-12-05 04:22:19
今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲,请先查看上一篇教程 <《Mootools 1.2教程(3)——数组使用简介》 。今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识。 但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数。此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中。当我们需要把它放在domready的外面时,我们使用了函数(function)。在你在domready里面调用函数之前,函数并不会被执行。 一般来说,一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一个地方,然后通过JavaScript应用来调用它们。当你只是写代码玩玩,可能把所有的东西写在一个页面上更容易一些。在这个教程中,我们使用下面的约定: <script type="text/javascript"> /* * 函数定义写在这里 */ window.addEvent('domready', function() { /* * 函数调用写在这里 */ }); </script> 所有的例子都遵循这个格式,当页面载入的时候(load)执行函数代码。在每个函数的下面,都有一个相应的按钮,你可以点击它们,然后看到结果。这是通过使用MooTools的事件处理来完成的

MooTools教程(1):认识MooTools

北城以北 提交于 2019-12-05 04:22:06
有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。 MooTools 1.2 JavaScript库介绍 MooTools 1.2 是 个强大的轻量级的JavaScript库,专门为减轻Web中交互性JavaScript开发。在某种程度上,你可以认为MooTools是CSS的扩 展。例如,CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间(点击事件、鼠标悬停事件、键盘事 件……),MooTools让这一切变得非常容易。 另外,MooTools还有各种各样的非常好的扩展,可以让你不只是改变一个元素的属性,还可以让你有”morph“(变形)或者”tween“(补间动画)属性,让你有能力去创建动画效果,就像你在我的导航菜单上看到的一样(Fdream注:原作者的, 我的首页 也有)。 这只是一个例子,MooTools可以让你做更多的事情。在接下来的30天里,我们将深入MooTools库,探索从数组(Array)和函数(Function)到Fx.Slide,以及其他捆绑插件的每一个东西。 引用MooTools 1.2 首先,下载并引用MooTools 1.2核心库。 下载

Mootools equivalent of jQuery toggle()?

坚强是说给别人听的谎言 提交于 2019-12-05 02:47:10
问题 I'm using trying to use mootools for a quick task of toggling some text on click. But I can't seem to find a Mootools equivalent of jQuery's toggle() function. What I'm trying to do is as follows: $('a#id').toggle( function() { $(this).set('html', 'new text'); }, function() { $(this).set('html', 'old text'); } ); How would I modify the above code for mootools? Thanks! 回答1: As far as I know that "toggle" on mootools doesn't exists. You could "implement" it, by this way for example: http://www

Getting correct mouse position in a CSS scaled canvas

Deadly 提交于 2019-12-05 02:44:40
问题 I have been trying to take the logic of a couple simple MooTools operations and convert it to work with jQuery. The logic I want is for this jsfiddle what it allows is to get accurate mouse position on a canvas element with css resizing. I found the answer here on SO I have been working for a couple hours with no avail I think I understand his logic but fitting for some reason I am not seeing results Here is what I have done so far with arby's logic from his answer commented out // Get the

Javascript object dependencies

自古美人都是妖i 提交于 2019-12-05 01:51:14
问题 In complex client side projects, the number of Javascript files can get very large. However, for performance reasons it's good to concatenate these files, and compress the resulting file for sending over the wire. I am having problems in concatenating these as the dependencies are included after they are needed in some cases. For instance, there are 2 files: /modules/Module.js <requires Core.js> /modules/core/Core.js The directories are recursively traversed, and Module.js gets included

Any difference between .innerHTML and .set('html','') in mootools?

耗尽温柔 提交于 2019-12-05 01:34:09
问题 To set the html of elements on my site, I use mostly $('elementId').innerHTML = "<p>text</p>"; Looking through the mootools docs, I found this example given: $('myElement').set('html', '<div></div><p></p>'); Is there any difference between these? Should I go through and change .innerHTML to the mootools method, or doesn't it make a difference? 回答1: the reason why the first one works is because - as it stands - a $ selector (document.id) in mootools returns the actual element. this - in normal