README

设置

JrkDynamicPopupBundle 是一个用于 Symfony2 的动态弹出管理器

使用 composer

将 jrk/dynamicpopup-bundle 添加为项目 composer.json 文件中的依赖项

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

更新 composer

php composer update
or 
php composer.phar update

将 JrkDynamicPopupBundle 添加到应用程序内核

<?php
// app/AppKernel.php

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

安装 & 配置

1. 在 app/config/config.yml 中添加包的名称

# app/config/config.yml

assetic:
   bundles: [ 'JrkDynamicPopupBundle' ]

1. 执行以下命令

 php app/console assets:install

1. 包含 CSS 文件

 {{ dynamic_popup_styles() }}

1. 包含 JS 文件

 {{ dynamic_popup_javascripts() }}

1. 在 <body> 标签之后添加

 {{ dynamic_popup_template() }}

你可以覆盖两个东西

AJAX 调用的 AJAX GIF 图标 (ajaxAsset)
js doT 模板 (popupTemplate)

以下是一个示例

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

用法

我们假设你的项目中已经包含了 jQuery

modalInformation(data, fancyboxOptions) => // 显示一个简单的弹出窗口
data: 一个具有 5 个键的对象
- title: 弹出窗口的标题
- message: 弹出窗口的消息
- close: 弹出窗口关闭按钮的标签
- dataTitle: 注入到标题中的动态变量列表
- dataMessage: 注入到消息中的动态变量列表
fancyboxOptions: 扩展 fancybox 选项

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

modalInformation(data, fancyboxOptions, this) => // 显示一个动态选择弹出窗口
data: 一个具有 5 个键的对象
- title: 弹出窗口的标题
- message: 弹出窗口的消息
- choices: 按钮列表 (标签，动作，URL，按钮类)
- dataTitle: 注入到标题中的动态变量列表
- dataMessage: 注入到消息中的动态变量列表
fancyboxOptions: 扩展 fancybox 选项
this: 保存 "this" 引用

$('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
    ...
}

对于 modalInformation 和 modalChoices 有两个其他选项。实际上，这两个选项只对 modalChoices 有用。以下是两个示例

 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'}
        ]
     }
     ...
 });

通过调用该函数从 <input> 或 <select> 获取数据

 var formField = getModalFieldElement();

jrk / dynamicpopup-bundle

维护者

详细信息

README

设置

安装 & 配置

用法