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

devicemock

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://jq22.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-';

PREVIOUS:
NEXT:
jQuery桌面便签
jQuery移动端扭蛋抽奖