4

<select>を使用してカスタム テキスト書式に置き換えたいjQuery UI Selectmenu。

このフィドルの 3 番目と 5 番目の選択は、私が達成しようとしていることの良い例です。

http://jsfiddle.net/fnagel/GXtpC/

フィドルにaddressFormatting()は、元のオプション テキストを受け取り、selectmenu のレンダリングに使用される html 出力を返す function が定義されています。この関数は、selectmenu の初期化でコールバックとして渡されます。

$('select').selectmenu({
    format: addressFormatting
});

を使用してjQuery UI Selectmenu 1.11.4います。問題はformat、このバージョンにはコールバック オプションが存在しないことです。

jQuery UI Selectmenu version 1.5.0preこれは、提供されたフィドルで使用されるのコードの一部です。

$.widget("ui.selectmenu", {
options: {
    appendTo: "body",
    typeAhead: 1000,
    style: 'dropdown',
    positionOptions: null,
    width: null,
    menuWidth: null,
    handleWidth: 26,
    maxHeight: null,
    icons: null,
    format: null, // <<<<<<<<<<<< FORMAT OPTION IS PRESENT <<<<<<<<<<<<
    escapeHtml: false,
    bgImage: function() {}
},

そして、これは私が使用している新しいバージョンのコードの一部です:

var selectmenu = $.widget( "ui.selectmenu", {
version: "1.11.4",
defaultElement: "<select>",
options: {
    appendTo: null,
    disabled: null,
    icons: {
        button: "ui-icon-triangle-1-s"
    },
    position: {
        my: "left top",
        at: "left bottom",
        collision: "none"
    },
    width: null,

    // callbacks
    change: null,
    close: null,
    focus: null,
    open: null,
    select: null
},

formatオプションはここには存在せず、初期化で使用しても効果はありません。

APIドキュメントには、_renderItem()カスタムフォーマットを選択に追加するために使用できることを示唆する名前のメソッドがありますが、プライベートスコープがあるため、ウィジェットの外部からは使用できません。パブリックメソッドもありますがcreate()、作成したselectmenuの構造を変更できるかどうか、またはそれを使用する必要があるかどうかはわかりません。

4

1 に答える 1

0

前述のように、フォーマット オプションは、jquery-ui ライブラリの一部になる前に selectmenu から削除されました。カスタム コードを selectmenu ウィジェットに挿入し、この機能を処理する関数を上書きする方法があります。

// Create objects that you want inside the menu list
var RenderItem = function(item) {
    return $('<div/>')
        .addClass('ui-menu-item-wrap')
        .append(
            $('<span/>')
                .addClass('ui-menu-item-header')
                .text(item.label + ' (' + item.km + " km)")
        ).append(
            $('<span/>')
                .addClass('ui-menu-item-description')
                .text(item.desc)
        );
};

// Extend functions in the selectmenu plugin
$.widget("ui.selectmenu", $.ui.selectmenu, {

    // Input middleware to the _setText function, that will build
    // jQuery objects to render
    _renderItem: function( ul, item ){
        var li = $( "<li>" ),
            wrapper = $( "<div>", {
                title: item.element.attr( "title" )
            } );

        if ( item.disabled ) {
            this._addClass( li, null, "ui-state-disabled" );
        }
        // Insert middleware
        this._setText( wrapper, RenderItem(item));

        return li.append( wrapper ).appendTo( ul );
    },

    // Overwrite this function to add custom attribute values from the option
    _parseOption: function( option, index ) {
        var optgroup = option.parent( "optgroup" );
        return {
            element: option,
            index: index,
            value: option.val(),
            label: option.text(),
            desc: option.attr('data-desc'), // Custom <option> value saved to item
            km: option.attr('data-km'), // Custom <option> value saved to item
            optgroup: optgroup.attr( "label" ) || "",
            disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
        };
    },

    // Overwrite this function to append a value, instead of inserting text
    // So that the jQuery element is handled correctly.
    _setText: function(element, value) {
        if (value) {
            element.append(value);
        } else {
            element.html("&#160;");
        }
    }
});
于 2016-07-13T07:15:31.410 に答える