3

フォーム要素をデフォルト値にリセットするajax投稿の後にjscolorをどのように実行しますか？

以下のajaxは、ページ内のiframeに正常に投稿され、[デフォルトに戻す]ボタンをクリックすると、ページ形式の値がデフォルトに復元されます。問題は、jscolorがアタッチされている入力では、背景色がデフォルトに戻らないことです。

私が行った調査により、jscolor.init（）を使用してjscolorを再起動する必要があると私は信じています。ajax投稿の後ですが、動作させることができません。また、ajax postの外部で関数を作成して（フォーム値をリセットしてからjscolor.init（）;）、onclickで[デフォルトに戻す]ボタンにバインドしようとしましたが、機能しませんでした。

ajax投稿後にjscolorを再度実行するにはどうすればよいですか？

Javascript：

<script type="text/javascript">
$(document).ready(function() {
    $('#restore_form').click(function() {
        $.ajax({
            data: $('#build_form').serialize(),
            type: $('#build_form').attr('method'),
            url: $('#build_form').attr('action')+'?type=restore',
            success: function(response) {
                $('#preview').contents().find('html').html(response);
                $('#build_form')[0].reset();
                jscolor.init();
            }
        });
        return false;
    });
});
</script>

HTML：

<iframe id="preview" src="preview.php" width="100%" height="120"></iframe>

<form id="build_form" class="build_form" action="preview.php" method="post">
    <input type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" />
    <input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" />
    <input id="save_form" name="submit" type="submit" value="Save Changes" class="button" />
</form>
4

4 に答える 4

6

色をリセットしてみてください。あなたのマークアップを見ると、デフォルトの色は 0CA0E2 だと思います。私は正しいですか？その場合は、次のことを行う必要があります (jscolor コンストラクターを使用し、新しいオブジェクトを myJsColorVar 変数に割り当てた場合):

myJsColorVar.color.fromString("0CA0E2"); // instead of jscolor.init()

ドキュメントでは、次のように使用されています。

document.getElementById("myColorInput").color.fromString("0CA0E2");

JS で jscolor を作成したのではなく、「カラー クラス」を適用したことがわかったので、最後の例の方が適していると思います。

カラー入力の ID を設定するだけです。

<form id="build_form" class="build_form" action="preview.php" method="post">
    <input id="myColorInput" type="text" name="background_color" value="#0CA0E2" class="color {adjust:false,hash:true}" />
    <input id="restore_form" name="restore" type="submit" value="Restore Default" class="button" />
    <input id="save_form" name="submit" type="submit" value="Save Changes" class="button" />
</form>

ここを見てください：http://jscolor.com/try.php#setting-color

編集:カスタム jscolor を作成しました。

<html>
    <head>
        <title>jscolor demo</title>
    </head>
    <body>
        <script type="text/javascript" src="jscolor.js"></script>
        <script type="text/javascript">

            function CustomJSColor( applyIn, defaultColor, opts ) {

                this.jscolor = new jscolor.color( document.getElementById( applyIn ), opts );
                this.defaultColor = defaultColor;
                this.jscolor.fromString( this.defaultColor );

                this.reset = function() {
                    this.jscolor.fromString( this.defaultColor );
                };

            }

        </script>
    <body>
        <input id="myField">
        <script>

            // the input with id "myField" will be the color picker
            // 0099cc is the default color
            // {} is the other options
            var myPicker = new CustomJSColor( "myField", "0099cc", {} );

            // to reset the color you just need to call reset
            myPicker.reset();

        </script>
    </body>
</html>

私は jscolor.color から継承しようとしましたが、それはコンストラクターではないようです。そのため、jscolor を 1 つ含むクラスを作成しました。コンポーネントの色をリセットするには、reset メソッドを呼び出すだけです。「color」クラスを使用するだけでは CustomJSColor が作成されないため、注意してください。プログラムで作成する必要があります。

于 2012-07-25T04:33:13.843 に答える
3

これが古い投稿であることは知っていますが、同じ問題があり、フォーム要素が「色」クラスのjscolor入力であると仮定して、より簡単な解決策を見つけました

$('.color').each(function() {
    $(this).focus();
});
$('#someotherinput').focus();

フォーカスを取得すると jscolor mojo がトリガーされ、セルの背景とテキストの色が適切に設定されます。

于 2012-12-09T02:24:27.427 に答える