-2

こんばんは。私は JavaScript と JQuery に非常に慣れていないので、質問があります。どうすればスクリプトをまとめることができますか???? 私は日付ピッカースクリプトを持っています:

 $.datepicker.setDefaults($.datepicker.regional["ru"]);



 $("#dateinput").datepicker({
                        dateFormat: "yy-mm-dd",
                        beforeShowDay: beforeShowDayHandler,
                        showOn: 'both',
                        onClose: function (dateText, inst) {
                            $(this).attr("disabled", false);
                        },
                        beforeShow: function (input, inst) {
                            $(this).attr("disabled", true);
                        }

                    });

そして、実際にプラグインとしてスクリプトを作成する別のスクリプトがあります。このスクリプトを使用すると、入力と選択を一緒に使用できるため、ユーザーがリストから何かを見つけられない場合は、自分のデータを自分の Web ページからだけ置くことができます。

 jQuery(function ($) {
                                console.log($('.widthclass').select2_e().on('change', function () {
                                    alert(this.value);

                                }));
                            });              
                    });

私が言ったように、私はそれをプラグインのように使用するので、プラグイン内のコード：

//Plugin initialization
(function ($) {
    jQuery.fn.select2_e = function () {
        $(this).each(function (n, element) {
            //тут превращаем select в input              
            var $element = $(element),
                choices = $element.find('option').map(function (n, e) {
                    var $e = $(e);
                    return {
                        id: $e.val(),
                        text: $e.text()
                    };
                }),
                width = $element.width(),
                $input = $('<input>', {
                    width: width
                });
            $element.hide().after($input);
            //make select form input

            $input.select2({
                query: function (query) {
                    var data = {}, i;
                    data.results = [];

                    // add what we searched for

                    if (query.term !== "") {
                        data.results.push({
                            id: query.term,
                            text: query.term
                        });
                    }

                    // add other

                    for (i = 0; i < choices.length; i++) {
                        if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
                    }

                    query.callback(data);
                }
            }).on('change', function () {
                var value = $input.val();
                $element.empty();
                $element.append($('<option>').val(value));
                $element.val(value).trigger('change');
            });;
            return $element;
        });
        return this;
    }
})(jQuery);

そして、私のjspはすべて一緒にどのように見えるか:

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title><spring:message code="label.input.head" var="headTitle"/></title>

    <script type="text/javascript" src="resources/jsFiles/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="resources/jsFiles/select2.js"></script>
    <link rel="stylesheet" href="resources/cssFiles/select2.css"/>
    <script type="text/javascript" src="resources/jsFiles/select2_e.js"></script>
    <link rel="stylesheet" href="resources/cssFiles/inputStyle.css"/>

    <script type="text/javascript" src="resources/jsFiles/jquery-ui.js"></script>
    <script type="text/javascript" src="resources/jsFiles/jquery-ui-i18n.js"></script>
    <link rel="stylesheet" href="resources/cssFiles/jquery-ui.css"/>

        <script type="text/javascript">

            $(document).ready(function() {  

                     $.datepicker.setDefaults($.datepicker.regional["ru"]);

                     $("#dateinput").datepicker({
                            dateFormat: "yy-mm-dd",
                            beforeShowDay: beforeShowDayHandler,
                            showOn: 'both',
                            onClose: function (dateText, inst) {
                                $(this).attr("disabled", false);
                            },
                            beforeShow: function (input, inst) {
                                $(this).attr("disabled", true);
                            }

                        });

                        function beforeShowDayHandler(date) {
                            if (self.SelectedDayValue != -1) {
                                if (date.getDate() != 1) {
                                    return [false, '', 'selected'];
                                }
                            }
                            return [true, ''];
                        }

                         jQuery(function ($) {
                                console.log($('.widthclass').select2_e().on('change', function () {
                                    alert(this.value);

                                }));
                            });              
                    }); 
             </script>

    </head>


    <body>

        <spring:message code="label.input.button" var="save"/>

        <table align="left">
            <tr> <td> Language/Язык/文 : <a href="input?lang=en">English</a>||<a href="input?lang=ru">Русский</a>||<a href="input?lang=cn">中文</a> </td> </tr>
        </table>

        <table align="right">
            <tr> <td> <button style="background-color: #E0E0E0; vertical-align: middle; border: thin;"> <img src="resources/log_out.png" alt="logout_logo" align="center" /> <a href="j_spring_security_logout"> <spring:message code="label.login.logout"/> </a> </button> </td> </tr>
        </table>

        <br/>

        <table align="center">
            <tr><td width="620"> <h3 align="left"> <select cssClass="widthclass"> <form:option value=""/> <options items="${listOfDates}"/> </select> </td></tr>
        </table>    

     <form action="add" method="post">  

        <table align="center"  style="border-bottom-style:inset; border-top-style: outset;">

        <tr><td align="right"> <input id=" </td> </tr>

したがって、ユーザーが入力フィールドをクリックして選択と日付ピッカーを開くときに、それらをまとめる必要があります。あなたより

4

1 に答える 1

0

申し訳ありませんが、あなたの完全な要件を理解できませんでしたが、datepicker をこのスクリプトに統合することだけを探しているのかもしれません。

さて、私は変更を行いました。あなたがこれを探していることを願っています。

jQuery(function ($) {
      $("#datepicker").datepicker({
                        dateFormat: "yy-mm-dd",
                       // beforeShowDay: beforeShowDayHandler,
                        showOn: 'both',
                        onClose: function (dateText, inst) {
                            $(this).attr("disabled", false);
                        },
                        beforeShow: function (input, inst) {
                            $(this).attr("disabled", true);
                        }

                    });

    console.log($('.testclass').select2_e().on('change', function () {
        alert(this.value)
    }));
});

デモ

jquery.ui プラグインを使用する必要がある場合。それがあなたの試みのエラーだったのかもしれません。

于 2013-08-05T04:14:52.837 に答える