插件 jQuery.avgrund 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.avgrund 中文API文档 https://github.com/voronianski/jquery.avgrund.js

Avgrund

Libscore Badge

Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page.

It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Tested with jQuery versions 1.4+

File size of minified version is ~1Kb.

Usage

You can simply include javascript file and init Avgrund with one line:

$('element').avgrund();

and linking avgrund.css file to the project:

<link rel="stylesheet" href="path/to/your/avgrund.css">

If you use bower then you can simply install it as:

bower install jquery.avgrund

Using plugin with Browserify

At first install plugin via NPM:

npm install jquery.avgrund
npm install jquery-browserify

In your server-side node.js (e.g. express app):

app.use(require('browserify')({
    require : ['jquery-browserify', 'jquery.avgrund']
}));

And in your browser-side you can init plugin now:

var $ = require('jquery-browserify');
require('jquery.avgrund')($);

Options

You’re also able to use some of the options that let you customize it as you wish:

$('element').avgrund({
    width: 380, // max is 640px
    height: 280, // max is 350px
    showClose: false, // switch to 'true' for enabling close button
    showCloseText: '', // type your text for close button
    closeByEscape: true, // enables closing popup by 'Esc'..
    closeByDocument: true, // ..and by clicking document itself
    holderClass: '', // lets you name custom class for popin holder..
    overlayClass: '', // ..and overlay block
    enableStackAnimation: false, // enables different type of popin's animation
    onBlurContainer: '', // enables blur filter for specified block
    openOnEvent: true, // set to 'false' to init on load
    setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
    onLoad: function (elem) { ... }, // set custom call before popin is inited..
    onUnload: function (elem) { ... }, // ..and after it was closed
    template: 'Your string content goes here..' // or function (elem) { ... }, or selector $('.content')
});

More detailed information on every option you can find here.

Documentation

Here is the list of available avgrund options:

width - string | number, default: ‘380px’

Set popup width (currently stict to max 640px).

height - string | number, default: ‘280px’

Set popup height (currently strict to max 350px).

showClose - boolean, default: false

Show/hide close button.

showCloseText - string

If you decided to show close button then you probably want to add close text to it.

closeByEscape - boolean, default: true

Allow users to close popup by clicking Esc button.

closeByDocument - boolean, default: true

Allow users to close popup by clicking everywhere on document (except popup of course).

holderClass - string

Adds custom css classes to avgrund popup, example:

$(element).avgrund({
    holderClass: 'my-custom-class'
});

results in adding this class to avgrund container:

<div class="avgrund-popin my-custom-class">...</div>
overlayClass - string

Adds custom css classes to avgrund overlay container.

enableStackAnimation - boolean, default: false

Possibility to add a bit different popup hiding animation type.

onBlurContainer - string

Class name for container element that will be blurred when popup appears, example:

$(element).avgrund({
    onBlurContainer: '#my-container'
});

Please note that currently css blur is not supported in all modern browsers.

openOnEvent - boolean, default: true

If you want to show avgrund on page load set this option value to false, example:

$(document).avgrund({
    openOnEvent: false
});
setEvent - string, default: ‘click’

With this option you can manage events that will open popup on certain element:

$(element).avgrund({
    setEvent: 'mouseover' // will open popin on element's mouseover
});
onLoad - function

If you need to make some preparations or whatever before avgrund popup will be shown, example:

$(element).avgrund({
    onLoad: function (element) {
        console.log('This function will be called before dialog is initialized');
    }
});
onUnload - function

This function will be executed after popup was closed, example:

$(element).avgrund({
    onUnload: function (element) {
        console.log('This message will be shown after dialog is closed');
    }
});
template - string | function | jQuery object

Specify your content for popin here, it can be string value:

$(element).avgrund({
    template: '<p>This is popin content!</p>'
});

or function that returns content itself:

$(element).avgrund({
    template: function (element) {
        // return 'your content..'
    }
});

Also it accepts jQuery objects (dynamic as well), so you can create element with content inside your app:

<div class="content" style="display: none;">
    My content for popin!
</div>

and use it in template of popin:

$('element').avgrund({
    template: $('.content')
});

Demo

Check the example here: http://labs.voronianski.com/jquery.avgrund.js/

Inspired by Hakim’s demo: https://github.com/hakimel/avgrund/

Changelog

Update (Sep 28, 2013)

Added AMD and CommonJS styles support.

Update (Sep 22, 2013)

Added support jQuery selectors in template option.

Update (June 15, 2013)

Better fix for overlay and long content pages, minor add-ons.

Update (May 26, 2013)

Few fixes, and plugin is available as bower package now. So you can simply install it as:

Update (Feb 25, 2013)

A bunch of small but very useful fixes and updates, including multiple avgrund popins on a page, removing popins from DOM after deactivation (also fixed an issue to make sure avgrund close effect works) and position:fixed/transform/overflow issue for scrolled pages in -webkit.

Update (Nov 18, 2012)

Get 2 new useful options for popin that were missed before. Now you can set your custom functions before Avgrund dialog is open and after it was closed.

Update (Sep 30, 2012)

Some new updates include initializing popin without event. Also now you can set up your own event for an element. Added ability to use a custom function inside avgrund’s template option. Thanks to juice49 for pull request.

Update (Aug 31, 2012)

New options added - disable closing popup by ‘Esc’ and ‘Document click’. Blur css filter for browsers that support it (seems only webkit ones for now).

Contribution

We still have some issues to fix and make avgrund better, if you have any suggestions raise them in issues please.


MIT Licensed

enjoy!

Bitdeli Badge


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>