DailyJS

jide.js, Matchmedia-ng

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

ui angularjs matchMedia

jide.js, Matchmedia-ng

Posted by Alex R. Young on .
Featured

ui angularjs matchMedia

jide.js, Matchmedia-ng

Posted by Alex R. Young on .

jide.js

jide.js (GitHub: jidesoft / jidejs, License: MIT) from JIDE Software is a toolkit for HTML5 UI controls. The authors have embraced RequireJS, and the API is based around constructor functions that accept objects. Properties and values are observable, so UI components can react to data model changes. Layouts are also supported, which are stackable panes reminiscent of desktop UI toolkits.

There are tutorials for using jide.js with Bower and Yeoman, so if you want to create a quick project you can type npm install -g generator-jidejs and then yo jidejs.

Here's an example of how to create a button with jide.js:

require([  
  'jidejs/ui/control/Button'
], function(Button) {
  new Button({
    // define the text property
    text: 'Click the button',
    // define event listeners
    on: {
      // the 'action' event is fired when the button is clicked
      action: function() {
        alert('Hello jide.js');
      }
    }
  });
});

Matchmedia-ng

Matchmedia-ng (GitHub: AnalogJ / matchmedia-ng, License: MIT) by Jason Kulatunga is a set of AngularJS bindings for window.matchMedia. That means you can easily branch on mobile devices, or for printed content:

matchmedia.on('tv and (min-width: 700px) and (orientation: landscape)', function(mediaQueryList) {  
  console.log(mediaQueryList.matches);
});

There's also a matchMedia polyfill written by Paul Irish.