サンプルデザインをMacに埋め込んで見せられるjQueryプラグイン「DeviceMock.js」

デザインした、コーディングした、それをMacやiPhoneのウィンドウにはめ込んで見せたい。
そんなことはサイトを作る立場だと、よくあることでしょう
jQueryプラグインのjquery.devicemock.jsを使用すれば簡単に実現できます。
サンプルデザインをMacに埋め込んで見せられるjQueryプラグイン「DeviceMock.js」サンプル

使用方法 jquery.devicemock.jsからファイル一式をダウンロード。
<link href="jquery.devicemock.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.devicemock.1.0.0.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.selector').deviceMock({
type : 'laptop', // browser , phone , tablet , desktop , laptop
size : '5x', // null(1x) , 2x , 3x , 4x , 5x
theme : 'white' , // black , white (if phone or tablet)
orientation : 'portrait' , // landscape , portrait (if phone or tablet)
imgPath : '画像パス', //svgフォルダの配置場所
address : 'http://url' // URL BARに表示する文字(browserのみ)
});
});
</script>

あとは上記で指定したclass内にiframeや画像などを記述すれば完成です。
<div class="selector">
<iframe src="http://skan.in" border=0 width=480 height=500 frameborder=0></iframe>
</div>

サンプルデザインをMacに埋め込んで見せられるjQueryプラグイン「DeviceMock.js」サンプル

sponsors

「サンプルデザインをMacに埋め込んで見せられるjQueryプラグイン「DeviceMock.js」」をシェアする

記事作成:
記事URL:

TOP > > > サンプルデザインをMacに埋め込んで見せられるjQueryプラグイン「DeviceMock.js」