可生成各种桌面和移动设备模型的jQuery插件

devicemock是一款可以生成各种桌面设备和移动设备模型的jQuery插件。你可以使用该插件来模拟各种显示设备，还可以设置它们的尺寸大小和颜色模式。

使用方法

使用该图片轮播插件需要引入jQuery和jquery.vitrine.js和jquery.devicemock.css文件。

<link rel="stylesheet" type="text/css" href="path/to/jquery.devicemock.css">              
<script src="jquery.min.js"></script>
<script src="jquery.devicemock.js"></script>                
              

HTML结构

该设备模型插件的基本HTML结构如下：

<div class="selector">
   <!-- 内容可以是  (div , img , iframe ...) -->
</div>             
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该插件。

$('.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
});             
              

你还可以设置模型图片（SVG文件）所在的文件夹路径和CSS前缀名称：

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

你还可以通过data-*属性来应用多个实例。

<!-- 浏览器 -->
<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>

<!-- 平板 -->
<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);
});                
              

配置参数