Cheat Sheet (Newbie)

Paolo Nesti Poggi edited this page Jun 21, 2013 · 9 revisions

YUI Cheat Sheet [WIP]

Getting Started

Initial Setup

// Load the YUI seed script
<script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

//Create Y object to host YUI APIs
<script>
YUI().use(modules, function (Y) {
   ...
});
</script>

Load modules

YUI().use("io", "overlay", function (Y) {
   Y.io({ ... });
   var overlay = new Y.Overlay();
   ...
});

Load more modules

YUI().use("io", "overlay", function (Y) {
   Y.io({ ... });
   ...
   Y.use("autocomplete", function () {
       var ac = new Y.AutoComplete({ ... });
   });
   ...
});

Enable debug mode

YUI({ filter:"debug", combine: false, logInclude: {event: false, attribute: true} }).use(...);

DOM Nodes: Basics

YUI().use("node", function(Y) {
    // Select
    var byElementName = Y.Node.one("body");
    var byID = Y.Node.one("#container");
    var items = Y.Node.all("#friends li.selectable");

    // Create
    var button = Y.Node.create("<button>OK</button>");
    button.appendChild(button);
    button.append("<button>Cancel</button>");

    // Change
    body.appendChild(button);
});

// Properties
button.set("id", "foo");   // button.id = "foo";
button.get("offsetWidth"); // button.offsetWidth;

// Methods
button.focus();
button.removeChild(someOtherNode);
button.remove();

// Styles
button.setStyle("backgroundColor", "#f00");
button.setStyles({...});
button.addClass("default");
button.removeClass(“hidden”);

// Classes
div.addClass("foo");
div.toggleClass("foo");
div.removeClass("foo");

// DOM Nodes: Value Adds
div.setXY([100, 200]);
div.getXY();
div.get("region"); // {top, bottom, left, right, width, height}

div.show(); div.hide();

div.load(url);

div.remove();

// Plugin to a single instance.
body.plug(Y.Plugin.ScrollInfo);

body.scrollInfo.getOffscreenNodes();
body.scrollInfo.on("scrollToBottom", function(){});

// Plugin to a single instance
div.plug(Y.Plugin.Align);

div.align.to(otherNode, "tl", "tr");

DOM Events

/* use "node", "event" */

div.on("click", function (e) {
  var target = e.target;

  if (e.pageX > 500) {
     e.preventDefault();
  }
});

div.once("click", function (e) {...});

div.delegate("click", function (e) {

  var target = e.target,               // Target
      container = e.container,         // Delegate container: 'div'
      currentTarget = e.currentTarget; // Delegate target: '.contact'

}, ".contact");

// Don't need any target/ancestor filtering
div.on("mouseenter", function (e) {...});
div.on("mouseleave", function (e) {...});
div.on("clickoutside", function (e) {...});

// Gestures - Abstraction across touch/mouse/ms-pointer events.
div.on("flick", function (e) {...}, {minVelocity: ..., minDistance: ...});
div.on("tap", function (e) {...});

div.on("gesturemovestart", function (e) {...});
   div.on("gesturemove", function (e) {...});
   div.on("gesturemoveend", function (e) {...});

// Input
input.on("valuechange", function (e) {...});
input.on("key", function (e) {...}, "enter");

Getting Data

Getting Data: YQL

/* use "yql" */

// Works everywhere, including nodejs and inside win8 apps

Y.YQL("select * from weather.forecast where location=90210", function (o) {

  // Use the YQL console, to figure out where to look in 'o'
  myDiv.setHTML(o.query.results.channel.item.description);

});

###Getting Data: JSONP

/* use "jsonp" */

// Use only with trusted data
Y.jsonp("https://api.github.com/users/yui?callback={callback}", function (o) {

   // Use the service docs to figure out where to look
   myDiv.setHTML(o.data);

});

Getting Data: IO

/* use "io" */

Y.io("http://samedomain/service?foo=bar", {
   headers: {
      'Content-Type': 'application/json'
   },
   on: {
      start: function () {...},
      failure: function () {...},
      success: function (o) {
         myDiv.setHTML(o.responseText); // or o.responseXML;
      }
   }
});

Getting Data: Parsing Raw Strings

/* use "json" */

var arr = Y.JSON.parse("[{name:'Abc', rank:1}, ...]");

/* use "datatype-xml" */

var xmlDoc = Y.XML.parse(
  "<root><item><name>Abc</name><rank>1</rank></item>...</root>");

CSS

Pull in all the styles to make your page look pretty. This includes Base, Grids, Buttons, Forms, Menus, and Tables.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.0.2/pure-min.css">

Form Styling:

<form class="pure-form">...</form>

Other Classes:

  • .pure-form-aligned
  • .pure-form-stacked
  • .pure-input-rounded
  • .pure-checkbox
  • .pure-radio

Forms can also be used with grids

<a class="pure-button pure-button-selected">Selected</a>​
<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
    ...
    </ul>
</div>

<div class="yui3-popover left">...​</div>​

<div class=”pure-g-r”>
   <div class="yui3-u-1-3">...</div>
   <div class="yui3-u-1-3">...</div>
   <div class="yui3-u-1-3">...</div>
</div>

JS Effects

JS Effects: Show/Hide

/* use "transition" */

mydiv.show(true);
mydiv.hide(true);

mydiv.show(true, {duration: 1}, callback);
mydiv.hide(true, {duration: 1}, callback);

mydiv.show('fadeIn', {easing: 'ease-in'}, callback);
mydiv.hide('fadeOut', {duration: 'ease-out'}, callback);

JS Effects: Transition

/* use "transition" */

mydiv.transition({
    easing: 'ease-out',
    duration: 0.75, // seconds
    width: '10px',
    height: '10px'
}, function () {     // callback
    this.remove();
});

JS Effects: Anim

/* use "anim" */

new Y.Anim({
    node: demoA,
    duration: 1.5,
    to : {
        curve: [[120, 100], [250, 230], [350, 400]]
    }
}).run();

JS Effects: Graphics

/* use "graphics" */

var mygraphic = new Y.Graphic({ render:"#mygraphiccontainer" }),

    myrect = mygraphic.addShape({
        type: "rect",
        width: 300,
        height: 200,
        fill: {
            color: "#0000ff"
        },
        stroke: {
            weight: 2,
            color: "#ff0000"
        },
        x: 50,
        y: 100
    });

Apps

Apps: Single Page Apps

/* use "app", "handlebars" */

var app = new Y.App({

   views: {
      home: {
         type: HomeView
      },
      users: {
         type: UsersView
      },
      user: {
         type: UserView,
            parent: 'users'
         }
      }
   },

   serverRouting: false,
   transitions: true

});

Apps: Views

Handlebars Template

<script id="user-template" type="text/x-handlebars-template">
    <h1>User Form</h1>
    <form>
        <label>First Name: <input value="{{firstname}}"></label>
        <label>Last Name:  <input value="{{lastname}}"></label>
    </form>
</script>

View Instance

var UserView = Y.Base.create("user", Y.View, [], {

      template: Y.Handlebars.compile(Y.one('#user-template').getHTML()),

      render: function () {
         var html = this.template({firstname: "Satyen", lastname: "Desai"});
         this.get('container').setHTML(html);

         return this;
      }
   });

Apps: App Flow

// add route (for history, back-button)
app.route("/users", navigateToUsers);

// navigate to route (updating history)
app.navigate("/users");

// show view without updating history
app.showView("users");

Widgets

/* use "slider" */

var slider = new Y.Slider({
  min: -200,
  max: 200,
  value: 100,
  render: true
});

slider.after("valueChange", function (e) {
  if (e.prevVal > 0 && e.newVal <= 0) {
     // Moved backwards across the 0 value
  }
});
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.