phcorp / previewer

A simple jQuery page preview plugin.

Previewer

A simple jQuery page preview plugin.

• Demo

Main

dist/
├── previewer.css     (4 KB)
├── previewer.min.css (3 KB)
├── previewer.js      (6 KB)
└── previewer.min.js  (3 KB)

Getting started

Quick start

Four quick start options are available:

• Download the latest release.
• Clone the repository: git clone https://github.com/fengyuanchen/previewer.git.
• Install with NPM: npm install previewer.
• Install with Bower: bower install previewer.

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/previewer.css" rel="stylesheet">
<script src="/path/to/previewer.js"></script>

Usage

Initialize with $.fn.previewer method.

// With option
$('body').previewer({
  show: true
});

// With method
$('body').previewer('show');

Initialize with url search parameter.

http://example.com/?previewer

Options

// Set previewer options
$().previewer(options);

// Change the global default options
$.fn.previewer.setDefaults(options);

show

• Type: Boolean
• Default: false

Show the preview page directly when initialize.

type

• Type: String
• Default: 'phone'
• Options: 'phone', 'tablet', 'laptop', 'desktop'

Preview screen type.

phone

• Type: Number
• Default: 480

Extra small preview screen width.

tablet

• Type: Number
• Default: 768

Small preview screen width.

laptop

• Type: Number
• Default: 992

Middle preview screen width.

desktop

• Type: Number
• Default: 1200

Large preview screen width.

Methods

$().previewer('method');

show()

Show the previewer.

hide()

Hide the previewer.

destroy()

Destroy the previewer.

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.previewer.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="previewer.js"></script>
<script>
  $.fn.previewer.noConflict();
  // Code that uses other plugin's "$().previewer" can follow here.
</script>

Browser Support

• Chrome (latest 2)
• Firefox (latest 2)
• Internet Explorer 8+
• Opera (latest 2)
• Safari (latest 2)

As a jQuery plugin, you also need to see the jQuery Browser Support.

License

Released under the MIT license.