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-';
|
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!