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);
});                
              

配置参数

参数 默认值 类型 描述
type string browser 设备的类型,可以是:browser, phone, tablet, desktop 或 laptop
size string 3x 设备的大小,可选值有:1x, 2x, 3x, 〜 9x
theme string black 设备的主题(只有phone或tablet可使用该参数),可选值有:black 或 white
orientation string portrait 只有phone或tablet可使用该参数。可选值有:landscape 或 portrait
address string none 只有browser可以使用该参数。地址栏显示的URL地址
imgPath string ./jquery.devicemock/img/ 模型图片的存放路径
cssPrefix string df- CSS前缀。如果修改需要参考scss文件->-> $prefix : '.df-';