Skip to content

Latest commit

 

History

History
181 lines (100 loc) · 2.66 KB

README.md

File metadata and controls

181 lines (100 loc) · 2.66 KB
Raw

Previewer

A simple jQuery page preview plugin.

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.