HTML/PHP内のZinoUIを使ったシンプルなユーザーインターフェイス

Question

私は自分のサイトにユーザーフレンドリーなインターフェースを作りたいと思っています。私はサイトの他の開いているページに単純なHTMLを追加することができます。

シンプルなHTML（以下「BASIC HTML」）は常に同じ構造をしています。ヘッダー内の単語やメインdivを変更して新しい画像をアップロードしたいと考えています。

私はそれを行う方法について苦労しています。私が持っていた素晴らしいアイディアは、ZinoUIを使用することです。制限された領域には、基本的なHTMLを表示することができ、ユーザーはそれを変更できます。それは "ZinoUI HTML"のようなものになります。

どのようにすればいいのかわからないのは、この新しいHTMLコードをユーザーが変更して「印刷」し、それをサイトの開いたページに挿入する方法です。 可能ですか？これは簡単な方法ですか？

BASIC HTML

<div id="simple HTML"> 

    <div class="header"> 
     <h1>Lorem ipsum dolor sit amet..</h1> 
    </div> 

    <div class="main"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
    </div> 

    <div class="image"> 
    <img src="pic_mountain.jpg" alt="Mountain View"> 
    </div> 

</div> 

。あなたが<div id="editable">...</div>のシリーズを持っている必要はありませんので、すべての ZinoUI HTML

 <div class="header" id="editable"> 
      <h1>Lorem ipsum dolor sit amet..</h1> 
     </div> 

     <div class="main" id="editable"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
     </div> 

     <div class="image" id="editable"> 
     <img src="pic_mountain.jpg" alt="Mountain View"> 
     </div> 
<p>To activate editable control, double click on the text above.</p> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $("#editable").zinoEditable({ 
     control: "textarea", 
     event: "dblclick" 
    }); 
}); 
</script> 

Answer 1

まず、各HTML idは、一意である必要があります。あなたは何ができるか

は、複数の編集可能なdiv要素を持っているとsaveイベントをサブスクライブあなたを救うためにその後

$(function() { 
    $(".editable").zinoEditable({ 
     control: "textarea", 
     event: "dblclick" 
    }); 
}); 

を使用しようとしている場合は、編集可能なクラス<div class="editable">..</div>を追加され、コントロールのIDを渡して言いますやって保存し、編集したテキスト：

<script type="text/javascript"> 

    $(function() { 
     $(".editable").zinoEditable({ 
      buttons: { 
       "Save": function (ui) { 
        $(this).zinoEditable("save"); 
       }, 
       "Cancel": function (ui) { 
        $(this).zinoEditable("close"); 
       } 
      }, 
      save: function (event, ui) { 
       $.post("../../request?plugin=editable", { 
        field: $(this).attr("id"), 
        value: ui.control.val() 
       }); 
       console.log("save"); 
       //return false; 
      } 
     }); 
    }); 
</script> 

"../../request?plugin=editable"は（あなたのために適切であるものは何でもと交換が）データを保存するために呼び出すPHP関数です。