jQuery多平台在线预览previewer js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery多平台在线预览previewer js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A simple jQuery page preview plugin.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, page preview, front-end, frontend, web development">
<meta name="author" content="Fengyuan Chen">
<title>jQuery��ƽ̨����Ԥ��previewer</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/previewer.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- header -->
<header class="navbar navbar-static-top docs-header" id="top">
<div class="container">
  <div class="navbar-header">
	<button class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse" type="button">
	  <span class="sr-only">Toggle navigation</span>
	  <span class="icon-bar"></span>
	  <span class="icon-bar"></span>
	  <span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="javascript:void(0);">Previewer</a>
  </div>
  <nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
	<ul class="nav navbar-nav navbar-right">
	  <li><a href="#" target="_top">Docs</a></li>
	  <li><a href="#" target="_top">Github</a></li>
	  <li><a href="#" target="_top">About</a></li>
	</ul>
  </nav>
</div>
</header>

<!-- Jumbotron -->
<div class="jumbotron docs-jumbotron">
<div class="container">
  <h1>Previewer <small class="version">v0.1.0</small></h1>
  <p class="lead">A simple jQuery page preview plugin.</p>
</div>
</div>

<!-- Content -->
<div class="container">
<h2 class="page-header">Overview</h2>
<div class="row">
  <div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
	  <img src="img/starry.jpg" alt="Starry">
	  <div class="caption">
		<h3>Phone</h3>
		<p>Preview on extra small screen width as phone.</p>
		<p><a href="?previewer" class="btn btn-primary" target="_top" role="button">Launch</a></p>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
	  <img src="img/starry-2.jpg" alt="Starry 2">
	  <div class="caption">
		<h3>Tablet</h3>
		<p>Preview on small screen width as tablet.</p>
		<p><a href="?previewer=tablet" class="btn btn-primary" target="_top" role="button">Launch</a></p>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
	  <img src="img/starry-3.jpg" alt="Starry 3">
	  <div class="caption">
		<h3>Laptop</h3>
		<p>Preview on middle screen width as laptop.</p>
		<p><a href="?previewer=laptop" class="btn btn-primary" target="_top" role="button">Launch</a></p>
	  </div>
	</div>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
	<div class="thumbnail">
	  <img src="img/starry-4.jpg" alt="Starry 4">
	  <div class="caption">
		<h3>Desktop</h3>
		<p>Preview on large screen width as desktop.</p>
		<p><a href="?previewer=desktop" class="btn btn-primary" target="_top" role="button">Launch</a></p>
	  </div>
	</div>
  </div>
</div>
</div>
<!-- Scripts -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/previewer.js"></script>
</body>
</html>

JS代码(previewer.min.js):

/*! * Previewer v0.1.0 * https://github.com/fengyuanchen/previewer * * Copyright (c) 2014-2015 Fengyuan Chen * Released under the MIT license * * Date:2015-07-03T15:30:53.998Z */
!function(e){
	"function"==typeof define&&define.amd?define("previewer",["jquery"],e):e("object"==typeof exports?require("jquery"):jQuery)}
(function(e){
	"use strict";
	function t(t){
	var i=[];
	return e.each(t,function(e,t){
	i.push([e,t].join("="))}
),"?"+i.join("&")}
function i(t){
	var i={
}
;
	return t&&(t=t.replace("?","").toLowerCase().split("&"),e.each(t,function(e,t){
	t=t.split("="),e=t[0],i[e]=t[1]}
)),i}
function r(e){
	var t="timestamp="+(new Date).getTime();
	return e+(-1===e.indexOf("?")?"?":"&")+t}
function n(t,i){
	this.$element=e(t),this.options=e.extend({
}
,n.DEFAULTS,e.isPlainObject(i)&&i),this.active=!1,this.init()}
var a=window.location,s="previewer",o="click."+s,p="load."+s;
	n.prototype={
	constructor:n,init:function(){
	var t,r,o,p=this.options;
	this.params=t=i(a.search),t.hasOwnProperty(s)&&(o=!0,r=t[s],-1!==e.inArray(r,n.TYPES)&&(p.type=r)),(o||p.show)&&this.show()}
,show:function(){
	var t,i=this.options;
	this.active||(this.active=!0,this.$previewer=t=e(n.TEMPLATE),t.find('[data-preview="'+i.type+'"]').addClass("active"),t.find(".previewer-sidebar").one(o,e.proxy(this.click,this)).next().find("iframe").one(p,e.proxy(this.load,this)).width(i[i.type]).attr("src",r(a.href)),this.$element.addClass("previewer-open").prepend(t))}
,click:function(i){
	var r=e(i.target),n=r.data(),o=this.params;
	n.dismiss?this.hide():(n.preview||(n=r.parent().data()),n&&n.preview&&(o[s]=n.preview,a.search=t(o)))}
,load:function(t){
	var i=e(t.target);
	i.height(i.contents().find("body").outerHeight())}
,hide:function(){
	var e=this.params;
	delete e[s],a.search=t(e)}
,destroy:function(){
	this.hide()}
}
,n.DEFAULTS={
	show:!1,type:"phone",phone:480,tablet:768,laptop:992,desktop:1200}
,n.TYPES=["phone","tablet","laptop","desktop"],n.setDefaults=function(t){
	e.extend(n.DEFAULTS,t)}
,n.TEMPLATE='<div class="previewer-container"><div class="previewer-sidebar"><button data-dismiss="previewer" title="Close">&times;
	</button><ul class="previewer-nav"><li><a data-preview="phone" title="Phone"><i></i></a></li><li><a data-preview="tablet" title="Tablet"><i></i></a></li><li><a data-preview="laptop" title="Laptop"><i></i></a></li><li><a data-preview="desktop" title="Desktop"><i></i></a></li></ul></div><div class="previewer-mainbody"><iframe scrolling="no"></iframe></div></div>',n.other=e.fn.previewer,e.fn.previewer=function(t){
	return this.each(function(){
	var i,r=e(this),a=r.data(s);
	if(!a){
	if(window.parent!==window.self)return;
	r.data(s,a=new n(this,t))}
"string"==typeof t&&e.isFunction(i=a[t])&&i.call(a)}
)}
,e.fn.previewer.Constructor=n,e.fn.previewer.setDefaults=n.setDefaults,e.fn.previewer.noConflict=function(){
	return e.fn.previewer=n.other,this}
,e(function(){
	/\?.*\bpreviewer\b/.test(a.search)&&e("body").previewer()}
)}
);

CSS代码(main.css):

/* Basic style * -------------------------------------------------------------------------- */
/* Header */
.docs-header{margin-bottom:0;}
/* Navbar */
.navbar-brand{color:#0074d9;}
.navbar-toggle:hover,.navbar-toggle:focus{border-color:#0074d9;}
.navbar-toggle .icon-bar{background-color:#0074d9;}
.navbar-nav > li > a{color:#0074d9;border:1px solid transparent;}
.navbar-nav > li > a:hover,.navbar-nav > li > a:focus{background-color:#fcfcfc;border-left-color:#0074d9;}
@media (min-width:768px){.navbar-nav > li > a:hover,.navbar-nav > li > a:focus{border-left-color:transparent;border-top-color:#0074d9;}
}
/* Button */
.btn-primary{border-color:#0066bf;/* hsb(208,100%,75%) */
 background-color:#0074d9;/* hsb(208,100%,85%) */
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{border-color:#005299;/* hsb(208,100%,60%) */
 background-color:#005fb3;/* hsb(208,100%,70%) */
}
/* Jumbotron */
.docs-jumbotron{background-color:#0074d9;color:#fff;}
.docs-jumbotron .version{font-size:14px;color:#fff;filter:alpha(opacity=50);opacity:0.5;}
/* Footer */
.docs-footer{overflow:hidden;}
.hearts{position:relative;display:block;width:100%;height:30px;margin-top:20px;margin-bottom:20px;color:#ddd;font-size:18px;line-height:30px;text-align:center;}
.hearts:hover{color:#ff4136;}
.hearts:before{position:absolute;top:50%;right:0;left:0;display:block;height:0;border-top:1px solid #eee;content:" ";}
.hearts:after{position:relative;z-index:1;padding-left:8px;padding-right:8px;background-color:#fff;content:"♥";}
/* Google Code Prettify * -------------------------------------------------------------------------- */
.prettyprint{margin-bottom:0;padding:15px !important;border:1px solid #ddd !important;}

附件:下载该文件资源,减少时间成本(增值服务)