README

FSelectMenu 是一个快速且不干扰的 HTML 选择菜单。

特性

• 快速: 渲染在服务器端完成：客户端无 DOM 操作

• 不干扰: 初始化 FSelectMenu 后可以忘记它：所有选择菜单都将工作，无论它们是在初始化期间存在还是后来添加的。（FSelectMenu 使用事件委托。HTML 代码在服务器上生成；FSelectMenu 剩下的只是监听事件冒泡到文档元素。）

• 不干扰: 与现有脚本无缝协同工作

  • 脚本不需要了解 FSelectMenu 的任何内容，例如监听事件、获取和更改值等。
  • 脚本直接与原生选择元素交互

用法

加载并初始化 FSelectMenu JavaScript 模块

require(['fselectmenu/fselectmenu'], function(FSelectMenu) {
    FSelectMenu.init();
});

这就是全部。

如果在之后向文档中添加了新的选择菜单，则无需再次调用 .init()。

只需在程序更改其值时在原生选择元素上触发 change 事件。

安装

$ git submodule add git://github.com/arnaud-lb/fselectmenu.git vendor/fselectmenu

纯 PHP

可以使用 FSelectMenu\Renderer 类渲染 FSelectMenu

<?php

$renderer = new FSelectMenu\Renderer;
echo $renderer->render($value, $choices, $options);

• $value 是所选选项的值
• $choices 是值 => 标签选项的数组（对于 optgroups，可以是嵌套数组）
• $options 是具有以下键的数组
  • attrs: fselectmenu 元素属性（例如 id, class, ...）
  • nativeAttrs: 原生选择元素属性（例如 id, name）
  • optionAttrs: 选项元素属性（值 => 属性的数组）
  • optionWrapperAttrs: 选项元素包装属性
  • rawLabels: 是否转义标签
  • fixedLabel: 将始终显示的标签，而不是所选标签

示例

<?php
echo $renderer->render('x', array('x' => 'Foo', 'y' => 'Bar'), array('nativeAttrs' => array('name' => 'foo')));

Twig

注册扩展

<?php
$extension = new FSelectMenu\Twig\Extension;
$twigEnvironment->addExtension($extension);

该扩展公开了 fselectmenu 方法

fselectmenu(value, choices, options)

有关参数的描述，请参阅上面的纯 PHP。

示例

{{ fselectmenu('x', {'x': 'Foo', 'y': 'Bar'}, {'nativeAttrs':{'name': 'foo'}}) }}

JavaScript

菜单还可以使用 renderer 模块在 JavaScript 中渲染（例如在客户端或 nodejs 中）

require(['fselectmenu/renderer'], function(renderer) {
    var html = renderer.render(value, choices, options);
});

Symfony2

将 FSelectMenu 命名空间添加到您的自动加载器

<?php
// app/autoload.php

$loader->registerNamespaces(array(
    'FSelectMenu' => __DIR__.'/../vendor/fselectmenu/lib',
    // your other namespaces
);

将 FSelectMenuBundle 添加到您的应用程序内核

<?php
// app/AppKernel.php

public function registerBundles()
{
    return array(
        // ...
        new FSelectMenu\Bundle\FSelectMenuBundle(),
    );
}

覆盖您的表单主题中的 choice_widget 块

{% use "FSelectMenuBundle::fselectmenu.html.twig" %}

{% block choice_widget %}
{% spaceless %}
    {% if expanded %}
        {% for child in form %}
            {{ form_widget(child) }}
        {% endfor %}
    {% else %}
        {% if multiple %}
            {{ parent() }}
        {% else %}
            {# Symfony >= 2.1 #}
            {{ block('fselectmenu_choice_widget_2_1') }}
            {# Symfony 2.0 #}
            {# {{ block('fselectmenu_choice_widget') }} #}
        {% endif %}
    {% endif %}
{% endspaceless %}
{% endblock choice_widget %}

ZendFramework

注册视图辅助路径

# application.ini
resources.view.helperPath.FSelectMenu_Zend_View_Helper = APPLICATION_PATH "/../vendor/fselectmenu/lib/FSelectMenu/Zend/View/Helper"

继承 Zend_Form_Element_Select

<?php
class App_Form_Element_FSelectMenu extends Zend_Form_Element_Select
{
    public $helper = 'formFSelectMenu';
}

样式

FSelectMenu 包含了一个最小化的（仅行为）样式表，位于 lib/FSelectMenu/Bundle/Resources/sass/_fselectmenu.sass。

优雅降级

通过隐藏模拟的选菜单并显示原生的选菜单，可以实现对未启用 JavaScript 的客户端的支持。

<noscript>
    <style>
        .fselectmenu-label-wrapper { display: none; }
        .fselectmenu-native { display: inline; }
    </style>
</noscript>