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 的目录中，它就可以工作。

文本化器：http: //kiro.me/textualizer/javascript/textualizer.min.js

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

4

1 回答 1

1

以下 HTML 代码允许更新以注释Array命名的 JavaScript COMMENTS_FOR_DISPLAY，来自 <form> 的名称对。

下面的代码还允许在 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 回答