← Back

AutoTOC

Title 1

Mr. Zuckerkorn, you've been warned about touching. You said spanking. It walked on my pillow! How about a turtle? I've always loved those leathery little snappy faces.

Title 1.1

Ah coodle doodle do Caw ca caw, caw ca caw. Butterscotch!

Title 1.1.1

Want a lick? Okay, Lindsay, are you forgetting that I was a professional twice over - an analyst and a therapist.

Title 2

You boys know how to shovel coal? Don't worry, these young beauties have been nowhere near the bananas. I thought the two of us could talk man-on-man.

<div class="pat-autotoc"
     data-autotoc-scrollDuration="slow"
     data-autotoc-levels="h4,h5,h6">
<h4>Title 1</h4>
...
<h5>Title 1.1</h5>
...
<h6>Title 1.1.1</h6>
...
<h4>Title 2</h4>
...
</div>

Tabs

Tab 1

I've used one adjective to describe myself. What is it? Everybody dance… NOW. Actually, that was a box of Oscar's legally obtained medical marijuana. Primo bud. Real sticky weed. Suddenly playing with yourself is a scholarly pursuit? We need a name. Maybe 'Operation Hot Mother'. O-kay, who'd like a banger in the mouth?

Tab 2

Don't ask "Can I"… ask "I Can!" Do you have any idea how often you say the word "afraid"? Well, I know I used it in the Jacuzzi. It looks like you've been looking for dragons… in the future. I've been in the film business for a while but I just can't seem to get one in the can. Oh, I don't have any drugs for sale, unless… did you want me to follow you to your car? Turn this skiff around!

Tab 3

I didn't get into this business to please sophomore Tracy Schwartzman, so… onward and upward. On… Why, Tracy?! Why?!! So maybe you could start jete-ing, and stop je-terrorizing me!

<form class="pat-autotoc"
      data-autotoc-levels="legend"
      data-autotoc-section="fieldset"
      data-autotoc-klass="autotabs">
  <fieldset>
    <legend>Tab 1</legend>
    ...
  </fieldset>
  ...
</form>

Datetime

DateTime with Calendar

<input class="pat-datetime" data-datetime-format="d-mmmm-yyyy@HH:MM" />

Datetime witouth Calendar

<input class="pat-datetime" data-datetime-format="d-mmmm-yyyy HH:MM" />

Date only, US. format

<input class="pat-datetime"
  data-datetime-format="mmmm/dd/yyyy"
  data-datetime-ampm="false"
  />

Select2

Autocomplete with search

<select class="pat-select2" data-select2-width="20em">
  ...
</select>

Tagging

<input type="text" class="pat-select2"
    data-select2-tags="Red,Yellow,Green"
    data-select2-width="20em" />

Orderable tags

<input type="text" class="pat-select2"
    data-select2-orderable="true"
    data-select2-tags="Red,Yellow,Green"
    data-select2-width="20em" />

Expose

<form id="mockup-expose" class="form-horizontal pat-expose">
  ...
</form>

Expose on hover

<button type="submit"
    class="btn btn-large pat-expose"
    data-expose-triggers="hover">Hover over this button</button>

Modal basic

<a href="#mockup-expose"
    class="btn btn-large btn-primary pat-modal">
    Modal basic</a>

Modal with Patterns inside

<a href="#mockup-tabs" id="modal1"
    class="btn btn-large btn-primary pat-modal">
  Modal with Patterns inside</a>

Modal with remote content (AJAX)

<a href="something.html#content" id="modal2"
    class="btn btn-large btn-primary pat-modal">
  Modal with remote content (AJAX)</a>

Modal with custom position

<a href="#modal3"
    class="btn btn-large btn-primary pat-modal"
    data-modal-position="center bottom"
    data-modal-height="30%"
    data-modal-width="80%;">
  Modal with custom position</a>
<div style="display:none">
  <div id="modal3">
    <h1>Modal with custom position and also width / height</h1>
  </div>
</div>

Modal with long text

Did you know that more frozen bananas are sold right here on this boardwalk than anywhere on the OC? You stay on top of her, Buddy. Don't be afraid to ride her. Hard. Are you aware of this? Coming soon. Indeed. Whoa whoa whoa whoa. Wait. Are you telling me you have a multi-stage trick with hidden identities? That coat costs more than your house! Well, obviously, I'm not a big guy. I'm not a Carl Weathers, par example. You burn down the storage unit? Oh, most definitely. Oh…yeah…the guy in the…the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. Come on!

No! These are just strippers! Look how hot they are! Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. Look, you are playing adults…with fully formed libidos, not 2 young men playing grab-ass in the shower. I just don't want him to point out my cracker ass in front of Ann. How about a turtle? I've always loved those leathery little snappy faces. I believe you will find the dessert to be both engrossing and high-grossing! So we don't get dessert?

I'm in Vegas this week and would like to point out the Blue Man Group is *actually* hiring. The support group? Te quiero. English, please. I love you! Great, now I'm late. We need a name. Maybe "Operation Hot Mother." No, let's try to top that. (They never did.) Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. I am going to my spin class. I thought you had vertigo. Turns out he ended up getting too friendly with the teddy bear.

And although the intervention didn't work, it turned into one of the Bluth family's better parties. Te quiero. English, please. I love you! Great, now I'm late. I call it Tricks –- wait for it – Around The Office. The only thing I found in the fridge was a dead dove in a bag. Gob: You didn't eat that, did you?

I believe you will find the dessert to be both engrossing and high-grossing! So we don't get dessert? Well excuse me for liking the way they frame my junk! Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? Buster, what are you doing with mother's rape-horn?

I believe you will find the dessert to be both engrossing and high-grossing! So we don't get dessert? Look at us, crying like a couple of girls on the last day of camp. Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I know she's a brownish area! With points! And I love her! Let me give that oatmeal some brown sugar. YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! It's as Ann as the nose on plain's face.

Let me give that oatmeal some brown sugar. So, what do you say? We got a basket full of father-son fun here. What's Kama Sutra oil? Maybe it's not for us. Say goodbye to THESE!

So maybe you could start jete-ing, and stop je-terrorizing me! Don't call my escorts whores.

Yes. Lindsay and I are planning a night of heterosexual intercourse. Look, you are playing adults…with fully formed libidos, not 2 young men playing grab-ass in the shower. Ah coodle doodle doo, ah coodle doodle doo. One for the ladies. Make love in your *own* hand, Mother! Fried cheese… with club sauce. Popcorn shrimp… with club sauce. Chicken fingers… with spicy club sauce. Fried cheese… with club sauce. Popcorn shrimp… with club sauce. Chicken fingers… with spicy club sauce. I'm going to buy you the single healthiest call girl this town has ever seen.

I don't care if it takes from now till the end of Shrimpfest. You might wanna lean away from that fire since you're soaked in alcohol.

Let me give that oatmeal some brown sugar. So, what do you say? We got a basket full of father-son fun here. What's Kama Sutra oil? Maybe it's not for us. Say goodbye to THESE!

So maybe you could start jete-ing, and stop je-terrorizing me! Don't call my escorts whores.

I don't care if it takes from now till the end of Shrimpfest. You might wanna lean away from that fire since you're soaked in alcohol.

Let me give that oatmeal some brown sugar. So, what do you say? We got a basket full of father-son fun here. What's Kama Sutra oil? Maybe it's not for us. Say goodbye to THESE!

So maybe you could start jete-ing, and stop je-terrorizing me! Don't call my escorts whores.

I don't care if it takes from now till the end of Shrimpfest. You might wanna lean away from that fire since you're soaked in alcohol.

<a href="#modal4"
    class="btn btn-large btn-primary pat-modal">
  Modal with long text</a>
<div style="display:none">
  <div id="modal4">
    <p>Did you know ....</p>
    ...
  </div>
</div>

Form Helpers

PreventDoubleSubmit

     
<form class="pat-preventdoublesubmit">
  <input
    type="text"
    value="submit this value please!"
    />
  <input
    class="btn btn-large btn-primary"
    type="submit"
    value="Single submit"
    />
  <input
    class="btn btn-large btn-primary allowMultiSubmit" 
    type="submit"
    value="Multi submit"
    />
</form>

FormUnloadAlert

     
<form class="pat-formunloadalert" onsubmit="javascript:return false;">
  <input
    type="text"
    value=""
    />
  <select>
    <option value="1">value 1</option>
    <option value="2">value 2</option>
  </select>
  <input
    class="btn btn-large btn-primary"
    type="submit"
    value="Submit"
    />
  <a href="patterns.html">Go somewhere else</a>
</form>

← Back

AutoTOC

Table of Contents

Title 1

Title 1.1

Title 1.1.1

Title 2

Tabs

Datetime

DateTime with Calendar

Datetime witouth Calendar

Date only, US. format

Select2

Autocomplete with search

Tagging

Orderable tags

Expose

Expose on focus event (default)

Expose on hover

Modal with custom position and also width / height

Form Helpers

PreventDoubleSubmit

FormUnloadAlert