README

Setup

JrkDynamicPopupBundle is a dynamic popup manager for Symfony2

Using composer

Add jrk/dynamicpopup-bundle as a dependency in your project's composer.json file:

{
    "require": {
        "jrk/dynamicpopup-bundle": "dev-master"
    }
}

Update composer

php composer update
or 
php composer.phar update

Add JrkDynamicPopupBundle to your application kernel

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Jrk\DynamicPopupBundle\JrkDynamicPopupBundle(),
    );
}

Installation & Configuration

1. Add bundle's name in your app/config/config.yml

# app/config/config.yml

assetic:
   bundles: [ 'JrkDynamicPopupBundle' ]

1. Execute the following command:

 php app/console assets:install

1. Include css files:

 {{ dynamic_popup_styles() }}

1. Include js files:

 {{ dynamic_popup_javascripts() }}

1. Add just after the <body> tag

 {{ dynamic_popup_template() }}

You can override two things:

The ajax gif icon for ajax call (ajaxAsset)
The js doT template (popupTemplate)

Here is an example:

 {{ dynamic_popup_template({ ajaxAsset: 'img/ajax-loader.gif', popupTemplate: 'MyBundle:Acme:my-custom-doT-template.html.twig' }) }}

Usage

We're assuming you have jquery in your project

modalInformation(data, fancyboxOptions) => // Display a simple popup
data: an object with 5 keys
- title: popup's title
- message: popup's message
- close: popup's close button label
- dataTitle: a list of injected dynamic variables into title
- dataMessage: a list of injected dynamic variables into message
fancyboxOptions: extend fancybox options

modalInformation({
    title: 'Popup title',
    message: 'Popup body',
    close: 'Close'
}, {
    minWidth: 320
});

modalInformation(data, fancyboxOptions, this) => // Display a dynamic choice popup
data: an object with 5 keys
- title: popup's title
- message: popup's message
- choices: a list of button (label, action, url, buttonClass)
- dataTitle: a list of injected dynamic variables into title
- dataMessage: a list of injected dynamic variables into message
fancyboxOptions: extend fancybox options
this: save a "this" reference

$('a.clickme').function() {
    modalChoices({
        title: 'Popup title',
        message: 'Popup body : <strong>{{=it.classname}}</strong>',
        choices: [
            {label: 'Yes', action: 'doSomething(__this__)', buttonClass: 'btn btn-primary'},
            {label: 'No', action: '$.fancybox.close()', url:true, buttonClass: 'btn btn-danger'},
            {label: 'Help', url: 'http://www.some-help-website.com', target:'_blank', buttonClass: 'btn btn-info'},
        ],
        dataMessage: {
            classname: 'Hello World (from a variable) !'
        }
    }, null, $(this));
}

function doSomething(myThisReference) {
    // myThisReference is a reference of 'a.clickme' DOM Element
    ...
}

There are two other options for both modalInformation and modalChoices. In fact, these two options are useful only for modalChoices. This is two examples:

 modalChoices({
     ...
     input: {
        placeholder: 'Email address',
        type: 'text'
     }
     ...
 });

 modalChoices({
     ...
     select: {
        name: 'favorite-color',
        id: 'my-select-id',
        choices: [
            {value:'#FF0000', label:'Red'},
            {value:'#00FF00', label:'Green'},
            {value:'#0000FF', label:'Blue'}
        ]
     }
     ...
 });

Get data from <input> or <select> by calling that function:

 var formField = getModalFieldElement();

jrk/dynamicpopup-bundle

包简介

关键字：

README 文档

README

Setup

Installation & Configuration

Usage

统计信息

GitHub 信息

其他信息