Get new jQuery plugins just once a week

×

DeviceMock-js

July 6, 2015

Devicemock-js | jQuery plugin to easily device frame mockups

Devicemock-js is a useful jQuery plugin to easily device frame mockups and support multiple devices

Created by rm-labo

Download

Example

DeviceMock-js plugin

device mockups

jquery.devicemock.js

Demo

Demo is here.

Usage

Import libraries.

<link rel="stylesheet" type="text/css" href="path/to/assets/css/jquery.devicemock.css">
<script src="jquery.js"></script> <!--  v1.5.0〜 -->
<script src="path/to/assets/jquery.devicemock.js"></script>

Your basic markup and JavaScript should look like this.

<div class="selector">
   <!-- some contents  (div , img , iframe ...) -->
</div>

$('.selector').deviceMock({
   type        : 'browser',   // browser , phone , tablet , desktop , laptop
   size        : '1x',        // null(1x) , 2x , 3x , 4x , 5x
   theme       : 'black' ,    // black , white (if phone or tablet)
   orientation : 'portrait' , // landscape , portrait (if phone or tablet)
   address     : 'http://example123.com' // show on URL BAR
});

You can custmize path of asset img dir and css prefix. The following is the default value.

$('.selector').deviceMock({
   //・・・・
   imgPath     : './jquery.devicemock/img/', // path of asset img dir
   cssPrefix   : 'df-'                       // css namespace
});

Multiple installation example with data attribute.

<!-- browser -->
<div style="width:300px;" data-devicemock-type="browser" data-devicemock-size="2x" data-devicemock-theme="" data-devicemock-orientation="" data-devicemock-address="http://example123.com">
   <img src="path/to/img.jpg">
</div>

<!-- tablet -->
<div data-devicemock-type="tablet" data-devicemock-size="4x" data-devicemock-theme="black" data-devicemock-orientation="landscape" data-devicemock-address="">
   <div>
      <!-- some inner contents (div , img , iframe ...) -->
   </div>
</div>

$('[data-devicemock-type]').each(function(i){
   var that = this;
   var opt  = {};
   var object = [
               'type',
               'size',
               'theme',
               'orientation',
               'address'
            ];
   for (prop in object) {
      var data = $(that).data('dm-'+object[prop]);
      if (object.hasOwnProperty(prop)) {
         opt[object[prop]] = data;
      }
   }
   $(that).deviceMock(opt);
});

Available Options

Parameter Type Default value Description
type string browser Could be
browser, phone, tablet, desktop, or laptop
size string 3x Could be
1x, 2x, 3x, 〜 9x
theme string black only when type is phone or tablet.

Could be
black or white
orientation string portrait only when type is phone or tablet.

Could be
black or white
address string none only when type is browser.

example : 'http://example.com'
imgPath string ./jquery.devicemock/img/ path of asset img dir

example : './assets/img/'
cssPrefix string df- css namespace

Please refer to the scss file if you want to change.
-> $prefix : '.df-';
DeviceMock-js

Related posts:

Zepto js
SimpleSlideView
jquery.enhsplitter
DeviceMock-js plugin

http://jquer.in/wp-content/uploads/2015/07/DeviceMock-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever