HTMLフォーム

を使用してjQueryプラグインにテキストを追加しようとしています。imはTextualizerというjQueryプラグインを使用していますが、HTML フォームを使用してデータを追加します。HTMLフォーム

相続コード：

<html> 
<head> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="textualizer.min.js"></script> 
</head> 

<style type="text/css"> 

#txtlzr{color:#585856; font-size:50px; width:1200px; height:100px; 
margin-left:10%; 
margin-top:80px; 
font-family:"futura"; 
position: fixed; 
} 
</style> 

<body> 

<div id="txtlzr"></div> 
<form action="#" method="post"/> 

      <input class="kwote" type="text" maxlength="40" id="kwote" placeholder="Enter a something here."/> 
      <input class="name" type="text" maxlength="17" id="name" placeholder="Enter your name."/> 
      <input class="post" type="submit" value="Post"/> 

</form> 


</body> 




<script> 



var stuff1 = ['"random comment-person1', '"random comment"- person2']; // list of blurbs 

var txt = $('#txtlzr'); // The container in which to render the list 

var options = { 
duration: 5,   // Time (ms) each blurb will remain on screen 
rearrangeDuration: 5, // Time (ms) a character takes to reach its position 
effect: 'random',  // Animation effect the characters use to appear 
centered: true   // Centers the text relative to its container 
} 

    txt.textualizer(stuff1); // textualize it! 
    txt.textualizer('start'); // start 


    </script> 


</html>

これは完全なコードで、限り、あなたはjQueryとtextualizerファイルがリンクまたはHTMLでディレクトリにしているように動作します。

textualizer：http://kiro.me/textualizer/javascript/textualizer.min.js

jqueryの：http://code.jquery.com/jquery-1.7.2.min.js

出典

2012-04-16 Nick Kushner

次のHTMLコード<フォーム>からのコメントとCOMMENTS_FOR_DISPLAYというJavaScript Array、名前のペアを更新することができます。

次のコードでも、ユーザーが許可している場合は、cookieにコメントを永続的に保存できます。

こちらから入手可能です用途jquery-cookie場合：https://github.com/carhartl/jquery-cookie

は楽しみを持って:)

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script> 
    <script type="text/javascript" 
     src="http://kiro.me/textualizer/javascript/textualizer.js"></script> 
    <style type="text/css"> 
    #txtlzr { 
     color:#585856; font-size:50px; width:1200px; height:100px; 
     margin-left:10%; margin-top:20px; font-family:"futura"; 
     position: fixed; 
    } 
    </style> 
    </head> 
    <body> 
    <form action="#" method="post"/> 
     <fieldset> 
     <label for="kwote">Comment:</label> 
     <input class="kwote" type="text" maxlength="40" id="kwote" 
     placeholder="Enter a something here."/> 
     <lable for="name">Name:</label> 
     <input class="name" type="text" maxlength="17" id="name" 
     placeholder="Enter your name."/> 
     <input class="post" type="button" value="Add comment" 
     onclick="add_comment();" /> 
    </fieldset> 
    </form> 

    <div id="bodMain"><div id="txtlzr">foo</div></div> 

    <script language="javascript"> 
    // Adds a new comment, name pair to the Array feeding textualizer. 
    function add_comment() { 
     // Retrieve values and add them to Array. 
     var new_comment = $('#kwote').val(); 
     var new_name = $('#name').val(); 
     var new_value = new_comment + ': ' + new_name; 
     COMMENTS_FOR_DISPLAY.push(new_value); 

     // Update cookie with current data in COMMENTS_FOR_DISPLAY. 
     $.cookie("COMMENTS_FOR_DISPLAY", COMMENTS_FOR_DISPLAY.join(";")); 

     // Reset <input> fields. 
     $('#kwote').val(''); 
     $('#name').val(''); 
    } 

    $(document).ready(function() { 
     var txt = $('#txtlzr'); // The container in which to render the list 

     var options = { 
     duration: 5,   // Time (ms) each blurb will remain on screen 
     rearrangeDuration: 5, // Time a character takes to reach its position 
     effect: 'random',  // Animation effect the characters use to appear 
     centered: true  // Centers the text relative to its container 
     } 

     var _cookie = $.cookie("COMMENTS_FOR_DISPLAY"); 
     if (_cookie != null) { 
     // Load data from cookie. 
     var COMMENTS_FOR_DISPLAY = _cookie.split(";"); 
     } 
     else { 
     // If no cookie exists, fallback to default value... 
     var COMMENTS_FOR_DISPLAY = new Array('Have fun again: Chris'); 
     } 

     txt.textualizer(COMMENTS_FOR_DISPLAY); // textualize it! 
     txt.textualizer('start'); // start 
    }); 
    </script> 
    </body> 
</html>

出典

2012-04-16 12:54:24 cfedermann

すごいクリス、ウル素晴らしい.... ITワークス!!!!私はページを更新するたびにすべてのコメントが失われます。とにかく彼らは永遠にそれを作るために？ –

賛成投票はどうですか; – cfedermann

とにかく、私はhtmlファイルを使ってサーバーに保存できますか？ –

HTMLフォーム

答えて

関連する問題