mootools | 易学教程

Drag with mootools on mobile

阅读更多关于 Drag with mootools on mobile

问题 Is there a way to make to work the mootools class "Drag" on Safari mobile? Please don't link me to other frameworks. 回答1: Here was my solution to making Mootools Drag support touch events. This method didn't require me to edit the mootools more file since i used Class.refactor (This is only tested with Mootools v.1.3.1) -- it also does not break the usual click events Class.refactor(Drag, { attach: function(){ this.handles.addEvent('touchstart', this.bound.start); return this.previous.apply

Is plain vanilla JavaScript better than using frameworks like jQuery or MooTools? [closed]

阅读更多关于 Is plain vanilla JavaScript better than using frameworks like jQuery or MooTools? [closed]

I am wondering if it is a good idea to rely on frameworks like jQuery or MooTools or should we just use plain JavaScript? Apart from avoiding the re-invention of wheel, do they add any specific value? Since the frameworks are open to the public, can there be possibility of exploitation of any security holes that might appear (of course, unintentionally :) ) in the frameworks? Are there any other points that are to be considered when choosing a framework or otherwise? Frameworks solve cross-browser bugs which normally would cost hours of your time, so you can focus on functionality instead of

Using JavaScript closures in setTimeout

阅读更多关于 Using JavaScript closures in setTimeout

I'm using setTimeout to emulate rendering, and I came to the structure like this: var Renderer = new Class ( { Implements: Events, initialize() { this.onRender(); }, onRender: function() { // some rendering actions setTimeout(this.onRender.bind(this), 20); } }); Does that code have potential memory leaks because of infinite nesting of closures? Or everything is ok? The only solution I came so far is to rewrite it to usual function Renderer() { var onRender = function() { // rendering setTimeout(onRender, 20); }; onRender(); }; But I don't want to lose Mootools Events and Classes. For some

Parse XML in Mootools

阅读更多关于 Parse XML in Mootools

问题 There doesn't seem to be any useful documentation out there about parsing XML in Mootools. Either it's so stupidly easy nobody could be bothered to mention it, or it's so fiendishly difficult everybody's given up trying. Does anyone have any simple cross browser method for parsing XML with Mootools? Here's my little XML file data.xml: <?xml version="1.0"?> <suggestions> <suggestion winning="Y"> <copy><![CDATA[Draw straws to see who wins]]> </copy> <person><![CDATA[Sue]]> </person> <location><

Select text and then calculate its distance from top with Javascript?

阅读更多关于 Select text and then calculate its distance from top with Javascript?

Is it possible with JavaScript to find a given string of text on a webpage, and then calculate its distance (in pixels) from the top of the page? If so, an example would be appreciated. Update: made more robust. A fun and interactive demo: See it in action, here . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Word Finder Fun</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body { font-size: 16px; font-weight: normal; font-family: "Trebuchet MS", Helvetica, Tahoma, Arial,

MooTools CORS request vs native Javascript

阅读更多关于 MooTools CORS request vs native Javascript

I have this MooTools code: new Request.JSON({ method: 'POST', url: URL, /*URL TO ANOTHER DOMAIN*/ onSuccess: function(r){ callback(r); } }).post(data); And this code doesn't send POST requests (OPTIONS only)... Look at the code below (it works great): var http = null, params = Object.toQueryString(data); try { http = new XMLHttpRequest(); } catch (e) { try { http = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { http = null; alert("Your browser does not support AJAX!"); } } } var url = URL; http.onreadystatechange = function

Determine whether element has fixed or percentage width using JavaScript

阅读更多关于 Determine whether element has fixed or percentage width using JavaScript

Using Mootools Element.Dimensions I can get the computed size, in pixels, of any element. However, I can find no way of telling whether an element has been sized using pixel or percentage values (other than in the special case of its having an inline style). Is there a sensible way of doing this? The only solution I can think of (which is so hideous that it barely deserves the name) is to walk through the document stylesheets, looking for selectors that match the target element and then looking through the declared styles for the target propety. Background I'm attempting to replace all

How to convert form data to object using MooTools

阅读更多关于 How to convert form data to object using MooTools

I would like to convert an entire form of data to a javascript object. <form id='myform'> <input type='text' name='field1' value='foo'> <input type='text' name='field2' value='bar'> </form> would convert to a javascript object... { field1: 'foo', field2: 'bar' } Trebla In MooTools you can do easy trick how to convert all forms values into the Object: var formObjects=$('myform').toQueryString().parseQueryString(); Convert to JSON: var formJson=JSON.encode(formObjects); just write your own method, basing it upon the source of the Element.toQueryString - something like this (and i know the method

How to know in which file that defined a js global var in chrome console?

阅读更多关于 How to know in which file that defined a js global var in chrome console?

问题 How to find out which file and line a variable was defined in using google chrome console? For example, the variable Native (from MooTools) has been defined in global scope. I want to know in which file that defined this variable using google chrome console. 回答1: Using chrome : Open the Web Inspector Show the console and check if the var you're searching for exists (ex : Native Enter ) Click on the Resources panel Enter Native= , var Native or Native = in the top right search field You've got

CSS selector for targeting only immediate children and not other identical descendants

阅读更多关于 CSS selector for targeting only immediate children and not other identical descendants

I have a nested sortable list that can have items dynamically added or removed and can be nested n-levels deep. On nesting, a new ul element is injected into whatever li element is selected to be the parent. The initial state of the list is something like the following: <ul id="parent"> <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li> <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li> <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a> <ul> <li id="A"><a href="" class="listLink"><span class=