Vex - Take control of your dialogs

Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because it's tiny (6kb minified), has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.

Features

• Drop-in replacement for alert, confirm, and prompt
• Easilly configurable animations which are smooth as butter
• Tiny footprint (6kb minified) and only depends on jQuery
• Looks and behaves great on mobile devices
• Open multiple dialogs at once and close them individually or all at once
• Built in CSS spinner for asynchronous dialogs
• AMD support

Requirements

• jQuery

Browser Support

• IE8+
• Firefox 4+
• Current WebKit (Chrome, Safari)
• Opera

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.hubspot.com

1. INCLUDE JS AND CSS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os';</script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />

2. HTML

<a class="demo-login">Log in</a>

3. JAVASCRIPT

$('.demo-login').click(function(){
        vex.dialog.open({
            message: 'Enter your username and password:',
            input: '' +
                '<input name="username" type="text" placeholder="Username" required />' +
                '<input name="password" type="password" placeholder="Password" required />' +
            '',
            buttons: [
                $.extend({}, vex.dialog.buttons.YES, { text: 'Login' }),
                $.extend({}, vex.dialog.buttons.NO, { text: 'Back' })
            ],
            callback: function (data) {
                $('.demo-result-login').show().html('' +
                    '<h4>Result</h4>' +
                    '<p>' +
                        'Username: <b>' + data.username + '</b><br/>' +
                        'Password: <b>' + data.password + '</b>' +
                    '</p>' +
                '')
            }
        });
});

4. API

Vex Dialog exposes 4 main apis:

• vex.dialog.alert(stringOrOptions)
• vex.dialog.confirm(options)
• vex.dialog.prompt(options)
• vex.dialog.open(options)

(Internally, alert, confirm, and prompt call open with a different compositions of options.)

Alert: Use alerts when you want to display a message to the user, but you don't want to give them any choice to procede.

Open an alert

vex.dialog.alert 'Thanks for checking out Vex!'

Confirm: Use confirms when you want to present an yes-or-no option to the user.

Open a confirm

vex.dialog.confirm

    message: 'Are you absolutely sure you want to destroy the alien planet?'

    callback: (value) -> console.log(value)

Prompt: Open a prompt

vex.dialog.prompt

    message: 'What planet did the aliens come from?'

    placeholder: 'Planet name'

    callback: (value) -> console.log(value)

Open: With open, you are in full control.

Inputs

You can specify your own form inputs, and the name attribute will be the property name of the data object passed in the callback.

Buttons

You can specify your own buttons if you want more options than just OK or Cancel. If you simply want to change the labels, you can override the default options for the following:

vex.dialog.buttons.YES.text = 'Okiedokie'

vex.dialog.buttons.NO.text = 'Aahw hell no'

<link rel="stylesheet" href="vex-theme-default.css" />
<script>vex.defaultOptions.className = 'vex-theme-default';</script>

vex.defaultOptions.className = 'vex-theme-os';

vex.dialog.alert

    message: 'Testing the wireframe theme.'

    className: 'vex-theme-wireframe' # Overwrites defaultOptions