jquery.lilCharacterCount/demo.html at master · thorlando/jquery.lilCharacterCount · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <title>jquery.lilCharacterCount Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.lilcharactercount.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#textbox").lilCharacterCount({
          limit: 100,
          warning: 50,
          submitButton: "submit-button"
        });
      });
    </script>

    <style type="text/css">
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
        padding: 0;
        font-size: 12px;
      }
      body section {
        width: 400px;
        margin: 0 auto;
      }
      .character-count {
        padding: 3px 5px;
        color: #fff;
        font-weight: bold;
      }
      .bg-danger {background: #cc0000;}
      .bg-info {background: #0000cc;}
      .bg-warning {background: #ffbb00;}
      textarea {
        width: 378px;
        height: 75px;
        margin-bottom: 2px;
        font-family: Arial, sans-serif;
        padding: 10px;
      }
      dl {
        margin: 0 0 10px 0;
      }
      dl dd {

      }
      #submit-button {
        float: right;
      }
    </style>
  </head>
  <body>
    <section>
      <div class="form">
        <textarea name="demo" id="textbox" placeholder="Start typing..."></textarea>
        <button class="button" id="submit-button" /> Submit
      </div>
      <h3>About</h3>
      <p>Uses Twitter's Bootstrap classes as defaults.</p>
      <h3>Usage</h3>
      <pre><code>
        $("#textbox").lilCharacterCount();
      </code></pre>
      As used in demo:
      <pre><code>
        $("#textbox").lilCharacterCount({
          limit: 100,
          warning: 50,
          submitButton: "submit-button"
        });
      </code></pre>
      <h3>Options</h3>
      <dl>
        <dt><strong>limit</strong></dt>
        <dd><em>Number.</em> Sets the character limit for the text box. Default: <strong>140</strong></dd>
        <dt><strong>warning</strong></dt>
        <dd><em>Number.</em> Toggles the warning class on the counter when this character count is reached. When set to 0, it is disabled. Default: <strong>100</strong></dd>
        <dt><strong>allowExceed</strong></dt>
        <dd><em>Boolean.</em> Determines whether or not typing is allowed past the limit. Default: <strong>true</strong></dd>
        <dt><strong>submitButton</strong></dt>
        <dd><em>String.</em> ID of submit button that, if supplied, will be disabled if limit is exceeded. Default: <strong><em>blank</em></strong></dd>
        <dt><strong>counterClass</strong></dt>
        <dd><em>String.</em> Class for the counter. Default: <strong>character-count</strong></dd>
        <dt><strong>defaultClass</strong></dt>
        <dd><em>String.</em> Class applied to counter when the character warning or limit values haven't been exceeded. Default: <strong>bg-info</strong></dd>
        <dt><strong>warningClass</strong></dt>
        <dd><em>String.</em> Class applied to counter when the character warning values have been exceeded. Default: <strong>bg-warning</strong></dd>
        <dt><strong>dangerClass</strong></dt>
        <dd><em>String.</em> Class applied to counter when the character limit value has been exceeded. Default: <strong>bg-danger</strong></dd>
      </dl>
    </section>
  </body>
</html>