0

ここでは、css-colorを取得し、css-colorの背景を持つ要素を作成するjquery関数を作成しました。jsFiddleを編集します。

html

<div ID="wrapper">
    <div ID="addColor">
        <input type="text" ID="hex">
        <div ID="color">Your color</div>
        <button ID="add">Add color</button>
    <div CLASS="clear"></div> <!-- Clear float -->
    </div>

    <div ID="wrapGallery">
        <h1>My Color Gallery</h1>
        <ul ID="gallery"></ul>
    </div>
</div>

js / jquery

$(function() {
    //float left with some margin
    $('#addColor')
        .children().not('#add, .clear').css({
        'float':'left',
        'margin-right': '5px'
        });

    //Showing color on keyup
    $('#hex').keyup(function() {
       var hexCode = $(this).val();
       $('#color').css('background-color', hexCode);

        if ( hexCode !== '') {
            $('#color').text('');
        }else{
            $('#color').text('Your color');
        }

    });

    //Adding colors
    $gallery = $('#gallery');

    $('#add').click(function() {

        var storedHex = $('#hex').val();
        //check if empty
        if (storedHex == '') {
            alert('Enter something');        
        }
        else {
        //adding li
        $("<li>").css('background-color', storedHex)
                .hover(
                  function () {
                    $(this).text(storedHex);
                  }, 
                  function () {
                    $(this).text('');
                  })                    
                 .appendTo($gallery); 
        }
    });
});

作成した要素をファイルに永続的に保存するだけで、いつでもアクセスできます。どうすればいいのかわかりません。

4

2 に答える 2

3

現在、Javascript（ブラウザ内）でファイルを希望どおりに編集/保存することはできません。ただし、.ajax（）を使用してデータをPHPファイルに送り返し、PHPファイルがfile_put_contents（）を使用してデータを保存できるようにすることができます（ただし、通常は代わりにデータベースに保存されます）。

于 2012-07-23T03:39:50.627 に答える
1

JQuery Ajax 関数を読んで、JSON オブジェクトについても読んでください。

AJAX と JQuery を使用すると、次のように JSON オブジェクトをサーバーに簡単に送信できます。

function saveElements(myJsonObj) {
  $.ajax({
    method: "POST",
    dataType: "json",
    url: "path/to/savemyobject.php",
    data: {json:myJsonObj}
  });
}

JSON ファイルは次のようになります。

{ "myData":
  {
    "some_text":"this could be the CSS code",
    "name":"some name",
    "number":"some number"
  }
}

JSON オブジェクトを表す JSON 文字列を生成し、Ajax 関数を使用して PHP ファイルに送信できます (上記のとおり)。

PHP では、次のようにしてオブジェクトを取得します。

<?php
$json_string = $_POST["json"]; //the same variable key we sent it in
$json_obj = json_decode($json_string, true);
// get data
$myDataCode = $json_obj["myData"]["some_text"];
// do some processing
...
?>

PHP の json_encode 関数を使用して、PHP の配列を JSON オブジェクトに変換することもできます。

詳細:
http://www.w3schools.com/json/default.asp
http://php.net/manual/en/function.json-decode.php
http://php.net/manual/en/function .json-encode.php
http://api.jquery.com/jQuery.ajax/

于 2012-07-23T03:47:08.563 に答える