Improve this

jQuery

Before reading this section, we suggest you reading Getting Started and Fundamentals to grasp the basics of Onsen UI. Don’t worry, it won’t take more than 5 minutes.

Setup

Using jQuery with Onsen UI is pretty simple.

  1. Download Onsen UI.
  2. Get jQuery.
  3. Load onsenui.js and 2 CSS files.
  4. Load jQuery.

Onsen UI components can be used as other native DOM element.

Example Installation

The following code illustrates how to use jQuery with Onsen UI, both loaded from the CDN.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
</head>
<body>
  <script>
    $(function(){
      // Initialization code
      $('ons-button').on('click', function(e) {
        ons.notification.alert('Button is tapped!');
      })
    });
  </script>
  <ons-button>Click me!</ons-button>
</body>
</html>
← Introduction to Bindings AngularJS 1.x →