{"__v":35,"_id":"5429b6e52e366c080086b65a","api":{"basic_auth":false,"params":[],"results":{"codes":[]},"try":true,"url":"","auth":"never"},"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"What is X-Tag?\"\n}\n[/block]\nX-Tag is a small library that wraps the Web Components family of APIs to provide a tight, feature-rich interface that makes development of components even easier. The basic build only relies on the presence of the Custom Elements features of the Web Components specs - and in the absence of those features, X-Tag leverages Google's shared polyfill. If you're in a browser that supports the entire Web Components family of specs, or include the full set of polyfills (including HTML Imports and Shadow DOM), X-Tag provides feature hooks to easily incorporate those features.\n\nX-Tag has focuses on eliminating common, repetitive cases, and brings to bear a set of features that are extremely advanced, all in a tiny package weighing less than 12k. With X-Tag, your components will be smaller, more efficient, and easier to maintain.\n\nWelcome to Web Components, Welcome to X-Tag!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Installation of X-Tag\"\n}\n[/block]\nX-Tag comes in three flavors:\n\n1. X-Tag lib (requires you to ensure Custom Element features are present)\n  *  [https://github.com/x-tag/core/blob/master/src/core.js](https://github.com/x-tag/core/blob/master/src/core.js)\n2. X-Tag lib + Custom Elements polyfill\n  * [https://github.com/x-tag/core/blob/master/dist/x-tag-core.min.js](https://github.com/x-tag/core/blob/master/dist/x-tag-core.min.js)\n3. X-Tag lib + full, Web Components polyfill set\n  *  Polyfills: [http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js](http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js)\n  *  X-Tag: [https://github.com/x-tag/core/blob/master/src/core.js](https://github.com/x-tag/core/blob/master/src/core.js)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"It All Starts with Registration\"\n}\n[/block]\nThe most important method in the X-Tag library is `xtag.register()`. The register function on the X-Tag object is what you'll use to declare the lifecycle callbacks, accessors, and events for your custom element. Here's what defining a custom element looks like with X-Tag:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-frankenstein', {\\n  lifecycle:{\\n    created: function(){\\n      alert(\\\"Look! It's moving. It's alive!\\\");\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Meet the Lifecycle Callbacks\"\n}\n[/block]\nThere are 4 lifecycle callbacks you'll leverage often when developing components, here's an example of what all 4 look like when specified in an element definition:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-foo', {\\n  lifecycle:{\\n    created: function(){\\n      alert('I fire once each time an <x-foo> is CREATED');\\n    },\\n    inserted: function(){\\n     \\talert('I fire every time an <x-foo> is INSERTED to the DOM');\\n    },\\n    removed: function(){\\n     \\talert('I fire every time an <x-foo> is REMOVED from the DOM');\\n    },\\n    attributeChanged: function(attrName, oldValue, newValue){\\n     \\talert('I fire every time an ATTRIBUTE is CHANGED on x-foo');\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding Methods to the Mix\"\n}\n[/block]\nYour custom elements are probably going to need some of their own, unique methods to provide the functionality you desire. X-Tag makes method attachment a snap, you just add a 'methods' object to your top level `xtag.register()` definition object and include your methods within it - here's what it looks like:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-foo', {\\n  lifecycle:{\\n    created: function(){\\n      this.shout('WHY AM I YELLING?');\\n    }\\n  },\\n  methods: {\\n    shout: function(message){\\n    \\talert(message);\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Say Hello to Accessors\"\n}\n[/block]\nX-Tag features an easy system for dealing with attributes, setters, getters, and linking them all together. To use these features, add an `accessors` object to the top level of your `xtag.register()` definition object. Within this object, you can add keys that will be made available as getters/setters, as seen below. By adding the key `attribute`, it tells X-Tag to link the `bar` setter/getter with the `bar` attribute.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-foo', {\\n  lifecycle:{\\n    created: function(){\\n      alert('x-foo in da house!');\\n    }\\n  },\\n  accessors: {\\n    bar: {\\n      // this links the attribute 'bar' to the getter/setter xfoo.bar\\n      attribute: {},\\n      get: function(){\\n    \\t\\t// do something when the getter is accessed\\n    \\t},\\n      set: function(value){\\n    \\t\\t// act on the value being passed to the setter\\n    \\t}\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThere are a few advanced options available in the `attribute` object that let you configure the way the setter/getter and attribute linkage operates. The most oft used feature is `name`. This key allows you to specify an alternate attribute name to link the accessor with. Here's an example to help visualize the use case:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-foo', {\\n  accessors: {\\n    bar: {\\n      attribute: {\\n        name: 'data-bar'\\n      }\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"The DL on Events\"\n}\n[/block]\nX-Tag provides an insanely powerful event system that you'll use often in developing your components. We'll cover the basics here, and leave the more advanced features for a special tutorial dedicated to the topic.\n\nThe first thing you'll need to do to add events to your component, is add an events object to the top level of your `xtag.register()` definition object. The keys of this object will be the event types you wish to bind to your custom element. In the example below you'll see a familiar, native event name, `click`, and a couple that are custom: `tap` and `move`. These are just two of the custom events X-Tag provides that unify, optimize, and simplify common event interactions. In the case of `tap` and `move`, X-Tag is unifying the mouse and touch equivalents of these events - have a look:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-foo', {\\n  events: {\\n  \\tclick: function(){\\n    \\t// perform an action when the user clicks on your element\\n    },\\n    tap: function(){\\n    \\t// perform an action when the user taps your custom\\n      // element via a mouse click or touch input.\\n    },\\n    move: function(){\\n    \\t// perform an action when the user moves their \\n      // mouse click or finger (touch) over your element\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe one advanced feature you should know about right off the bat is the `delegate` pseudo. X-Tag features a function modifier system called *pseudos* that allows you to create seamless wrap existing functions to extend their functionality. The `delegate` pseudo enables you to quickly add event delegation (event target filtering based on CSS expression) to any event function you bind to your component. Here's an example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-foo', {\\n  lifecycle:{\\n    created: function(){\\n      this.appendChild(document.createElement('input'));\\n    }\\n  },\\n  events: {\\n    'tap:delegate(input)': function(){\\n    \\t// Perform an action *only* when an <input> within your\\n      // custom element is tapped via mouse click or touch input.\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nFor more information on what event delegation is, see this resource: [http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation)","category":"5429b6e52e366c080086b658","createdAt":"2014-09-29T19:45:41.434Z","excerpt":"This page will help you get started with X-Tag. You'll be up and running in a jiffy!","githubsync":"","hidden":false,"is_link":false,"link_external":false,"link_url":"","order":0,"project":"5429b6e52e366c080086b654","slug":"getting-started","sync_unique":"","title":"Getting Started with X-Tag","type":"basic","updates":[],"user":"5429b69f2e366c080086b649","version":"5429b6e52e366c080086b657","childrenPages":[]}

Getting Started with X-Tag

This page will help you get started with X-Tag. You'll be up and running in a jiffy!

[block:api-header] { "type": "basic", "title": "What is X-Tag?" } [/block] X-Tag is a small library that wraps the Web Components family of APIs to provide a tight, feature-rich interface that makes development of components even easier. The basic build only relies on the presence of the Custom Elements features of the Web Components specs - and in the absence of those features, X-Tag leverages Google's shared polyfill. If you're in a browser that supports the entire Web Components family of specs, or include the full set of polyfills (including HTML Imports and Shadow DOM), X-Tag provides feature hooks to easily incorporate those features. X-Tag has focuses on eliminating common, repetitive cases, and brings to bear a set of features that are extremely advanced, all in a tiny package weighing less than 12k. With X-Tag, your components will be smaller, more efficient, and easier to maintain. Welcome to Web Components, Welcome to X-Tag! [block:api-header] { "type": "basic", "title": "Installation of X-Tag" } [/block] X-Tag comes in three flavors: 1. X-Tag lib (requires you to ensure Custom Element features are present) * [https://github.com/x-tag/core/blob/master/src/core.js](https://github.com/x-tag/core/blob/master/src/core.js) 2. X-Tag lib + Custom Elements polyfill * [https://github.com/x-tag/core/blob/master/dist/x-tag-core.min.js](https://github.com/x-tag/core/blob/master/dist/x-tag-core.min.js) 3. X-Tag lib + full, Web Components polyfill set * Polyfills: [http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js](http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js) * X-Tag: [https://github.com/x-tag/core/blob/master/src/core.js](https://github.com/x-tag/core/blob/master/src/core.js) [block:api-header] { "type": "basic", "title": "It All Starts with Registration" } [/block] The most important method in the X-Tag library is `xtag.register()`. The register function on the X-Tag object is what you'll use to declare the lifecycle callbacks, accessors, and events for your custom element. Here's what defining a custom element looks like with X-Tag: [block:code] { "codes": [ { "code": "xtag.register('x-frankenstein', {\n lifecycle:{\n created: function(){\n alert(\"Look! It's moving. It's alive!\");\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Meet the Lifecycle Callbacks" } [/block] There are 4 lifecycle callbacks you'll leverage often when developing components, here's an example of what all 4 look like when specified in an element definition: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n alert('I fire once each time an <x-foo> is CREATED');\n },\n inserted: function(){\n \talert('I fire every time an <x-foo> is INSERTED to the DOM');\n },\n removed: function(){\n \talert('I fire every time an <x-foo> is REMOVED from the DOM');\n },\n attributeChanged: function(attrName, oldValue, newValue){\n \talert('I fire every time an ATTRIBUTE is CHANGED on x-foo');\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Adding Methods to the Mix" } [/block] Your custom elements are probably going to need some of their own, unique methods to provide the functionality you desire. X-Tag makes method attachment a snap, you just add a 'methods' object to your top level `xtag.register()` definition object and include your methods within it - here's what it looks like: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n this.shout('WHY AM I YELLING?');\n }\n },\n methods: {\n shout: function(message){\n \talert(message);\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Say Hello to Accessors" } [/block] X-Tag features an easy system for dealing with attributes, setters, getters, and linking them all together. To use these features, add an `accessors` object to the top level of your `xtag.register()` definition object. Within this object, you can add keys that will be made available as getters/setters, as seen below. By adding the key `attribute`, it tells X-Tag to link the `bar` setter/getter with the `bar` attribute. [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n alert('x-foo in da house!');\n }\n },\n accessors: {\n bar: {\n // this links the attribute 'bar' to the getter/setter xfoo.bar\n attribute: {},\n get: function(){\n \t\t// do something when the getter is accessed\n \t},\n set: function(value){\n \t\t// act on the value being passed to the setter\n \t}\n }\n }\n});", "language": "javascript" } ] } [/block] There are a few advanced options available in the `attribute` object that let you configure the way the setter/getter and attribute linkage operates. The most oft used feature is `name`. This key allows you to specify an alternate attribute name to link the accessor with. Here's an example to help visualize the use case: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n accessors: {\n bar: {\n attribute: {\n name: 'data-bar'\n }\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "The DL on Events" } [/block] X-Tag provides an insanely powerful event system that you'll use often in developing your components. We'll cover the basics here, and leave the more advanced features for a special tutorial dedicated to the topic. The first thing you'll need to do to add events to your component, is add an events object to the top level of your `xtag.register()` definition object. The keys of this object will be the event types you wish to bind to your custom element. In the example below you'll see a familiar, native event name, `click`, and a couple that are custom: `tap` and `move`. These are just two of the custom events X-Tag provides that unify, optimize, and simplify common event interactions. In the case of `tap` and `move`, X-Tag is unifying the mouse and touch equivalents of these events - have a look: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n events: {\n \tclick: function(){\n \t// perform an action when the user clicks on your element\n },\n tap: function(){\n \t// perform an action when the user taps your custom\n // element via a mouse click or touch input.\n },\n move: function(){\n \t// perform an action when the user moves their \n // mouse click or finger (touch) over your element\n }\n }\n});", "language": "javascript" } ] } [/block] The one advanced feature you should know about right off the bat is the `delegate` pseudo. X-Tag features a function modifier system called *pseudos* that allows you to create seamless wrap existing functions to extend their functionality. The `delegate` pseudo enables you to quickly add event delegation (event target filtering based on CSS expression) to any event function you bind to your component. Here's an example: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n this.appendChild(document.createElement('input'));\n }\n },\n events: {\n 'tap:delegate(input)': function(){\n \t// Perform an action *only* when an <input> within your\n // custom element is tapped via mouse click or touch input.\n }\n }\n});", "language": "javascript" } ] } [/block] For more information on what event delegation is, see this resource: [http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation)
[block:api-header] { "type": "basic", "title": "What is X-Tag?" } [/block] X-Tag is a small library that wraps the Web Components family of APIs to provide a tight, feature-rich interface that makes development of components even easier. The basic build only relies on the presence of the Custom Elements features of the Web Components specs - and in the absence of those features, X-Tag leverages Google's shared polyfill. If you're in a browser that supports the entire Web Components family of specs, or include the full set of polyfills (including HTML Imports and Shadow DOM), X-Tag provides feature hooks to easily incorporate those features. X-Tag has focuses on eliminating common, repetitive cases, and brings to bear a set of features that are extremely advanced, all in a tiny package weighing less than 12k. With X-Tag, your components will be smaller, more efficient, and easier to maintain. Welcome to Web Components, Welcome to X-Tag! [block:api-header] { "type": "basic", "title": "Installation of X-Tag" } [/block] X-Tag comes in three flavors: 1. X-Tag lib (requires you to ensure Custom Element features are present) * [https://github.com/x-tag/core/blob/master/src/core.js](https://github.com/x-tag/core/blob/master/src/core.js) 2. X-Tag lib + Custom Elements polyfill * [https://github.com/x-tag/core/blob/master/dist/x-tag-core.min.js](https://github.com/x-tag/core/blob/master/dist/x-tag-core.min.js) 3. X-Tag lib + full, Web Components polyfill set * Polyfills: [http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js](http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js) * X-Tag: [https://github.com/x-tag/core/blob/master/src/core.js](https://github.com/x-tag/core/blob/master/src/core.js) [block:api-header] { "type": "basic", "title": "It All Starts with Registration" } [/block] The most important method in the X-Tag library is `xtag.register()`. The register function on the X-Tag object is what you'll use to declare the lifecycle callbacks, accessors, and events for your custom element. Here's what defining a custom element looks like with X-Tag: [block:code] { "codes": [ { "code": "xtag.register('x-frankenstein', {\n lifecycle:{\n created: function(){\n alert(\"Look! It's moving. It's alive!\");\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Meet the Lifecycle Callbacks" } [/block] There are 4 lifecycle callbacks you'll leverage often when developing components, here's an example of what all 4 look like when specified in an element definition: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n alert('I fire once each time an <x-foo> is CREATED');\n },\n inserted: function(){\n \talert('I fire every time an <x-foo> is INSERTED to the DOM');\n },\n removed: function(){\n \talert('I fire every time an <x-foo> is REMOVED from the DOM');\n },\n attributeChanged: function(attrName, oldValue, newValue){\n \talert('I fire every time an ATTRIBUTE is CHANGED on x-foo');\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Adding Methods to the Mix" } [/block] Your custom elements are probably going to need some of their own, unique methods to provide the functionality you desire. X-Tag makes method attachment a snap, you just add a 'methods' object to your top level `xtag.register()` definition object and include your methods within it - here's what it looks like: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n this.shout('WHY AM I YELLING?');\n }\n },\n methods: {\n shout: function(message){\n \talert(message);\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Say Hello to Accessors" } [/block] X-Tag features an easy system for dealing with attributes, setters, getters, and linking them all together. To use these features, add an `accessors` object to the top level of your `xtag.register()` definition object. Within this object, you can add keys that will be made available as getters/setters, as seen below. By adding the key `attribute`, it tells X-Tag to link the `bar` setter/getter with the `bar` attribute. [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n alert('x-foo in da house!');\n }\n },\n accessors: {\n bar: {\n // this links the attribute 'bar' to the getter/setter xfoo.bar\n attribute: {},\n get: function(){\n \t\t// do something when the getter is accessed\n \t},\n set: function(value){\n \t\t// act on the value being passed to the setter\n \t}\n }\n }\n});", "language": "javascript" } ] } [/block] There are a few advanced options available in the `attribute` object that let you configure the way the setter/getter and attribute linkage operates. The most oft used feature is `name`. This key allows you to specify an alternate attribute name to link the accessor with. Here's an example to help visualize the use case: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n accessors: {\n bar: {\n attribute: {\n name: 'data-bar'\n }\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "The DL on Events" } [/block] X-Tag provides an insanely powerful event system that you'll use often in developing your components. We'll cover the basics here, and leave the more advanced features for a special tutorial dedicated to the topic. The first thing you'll need to do to add events to your component, is add an events object to the top level of your `xtag.register()` definition object. The keys of this object will be the event types you wish to bind to your custom element. In the example below you'll see a familiar, native event name, `click`, and a couple that are custom: `tap` and `move`. These are just two of the custom events X-Tag provides that unify, optimize, and simplify common event interactions. In the case of `tap` and `move`, X-Tag is unifying the mouse and touch equivalents of these events - have a look: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n events: {\n \tclick: function(){\n \t// perform an action when the user clicks on your element\n },\n tap: function(){\n \t// perform an action when the user taps your custom\n // element via a mouse click or touch input.\n },\n move: function(){\n \t// perform an action when the user moves their \n // mouse click or finger (touch) over your element\n }\n }\n});", "language": "javascript" } ] } [/block] The one advanced feature you should know about right off the bat is the `delegate` pseudo. X-Tag features a function modifier system called *pseudos* that allows you to create seamless wrap existing functions to extend their functionality. The `delegate` pseudo enables you to quickly add event delegation (event target filtering based on CSS expression) to any event function you bind to your component. Here's an example: [block:code] { "codes": [ { "code": "xtag.register('x-foo', {\n lifecycle:{\n created: function(){\n this.appendChild(document.createElement('input'));\n }\n },\n events: {\n 'tap:delegate(input)': function(){\n \t// Perform an action *only* when an <input> within your\n // custom element is tapped via mouse click or touch input.\n }\n }\n});", "language": "javascript" } ] } [/block] For more information on what event delegation is, see this resource: [http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation)
{"__v":8,"_id":"542b2506044e1e2200413667","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.register(NAME, DEFINITION)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Argument\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"NAME\",\n    \"0-2\": \"The custom element's tag name *(must contain a dash)*\",\n    \"0-1\": \"String\",\n    \"1-0\": \"DEFINITION\",\n    \"1-1\": \"Object\",\n    \"1-2\": \"An object containing the various features your custom element will utilize\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.register('x-shouter', {\\n  content: '<input type=\\\"text\\\" />',\\n  lifecycle:{\\n    created: function(){\\n      alert(this.firstElementChild);\\n      // Alerts the input specified via the 'content' property\\n    }\\n  },\\n  methods: {\\n    shout: function(message){\\n      setTimeout(function(){\\n       alert(message);\\n      }, this.delay);\\n    }\\n  },\\n  accessors: {\\n    delay: {\\n      attribute: {}\\n    }\\n  },\\n  events: {\\n    tap: function(){\\n    \\tthis.shout(this.firstElementChild.value);\\n    }\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-09-30T21:47:50.297Z","excerpt":"Define and register a new custom element.","githubsync":"","hidden":false,"is_link":false,"link_external":false,"link_url":"","order":0,"project":"5429b6e52e366c080086b654","slug":"register","sync_unique":"","title":"xtag.register","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.register

Define and register a new custom element.

##`xtag.register(NAME, DEFINITION)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "NAME", "0-2": "The custom element's tag name *(must contain a dash)*", "0-1": "String", "1-0": "DEFINITION", "1-1": "Object", "1-2": "An object containing the various features your custom element will utilize" }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.register('x-shouter', {\n content: '<input type=\"text\" />',\n lifecycle:{\n created: function(){\n alert(this.firstElementChild);\n // Alerts the input specified via the 'content' property\n }\n },\n methods: {\n shout: function(message){\n setTimeout(function(){\n alert(message);\n }, this.delay);\n }\n },\n accessors: {\n delay: {\n attribute: {}\n }\n },\n events: {\n tap: function(){\n \tthis.shout(this.firstElementChild.value);\n }\n }\n});", "language": "javascript" } ] } [/block]
##`xtag.register(NAME, DEFINITION)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "NAME", "0-2": "The custom element's tag name *(must contain a dash)*", "0-1": "String", "1-0": "DEFINITION", "1-1": "Object", "1-2": "An object containing the various features your custom element will utilize" }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.register('x-shouter', {\n content: '<input type=\"text\" />',\n lifecycle:{\n created: function(){\n alert(this.firstElementChild);\n // Alerts the input specified via the 'content' property\n }\n },\n methods: {\n shout: function(message){\n setTimeout(function(){\n alert(message);\n }, this.delay);\n }\n },\n accessors: {\n delay: {\n attribute: {}\n }\n },\n events: {\n tap: function(){\n \tthis.shout(this.firstElementChild.value);\n }\n }\n});", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542b3539044e1e22004136d2","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.query(ELEMENT, SELECTOR)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Argument\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"ELEMENT\",\n    \"0-1\": \"Element Reference\",\n    \"0-2\": \"A direct reference to a the DOM element you wish to query\",\n    \"1-0\": \"SELECTOR\",\n    \"1-1\": \"String\",\n    \"1-2\": \"The CSS selector you would like to query the element with\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var specialItemArray = xtag.query(document.body, 'ul li.special');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-09-30T22:56:57.771Z","excerpt":"Wrapper for querySelectorAll that always returns a real Array","is_link":false,"link_url":"","order":1,"project":"5429b6e52e366c080086b654","slug":"query","sync_unique":"","title":"xtag.query","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.query

Wrapper for querySelectorAll that always returns a real Array

##`xtag.query(ELEMENT, SELECTOR)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "Element Reference", "0-2": "A direct reference to a the DOM element you wish to query", "1-0": "SELECTOR", "1-1": "String", "1-2": "The CSS selector you would like to query the element with" }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var specialItemArray = xtag.query(document.body, 'ul li.special');", "language": "javascript" } ] } [/block]
##`xtag.query(ELEMENT, SELECTOR)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "Element Reference", "0-2": "A direct reference to a the DOM element you wish to query", "1-0": "SELECTOR", "1-1": "String", "1-2": "The CSS selector you would like to query the element with" }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var specialItemArray = xtag.query(document.body, 'ul li.special');", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542c517bd9a8e90e00a6543e","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.toArray(ARRAY_LIKE_OBJECT)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"ARRAY_LIKE_OBJECT\",\n    \"0-1\": \"Special array-like objects\",\n    \"0-2\": \"Objects like: `NodeList`, `HTMLCollection`, `DOMTokeList`, etc.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var childArray = xtag.toArray(myElement.children);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T19:09:47.838Z","excerpt":"Converts all manner of array-like objects to true JavaScript arrays","is_link":false,"link_url":"","order":2,"project":"5429b6e52e366c080086b654","slug":"toarray","sync_unique":"","title":"xtag.toArray","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.toArray

Converts all manner of array-like objects to true JavaScript arrays

##`xtag.toArray(ARRAY_LIKE_OBJECT)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "ARRAY_LIKE_OBJECT", "0-1": "Special array-like objects", "0-2": "Objects like: `NodeList`, `HTMLCollection`, `DOMTokeList`, etc." }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "var childArray = xtag.toArray(myElement.children);", "language": "javascript" } ] } [/block]
##`xtag.toArray(ARRAY_LIKE_OBJECT)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "ARRAY_LIKE_OBJECT", "0-1": "Special array-like objects", "0-2": "Objects like: `NodeList`, `HTMLCollection`, `DOMTokeList`, etc." }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "var childArray = xtag.toArray(myElement.children);", "language": "javascript" } ] } [/block]
{"__v":2,"_id":"542c583ed9a8e90e00a65457","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.typeOf(UNKNOWN_OBJECT)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"0-0\": \"UNKNOWN_OBJECT\",\n    \"h-1\": \"Type\",\n    \"0-1\": \"Object\",\n    \"0-2\": \"Any valid JavaScript or DOM object\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.typeOf(document) // returns \\\"htmldocument\\\"\\ntypeof document // returns \\\"object\\\"\\n\\nxtag.typeOf(document.body.children) // returns \\\"htmlcollection\\\"\\ntypeof document.body.children // returns \\\"object\\\"\\n\\nxtag.typeOf(/foo/) // returns \\\"regexp\\\"\\ntypeof /foo/ // returns \\\"object\\\"\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T19:38:38.645Z","excerpt":"An advanced type-check function that returns accurate object types, unlike native `typeof`","is_link":false,"link_url":"","order":3,"project":"5429b6e52e366c080086b654","slug":"typeof","sync_unique":"","title":"xtag.typeOf","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.typeOf

An advanced type-check function that returns accurate object types, unlike native `typeof`

##`xtag.typeOf(UNKNOWN_OBJECT)` [block:parameters] { "data": { "h-0": "Arguments", "0-0": "UNKNOWN_OBJECT", "h-1": "Type", "0-1": "Object", "0-2": "Any valid JavaScript or DOM object" }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "xtag.typeOf(document) // returns \"htmldocument\"\ntypeof document // returns \"object\"\n\nxtag.typeOf(document.body.children) // returns \"htmlcollection\"\ntypeof document.body.children // returns \"object\"\n\nxtag.typeOf(/foo/) // returns \"regexp\"\ntypeof /foo/ // returns \"object\"", "language": "javascript" } ] } [/block]
##`xtag.typeOf(UNKNOWN_OBJECT)` [block:parameters] { "data": { "h-0": "Arguments", "0-0": "UNKNOWN_OBJECT", "h-1": "Type", "0-1": "Object", "0-2": "Any valid JavaScript or DOM object" }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "xtag.typeOf(document) // returns \"htmldocument\"\ntypeof document // returns \"object\"\n\nxtag.typeOf(document.body.children) // returns \"htmlcollection\"\ntypeof document.body.children // returns \"object\"\n\nxtag.typeOf(/foo/) // returns \"regexp\"\ntypeof /foo/ // returns \"object\"", "language": "javascript" } ] } [/block]
{"__v":2,"_id":"542c63c142d04c14004262e7","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.wrap(ORIGINAL, NEW)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"0-0\": \"ORIGINAL\",\n    \"0-1\": \"Function\",\n    \"0-2\": \"This function is called first within the wrapper function, and its output is always the returned value.\",\n    \"1-0\": \"NEW\",\n    \"1-1\": \"Function\",\n    \"1-2\": \"This function is the second one called within the wrapped function, it receives the same arguments as the original.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var foo = function(){ alert(1); return 1 };\\nvar bar = function(){ alert(2); return 2 };\\n\\nvar fooBar = xtag.wrap(foo, bar);\\n\\nfooBar(); // alerts '1', then '2', returns the value 2\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T20:27:45.941Z","excerpt":"Wraps two functions together into a new function that calls both. Both functions receive the same arguments, but the original function's output is always returned.","is_link":false,"link_url":"","order":4,"project":"5429b6e52e366c080086b654","slug":"wrap","sync_unique":"","title":"xtag.wrap","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.wrap

Wraps two functions together into a new function that calls both. Both functions receive the same arguments, but the original function's output is always returned.

##`xtag.wrap(ORIGINAL, NEW)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "0-0": "ORIGINAL", "0-1": "Function", "0-2": "This function is called first within the wrapper function, and its output is always the returned value.", "1-0": "NEW", "1-1": "Function", "1-2": "This function is the second one called within the wrapped function, it receives the same arguments as the original." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var foo = function(){ alert(1); return 1 };\nvar bar = function(){ alert(2); return 2 };\n\nvar fooBar = xtag.wrap(foo, bar);\n\nfooBar(); // alerts '1', then '2', returns the value 2", "language": "javascript" } ] } [/block]
##`xtag.wrap(ORIGINAL, NEW)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "0-0": "ORIGINAL", "0-1": "Function", "0-2": "This function is called first within the wrapper function, and its output is always the returned value.", "1-0": "NEW", "1-1": "Function", "1-2": "This function is the second one called within the wrapped function, it receives the same arguments as the original." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var foo = function(){ alert(1); return 1 };\nvar bar = function(){ alert(2); return 2 };\n\nvar fooBar = xtag.wrap(foo, bar);\n\nfooBar(); // alerts '1', then '2', returns the value 2", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542c65b6ddd3190e0022886f","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.merge(IMPORTING_OBJECT, EXPORTING_OBJECT)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"IMPORTING_OBJECT\",\n    \"0-1\": \"Object\",\n    \"1-0\": \"EXPORTING_OBJECT\",\n    \"1-1\": \"Object\",\n    \"0-2\": \"The object that is having properties merged into it from the exporting object\",\n    \"1-2\": \"The object whose keys and values are being recursively added to the importing object.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var foo = { one: 1, two: { value: 2 } };\\nvar bar = { two: { value: 'two' }, three: 3 };\\n\\nxtag.merge(foo, bar); // returns { one: 1, two: { value: 'two' }, three: 3 }\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T20:36:06.448Z","excerpt":"Recursively copies all values from one object to another, overwriting properties that collide.","is_link":false,"link_url":"","order":5,"project":"5429b6e52e366c080086b654","slug":"merge","sync_unique":"","title":"xtag.merge","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.merge

Recursively copies all values from one object to another, overwriting properties that collide.

##`xtag.merge(IMPORTING_OBJECT, EXPORTING_OBJECT)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "IMPORTING_OBJECT", "0-1": "Object", "1-0": "EXPORTING_OBJECT", "1-1": "Object", "0-2": "The object that is having properties merged into it from the exporting object", "1-2": "The object whose keys and values are being recursively added to the importing object." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var foo = { one: 1, two: { value: 2 } };\nvar bar = { two: { value: 'two' }, three: 3 };\n\nxtag.merge(foo, bar); // returns { one: 1, two: { value: 'two' }, three: 3 }", "language": "javascript" } ] } [/block]
##`xtag.merge(IMPORTING_OBJECT, EXPORTING_OBJECT)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "IMPORTING_OBJECT", "0-1": "Object", "1-0": "EXPORTING_OBJECT", "1-1": "Object", "0-2": "The object that is having properties merged into it from the exporting object", "1-2": "The object whose keys and values are being recursively added to the importing object." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var foo = { one: 1, two: { value: 2 } };\nvar bar = { two: { value: 'two' }, three: 3 };\n\nxtag.merge(foo, bar); // returns { one: 1, two: { value: 'two' }, three: 3 }", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542c6ab5ddd3190e0022887e","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.uid()`\n\nThis function takes no arguments\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var myUID = xtag.uid(); // returns a random, base 36 string\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T20:57:25.993Z","excerpt":"Generates and returns a unique identifier","is_link":false,"link_url":"","order":6,"project":"5429b6e52e366c080086b654","slug":"uid","sync_unique":"","title":"xtag.uid","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.uid

Generates and returns a unique identifier

##`xtag.uid()` This function takes no arguments [block:code] { "codes": [ { "code": "var myUID = xtag.uid(); // returns a random, base 36 string", "language": "javascript" } ] } [/block]
##`xtag.uid()` This function takes no arguments [block:code] { "codes": [ { "code": "var myUID = xtag.uid(); // returns a random, base 36 string", "language": "javascript" } ] } [/block]
{"__v":2,"_id":"542c4dbdd9a8e90e00a6542f","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.prefix[js | css | dom | lowercase]`\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Permutation\",\n    \"h-1\": \"Value\",\n    \"0-0\": \"`xtag.prefix.js`\",\n    \"0-1\": \"The version of the current browser's prefix used in common JavaScript code interactions\",\n    \"1-0\": \"`xtag.prefix.css`\",\n    \"2-0\": \"`xtag.prefix.dom`\",\n    \"3-0\": \"`xtag.prefix.lowercase`\",\n    \"1-1\": \"A version of the current browser's prefix in the native CSS format\",\n    \"2-1\": \"The version of the current browser's prefix for global DOM APIs\",\n    \"3-1\": \"A simple, lowercase version of the current browser's prefix\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"myElement.style[xtag.prefix.js + 'Transform'] = 'scale(2)';\\n\\nstyleElement.textContent = '#foo {' + \\n  xtag.prefix.css + 'transform: scale(2);' +\\n'}';\\n\\nvar pointerEventObject = window[xtag.prefix.dom + 'PointerEvent'];\\n\\nif (xtag.prefix.lowercase == 'webkit') {\\n\\t// Conditional logic based on feature detection\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T18:53:49.805Z","excerpt":"A convenient object that provides various permutations of browser prefix","is_link":false,"link_url":"","order":7,"project":"5429b6e52e366c080086b654","slug":"prefix","sync_unique":"","title":"xtag.prefix","type":"basic","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.prefix

A convenient object that provides various permutations of browser prefix

##`xtag.prefix[js | css | dom | lowercase]` [block:parameters] { "data": { "h-0": "Permutation", "h-1": "Value", "0-0": "`xtag.prefix.js`", "0-1": "The version of the current browser's prefix used in common JavaScript code interactions", "1-0": "`xtag.prefix.css`", "2-0": "`xtag.prefix.dom`", "3-0": "`xtag.prefix.lowercase`", "1-1": "A version of the current browser's prefix in the native CSS format", "2-1": "The version of the current browser's prefix for global DOM APIs", "3-1": "A simple, lowercase version of the current browser's prefix" }, "cols": 2, "rows": 4 } [/block] [block:code] { "codes": [ { "code": "myElement.style[xtag.prefix.js + 'Transform'] = 'scale(2)';\n\nstyleElement.textContent = '#foo {' + \n xtag.prefix.css + 'transform: scale(2);' +\n'}';\n\nvar pointerEventObject = window[xtag.prefix.dom + 'PointerEvent'];\n\nif (xtag.prefix.lowercase == 'webkit') {\n\t// Conditional logic based on feature detection\n}", "language": "javascript" } ] } [/block]
##`xtag.prefix[js | css | dom | lowercase]` [block:parameters] { "data": { "h-0": "Permutation", "h-1": "Value", "0-0": "`xtag.prefix.js`", "0-1": "The version of the current browser's prefix used in common JavaScript code interactions", "1-0": "`xtag.prefix.css`", "2-0": "`xtag.prefix.dom`", "3-0": "`xtag.prefix.lowercase`", "1-1": "A version of the current browser's prefix in the native CSS format", "2-1": "The version of the current browser's prefix for global DOM APIs", "3-1": "A simple, lowercase version of the current browser's prefix" }, "cols": 2, "rows": 4 } [/block] [block:code] { "codes": [ { "code": "myElement.style[xtag.prefix.js + 'Transform'] = 'scale(2)';\n\nstyleElement.textContent = '#foo {' + \n xtag.prefix.css + 'transform: scale(2);' +\n'}';\n\nvar pointerEventObject = window[xtag.prefix.dom + 'PointerEvent'];\n\nif (xtag.prefix.lowercase == 'webkit') {\n\t// Conditional logic based on feature detection\n}", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542c78b9ddd3190e002288c2","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.matchSelector(ELEMENT, SELECTOR)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Argument\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"ELEMENT\",\n    \"0-1\": \"DOM element reference\",\n    \"0-2\": \"The element to test the selector string against.\",\n    \"1-0\": \"SELECTOR\",\n    \"1-1\": \"CSS selector string\",\n    \"1-2\": \"The CSS expression provided to test against the passed in element.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.matchSelector(myElement, '.foo');\\n// returns true if the element has the class 'foo', false if not.\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T21:57:13.474Z","excerpt":"Returns true if the selector provided matches the element in question","is_link":false,"link_url":"","order":8,"project":"5429b6e52e366c080086b654","slug":"matchselector","sync_unique":"","title":"xtag.matchSelector","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.matchSelector

Returns true if the selector provided matches the element in question

##`xtag.matchSelector(ELEMENT, SELECTOR)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "The element to test the selector string against.", "1-0": "SELECTOR", "1-1": "CSS selector string", "1-2": "The CSS expression provided to test against the passed in element." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.matchSelector(myElement, '.foo');\n// returns true if the element has the class 'foo', false if not.", "language": "javascript" } ] } [/block]
##`xtag.matchSelector(ELEMENT, SELECTOR)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "The element to test the selector string against.", "1-0": "SELECTOR", "1-1": "CSS selector string", "1-2": "The CSS expression provided to test against the passed in element." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.matchSelector(myElement, '.foo');\n// returns true if the element has the class 'foo', false if not.", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542dc221cb19820800c1f4e3","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.queryChildren(ELEMENT, SELECTOR)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Argument\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"ELEMENT\",\n    \"0-1\": \"DOM element reference\",\n    \"0-2\": \"A reference to the DOM element you wish to query\",\n    \"1-0\": \"SELECTOR\",\n    \"1-1\": \"String\",\n    \"1-2\": \"The CSS selector string you would like to test for matches against the element's direct children.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var arrayOfRedLinks = xtag.queryChildren(myElement, 'a.red');\\n// Finds all links with the class 'red'\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-02T21:22:41.951Z","excerpt":"Query only the direct children of an element with a provided selector","is_link":false,"link_url":"","order":9,"project":"5429b6e52e366c080086b654","slug":"querychildren","sync_unique":"","title":"xtag.queryChildren","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.queryChildren

Query only the direct children of an element with a provided selector

##`xtag.queryChildren(ELEMENT, SELECTOR)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "A reference to the DOM element you wish to query", "1-0": "SELECTOR", "1-1": "String", "1-2": "The CSS selector string you would like to test for matches against the element's direct children." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var arrayOfRedLinks = xtag.queryChildren(myElement, 'a.red');\n// Finds all links with the class 'red'", "language": "javascript" } ] } [/block]
##`xtag.queryChildren(ELEMENT, SELECTOR)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "A reference to the DOM element you wish to query", "1-0": "SELECTOR", "1-1": "String", "1-2": "The CSS selector string you would like to test for matches against the element's direct children." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "var arrayOfRedLinks = xtag.queryChildren(myElement, 'a.red');\n// Finds all links with the class 'red'", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"546cd03aeb9cfd1400dd4495","api":{"basic_auth":false,"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.createFragment(CONTENT)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Argument\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"CONTENT\",\n    \"0-1\": \"- String\\n- Function-embedded Multi-line Comment String\\n- Element Reference(s)\",\n    \"0-2\": \"Pass in a string, function with a multi-line comment string of HTML, or element references, and a Document Fragment will be created from the contents\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var fragFromString = xtag.createFragment('<div>Hello World!</div>');\\n\\nvar fragFromReferences = xtag.createFragment(myDiv, myHeading);\\n\\nvar fragFromFunction = xtag.createFragment(function(){/*\\n\\t<header>Hello</header>\\n  <section>I'm a multi-line HTML fragment</section>\\n  <footer>Goodbye</footer>\\n*/});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-11-19T17:15:38.342Z","excerpt":"Generates a document fragment from a string, list of nodes, or a multi-line comment string","githubsync":"","hidden":false,"link_external":false,"link_url":"","order":10,"project":"5429b6e52e366c080086b654","slug":"xtagcreatefragment","sync_unique":"","title":"xtag.createFragment","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.createFragment

Generates a document fragment from a string, list of nodes, or a multi-line comment string

##`xtag.createFragment(CONTENT)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "CONTENT", "0-1": "- String\n- Function-embedded Multi-line Comment String\n- Element Reference(s)", "0-2": "Pass in a string, function with a multi-line comment string of HTML, or element references, and a Document Fragment will be created from the contents" }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "var fragFromString = xtag.createFragment('<div>Hello World!</div>');\n\nvar fragFromReferences = xtag.createFragment(myDiv, myHeading);\n\nvar fragFromFunction = xtag.createFragment(function(){/*\n\t<header>Hello</header>\n <section>I'm a multi-line HTML fragment</section>\n <footer>Goodbye</footer>\n*/});", "language": "javascript" } ] } [/block]
##`xtag.createFragment(CONTENT)` [block:parameters] { "data": { "h-0": "Argument", "h-1": "Type", "h-2": "Description", "0-0": "CONTENT", "0-1": "- String\n- Function-embedded Multi-line Comment String\n- Element Reference(s)", "0-2": "Pass in a string, function with a multi-line comment string of HTML, or element references, and a Document Fragment will be created from the contents" }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "var fragFromString = xtag.createFragment('<div>Hello World!</div>');\n\nvar fragFromReferences = xtag.createFragment(myDiv, myHeading);\n\nvar fragFromFunction = xtag.createFragment(function(){/*\n\t<header>Hello</header>\n <section>I'm a multi-line HTML fragment</section>\n <footer>Goodbye</footer>\n*/});", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"542c723042d04c140042631c","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.requestFrame(FUNCTION)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-1\": \"Function\",\n    \"0-0\": \"FUNCTION\",\n    \"0-2\": \"The function you would like executed before each browser render loop.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.requestFrame(function(){\\n\\talert(new Date().getTime());\\n  // alerts the ms epoch time before each render\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T21:29:20.863Z","excerpt":"A function to wrap the native requestAnimationFrame, or polyfill it in browsers missing the feature.","is_link":false,"link_url":"","order":11,"project":"5429b6e52e366c080086b654","slug":"requestframe","sync_unique":"","title":"xtag.requestFrame","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.requestFrame

A function to wrap the native requestAnimationFrame, or polyfill it in browsers missing the feature.

##`xtag.requestFrame(FUNCTION)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-1": "Function", "0-0": "FUNCTION", "0-2": "The function you would like executed before each browser render loop." }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "xtag.requestFrame(function(){\n\talert(new Date().getTime());\n // alerts the ms epoch time before each render\n});", "language": "javascript" } ] } [/block]
##`xtag.requestFrame(FUNCTION)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-1": "Function", "0-0": "FUNCTION", "0-2": "The function you would like executed before each browser render loop." }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "xtag.requestFrame(function(){\n\talert(new Date().getTime());\n // alerts the ms epoch time before each render\n});", "language": "javascript" } ] } [/block]
{"__v":6,"_id":"542c737342d04c1400426325","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.cancelFrame(FRAME_ID)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"FRAME_ID\",\n    \"0-1\": \"Number\",\n    \"0-2\": \"The numerical identifier returned when you create an animation frame request using `xtag.requestFrame`.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var frameID = xtag.requestFrame(function(){ \\n  alert('foo') \\n});\\n// Cancels the pending request\\nxtag.cancelFrame(frameID); \",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T21:34:43.290Z","excerpt":"Cancels a pending animation frame request tied to the provided request ID","is_link":false,"link_url":"","order":12,"project":"5429b6e52e366c080086b654","slug":"cancelframe","sync_unique":"","title":"xtag.cancelFrame","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.cancelFrame

Cancels a pending animation frame request tied to the provided request ID

##`xtag.cancelFrame(FRAME_ID)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "FRAME_ID", "0-1": "Number", "0-2": "The numerical identifier returned when you create an animation frame request using `xtag.requestFrame`." }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "var frameID = xtag.requestFrame(function(){ \n alert('foo') \n});\n// Cancels the pending request\nxtag.cancelFrame(frameID); ", "language": "javascript" } ] } [/block]
##`xtag.cancelFrame(FRAME_ID)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "FRAME_ID", "0-1": "Number", "0-2": "The numerical identifier returned when you create an animation frame request using `xtag.requestFrame`." }, "cols": 3, "rows": 1 } [/block] [block:code] { "codes": [ { "code": "var frameID = xtag.requestFrame(function(){ \n alert('foo') \n});\n// Cancels the pending request\nxtag.cancelFrame(frameID); ", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"5466f10ff2b6390800dfd8f0","api":{"basic_auth":false,"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.skipFrame(FUNCTION)`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.skipFrame(function(){\\n\\tconsole.log('the next frame was rendered at ' + new Date());\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-11-15T06:22:07.105Z","excerpt":"Guarantees one render frame is skipped before executing the user-provided function","githubsync":"","hidden":false,"is_link":false,"link_url":"","order":13,"project":"5429b6e52e366c080086b654","slug":"xtagskipframe","sync_unique":"","title":"xtag.skipFrame","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.skipFrame

Guarantees one render frame is skipped before executing the user-provided function

##`xtag.skipFrame(FUNCTION)` [block:code] { "codes": [ { "code": "xtag.skipFrame(function(){\n\tconsole.log('the next frame was rendered at ' + new Date());\n});", "language": "javascript" } ] } [/block]
##`xtag.skipFrame(FUNCTION)` [block:code] { "codes": [ { "code": "xtag.skipFrame(function(){\n\tconsole.log('the next frame was rendered at ' + new Date());\n});", "language": "javascript" } ] } [/block]
{"__v":2,"_id":"542c6cdd42d04c1400426303","api":{"basic_auth":false,"params":[],"results":{"codes":[{"language":"json","code":"{}","name":"Success"},{"language":"json","code":"{}","name":"Failure"}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.skipTransition(ELEMENT, FUNCTION)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"ELEMENT\",\n    \"0-1\": \"DOM element reference\",\n    \"0-2\": \"The element you would like CSS transitions disabled for while you execute your function.\",\n    \"1-0\": \"FUNCTION\",\n    \"1-1\": \"Function\",\n    \"1-2\": \"A function to execute while the element has its CSS transitions disabled.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.skipTransition(myElement, function(){\\n\\tmyElement.style.height = '50%';\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-10-01T21:06:37.310Z","excerpt":"Allows you to pass in a function while temporarily disabling CSS transitions on an element. Helpful for setting styles or modifying an element's DOM structure without triggering unwanted transition instances.","is_link":false,"link_url":"","order":14,"project":"5429b6e52e366c080086b654","slug":"skiptransition","sync_unique":"","title":"xtag.skipTransition","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.skipTransition

Allows you to pass in a function while temporarily disabling CSS transitions on an element. Helpful for setting styles or modifying an element's DOM structure without triggering unwanted transition instances.

##`xtag.skipTransition(ELEMENT, FUNCTION)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "The element you would like CSS transitions disabled for while you execute your function.", "1-0": "FUNCTION", "1-1": "Function", "1-2": "A function to execute while the element has its CSS transitions disabled." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.skipTransition(myElement, function(){\n\tmyElement.style.height = '50%';\n});", "language": "javascript" } ] } [/block]
##`xtag.skipTransition(ELEMENT, FUNCTION)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "The element you would like CSS transitions disabled for while you execute your function.", "1-0": "FUNCTION", "1-1": "Function", "1-2": "A function to execute while the element has its CSS transitions disabled." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.skipTransition(myElement, function(){\n\tmyElement.style.height = '50%';\n});", "language": "javascript" } ] } [/block]
{"__v":1,"_id":"5466f271f2b6390800dfd8f3","api":{"basic_auth":false,"params":[],"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"try":true,"url":"","auth":"never"},"body":"##`xtag.addEvent(ELEMENT, TYPE, FUNCTION)`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"ELEMENT\",\n    \"0-1\": \"DOM element reference\",\n    \"0-2\": \"The element you would like to attach an event listener to.\",\n    \"1-0\": \"TYPE\",\n    \"1-1\": \"String\",\n    \"1-2\": \"The event name, with any event pseudos you may want to chain.\",\n    \"2-0\": \"FUNCTION\",\n    \"2-1\": \"Function\",\n    \"2-2\": \"The event handler you wish to use when the event occurs.\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.addEvent(myElement, 'tap', function(event){\\n\\talert('myElement was just tapped ' + this);\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-11-15T06:28:01.337Z","excerpt":"Add a native, custom, or X-Tag library event listener to an element.","githubsync":"","hidden":false,"is_link":false,"link_url":"","order":15,"project":"5429b6e52e366c080086b654","slug":"xtagaddevent","sync_unique":"","title":"xtag.addEvent","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.addEvent

Add a native, custom, or X-Tag library event listener to an element.

##`xtag.addEvent(ELEMENT, TYPE, FUNCTION)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "The element you would like to attach an event listener to.", "1-0": "TYPE", "1-1": "String", "1-2": "The event name, with any event pseudos you may want to chain.", "2-0": "FUNCTION", "2-1": "Function", "2-2": "The event handler you wish to use when the event occurs." }, "cols": 3, "rows": 3 } [/block] [block:code] { "codes": [ { "code": "xtag.addEvent(myElement, 'tap', function(event){\n\talert('myElement was just tapped ' + this);\n});", "language": "javascript" } ] } [/block]
##`xtag.addEvent(ELEMENT, TYPE, FUNCTION)` [block:parameters] { "data": { "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "0-0": "ELEMENT", "0-1": "DOM element reference", "0-2": "The element you would like to attach an event listener to.", "1-0": "TYPE", "1-1": "String", "1-2": "The event name, with any event pseudos you may want to chain.", "2-0": "FUNCTION", "2-1": "Function", "2-2": "The event handler you wish to use when the event occurs." }, "cols": 3, "rows": 3 } [/block] [block:code] { "codes": [ { "code": "xtag.addEvent(myElement, 'tap', function(event){\n\talert('myElement was just tapped ' + this);\n});", "language": "javascript" } ] } [/block]
{"__v":0,"_id":"5466f3e6f2b6390800dfd8f7","api":{"results":{"codes":[{"status":200,"language":"json","code":"{}","name":""},{"status":400,"language":"json","code":"{}","name":""}]},"basic_auth":false,"try":true,"params":[],"url":"","auth":"never"},"body":"##`xtag.addEvents(ELEMENT, OBJECT)`\n[block:parameters]\n{\n  \"data\": {\n    \"0-1\": \"DOM element reference\",\n    \"0-2\": \"The element you would like to attach event listeners to.\",\n    \"0-0\": \"ELEMENT\",\n    \"h-0\": \"Arguments\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"1-0\": \"OBJECT\",\n    \"1-1\": \"Object\",\n    \"1-2\": \"An object composed of multiple events - keys are event names, and values are the event handlers.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"xtag.addEvents(myElement, {\\n  'tap': function(event){\\n\\t\\talert('myElement was just tapped ' + this);\\n  },\\n  'keypress': function(event){\\n  \\talert('the following key was pressed on myElement' + e.keyCode);\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","category":"542b24db044e1e2200413666","createdAt":"2014-11-15T06:34:14.138Z","excerpt":"Add multiple native, custom, or X-Tag library event listeners to an element using one function.","githubsync":"","hidden":false,"is_link":false,"link_url":"","order":16,"project":"5429b6e52e366c080086b654","slug":"xtagaddevents","sync_unique":"","title":"xtag.addEvents","type":"fn","updates":[],"user":"5429ba601163360800ed31b9","version":"5429b6e52e366c080086b657","childrenPages":[]}

xtag.addEvents

Add multiple native, custom, or X-Tag library event listeners to an element using one function.

##`xtag.addEvents(ELEMENT, OBJECT)` [block:parameters] { "data": { "0-1": "DOM element reference", "0-2": "The element you would like to attach event listeners to.", "0-0": "ELEMENT", "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "1-0": "OBJECT", "1-1": "Object", "1-2": "An object composed of multiple events - keys are event names, and values are the event handlers." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.addEvents(myElement, {\n 'tap': function(event){\n\t\talert('myElement was just tapped ' + this);\n },\n 'keypress': function(event){\n \talert('the following key was pressed on myElement' + e.keyCode);\n }\n});", "language": "javascript" } ] } [/block]
##`xtag.addEvents(ELEMENT, OBJECT)` [block:parameters] { "data": { "0-1": "DOM element reference", "0-2": "The element you would like to attach event listeners to.", "0-0": "ELEMENT", "h-0": "Arguments", "h-1": "Type", "h-2": "Description", "1-0": "OBJECT", "1-1": "Object", "1-2": "An object composed of multiple events - keys are event names, and values are the event handlers." }, "cols": 3, "rows": 2 } [/block] [block:code] { "codes": [ { "code": "xtag.addEvents(myElement, {\n 'tap': function(event){\n\t\talert('myElement was just tapped ' + this);\n },\n 'keypress': function(event){\n \talert('the following key was pressed on myElement' + e.keyCode);\n }\n});", "language": "javascript" } ] } [/block]