0

Textualizer という jQuery プラグインを使用しており、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

4

1 に答える 1

1

次の HTML コードを使用すると、<form> からのコメントと名前のペアで名前をArray付けた JavaScript を更新できます。COMMENTS_FOR_DISPLAY

次のコードでは、コメントを a に永続的に保存することもできます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-16T12:54:24.810 に答える