Question

我正在为jQuery UI Date Picker插件创建一个扩展插件，主要是为了标准化使用的选项，以及添加一个图标来打开日历。我知道插件使用了一个图标触发器，但是这不起作用，因为我在精灵图像中使用了一个图标而不想要一个仅仅是图标的额外请求。

我的插件代码：

(function($) {
    $.extend($.fn, {
        DatePicker: function() {
            return this.each(function() {
                $(this).datepicker({
                    showOtherMonths: true,
                    selectOtherMonths: true
                }).after(
                    $("<a/>", { "href": "javascript:void(0)", "class": "icon-calendar", "text": "select date" }).click(function() {
                        $(this).prev("input").datepicker("show")
                    })
                )
            })
        }
    })
})(jQuery);

除了生成图标外，这适用于外翻，所以为了测试代码，我在插件初始化后添加了after函数。

$(".date").DatePicker().after(
    $("<a/>", { "href": "javascript:void(0)", "class": "icon-calendar", "text": "select date" }).click(function() {
        $(this).prev("input").datepicker("show")
    })
)

这是让我感到困惑的地方，因为这段代码可以生成日历图标。虽然我可以通过这种方式使用它，但它显然不是更好的选择，因为它应该是扩展插件的一部分，而不是在我的各种插件实现中重复。

Answer 1

将其添加到.datepicker({...

        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true

所以：

$.extend($.fn, {
    DatePicker: function() {
        return this.each(function() {
            $(this).datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true
            });
        });
    }
});

小提琴：http://jsfiddle.net/maniator/D7tKe/

Answer 2

尝试

$('.ui-datepicker').append('<a href="#">My link</a>');

无法将图标附加到jQuery UI Datepicker

2 个答案: