CODEWITHSUNDEEP
jquery-uijquery-mobile
Fabien Quatravaux
Fabien Quatravaux

Reputation: 3786

Is it possible to use a single jQuery mobile widget within a non-mobile web page?

I am using jQuery UI to put some widgets on a web page primarily designed for large screens. I was looking for a flipswitch widget, and I found one provided by jQuery mobile framework.

Is it possible to use jQuery mobile to just make this flipswitch widget work, without the whole jQuery mobile theming ?

Upvotes: 1

Views: 151

Answers (1)

Omar
Omar

Reputation: 31732

You can use jQuery Mobile's widgets by creating a custom build. All you have to do is to choose the widgets you want, and then load JS library as well as style sheets in head. You will also need to modify style sheets, either by modifying them manually or using ThemeRoller.

HTML

<head>
  <link rel="stylesheet" href="structure.css" />
  <link rel="stylesheet" href="theme.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="custom-build.js"></script>
</head>
<body>
  <form>
    <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
  </form>
</body>

To initialize the widget, just call .flipswitch() on .ready(). For more methods, check widget's API.

$(function () {
  $("#flip-checkbox-1").flipswitch();
});

Demo

Upvotes: 1

Related Questions