20-A/20-B/20-C News Grid

The News component shows the news items in a grid. It implements a sidebar to filter the news.

The pagination component is adding dynamically.

Usage with HTML Attribute

The attribute data-aau="news" has to be placed on the news items container. It then automatically uses the news plugin.

<div class="news" data-aau="news" data-requesturl="http://example.com/ajax/getthenews/" data-requesttype="POST">
  <div class="columns tablet-4 box-link-item">
    <div class="row">
      <a href="#">
        <div class="columns small-3 tablet-12 small-push-9 tablet-unpush">
          <div class="marged">
             <div data-aau="imageloader" data-src="news1.jpg" data-resize="true" data-alt="some description">
             </div>
          </div>
        </div>
        <div class="columns small-9 tablet-12 small-pull-3 tablet-unpull">
          <div class="marged padded info">
             <p>The Academy Student Artist ...</p>
          </div>
        </div>
      </a>
    </div>
  </div>
  <!-- ... -->
</div>

Usage with Javascript

$('#news').news();

HTML Attributes

Name Type Default Required Description Example
data-requesturl String '' no Request URL called to get the news results through Ajax
<div data-aau="news"
data-requesturl="http://[EXAMPLE_URL]">
  ...
</div>
data-requesttype String 'GET' no Request type to call the news Ajax script, either 'GET' or 'POST'
<div data-aau="news" data-requesturl="http://[EXAMPLE_URL]" data-requesttype="POST">...</div>

Using Options with Javascript

You can use the options with Javascript, by passing them in an object, without the prefix "data-" in the option name.

$('#news').news({
  requesturl: 'http://[EXAMPLE_URL]',
  requesttype: 'POST'
});

Ajax

Get Multiple News Items

The script defined in data-requesturl will load the news. The results will then be filled in the news container.

Parameter
Name Type Example Description
category String, Number 1 Value of the selected element in the sidebar
Response HTML structure

The script must return HTML data respecting the following structure (see example here) :

<div class="columns tablet-4 box-link-item">
  <div class="row">
    <a href="#">
      <div class="columns small-3 tablet-12 small-push-9 tablet-unpush">
        <div class="marged">
           <div data-aau="imageloader" data-src="[IMAGE_PATH]" data-resize="true" data-alt="some description"></div>
        </div>
      </div>
      <div class="columns small-9 tablet-12 small-pull-3 tablet-unpull">
        <div class="marged padded info">
           <p>[TEXT]</p>
        </div>
      </div>
    </a>
  </div>
  <div class="row">
    ...
  </div>
</div>

Live Example

20-D News Layout

News & Events

<div class="row">
  <div class="columns tablet-6 medium-8">
    <div class="marged">
    <!-- BEGIN Large Link Item -->
      <div class="large-link-item">
        <a href="#">
          <div data-aau="imageloader" data-src="../../vendors/docs/images/12-columns-image.jpg" data-resize="false" data-alt="some description"></div>
        </a>
        <div class="row">
          <div class="columns medium-6">
            <div class="padded info">
              <h5 class="title">Lorem ipsum dolor sit amet eu mus hendrerit venenatis.</h3>
              <p class="small muted">posted on 5/29/2013 in <a href="#">tag1</a><a href="#">tag2</a></p>
            </div>
          </div>
          <div class="columns medium-6">
            <div class="padded info">
              <p>Lorem ipsum dolor sit amet massa torquent porttitor primis, habitasse. Facilisi metus Donec varius tellus habitant. Aptent hendrerit semper leo habitasse porta congue pellentesque est venenatis Maecenas. Ut nostra urna id, netus. Posuere Sed.Montes Suspendisse sit arcu, diam, varius primis ad. Dolor! Bibendum parturient, vitae vulputate ut morbi imperdiet risus justo. varius primis ad. Dolor! Bibendum parturient, vitae vulputate ut morbi imperdiet risus justo.</p>
            </div>
          </div>
        </div>
      </div>

    <!-- END Large Link Item -->
    </div>
  </div>
  <div class="columns tablet-6 medium-4">
    <div class="row">
      <div class="marged">
        <!-- BEGIN Link in small Box 4 columns -->
        <div class="columns small-box-link-item">
          <div class="row">
            <a href="#">
              <div class="columns small-9">
                <div class="padded info">
                  <p>Lorem ipsum dolor sit amet torquent augue litora elit, Curae mattis.Ut tellus.</p>
                </div>
              </div>
              <div class="columns small-3">
                <div class="marged">
                  <div data-aau="imageloader" data-src="../../vendors/docs/images/news/news1.jpg" data-resize="true" data-alt="some description"></div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="columns small-box-link-item">
          <div class="row">
            <a href="#">
              <div class="columns small-9">
                <div class="padded info">
                  <p>Lorem ipsum dolor sit amet torquent augue litora elit, Curae mattis.Ut tellus.</p>
                </div>
              </div>
              <div class="columns small-3">
                <div class="marged">
                  <div data-aau="imageloader" data-src="../../vendors/docs/images/news/news2.jpg" data-resize="true" data-alt="some description"></div>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="columns small-box-link-item">
          <div class="row">
            <a href="#">
              <div class="columns small-9">
                <div class="padded info">
                  <p>Lorem ipsum dolor sit amet torquent augue litora elit, Curae mattis.Ut tellus.</p>
                </div>
              </div>
              <div class="columns small-3">
                <div class="marged">
                  <div data-aau="imageloader" data-src="../../vendors/docs/images/news/news3.jpg" data-resize="true" data-alt="some description"></div>
                </div>
              </div>
            </a>
          </div>
        </div>

        <!-- END Link in small Box 4 columns -->
      </div>
    </div>
    <div class="row">
      <div class="marged padded">
        <h4>Upcoming events</h4>
      </div>
    </div>
    <div class="row">
      <div class="marged events-stacked">
        <!-- BEGIN Event Item -->
          <div class="row event-item">
            <a href="">
              <div class="column small-9 tablet-8">
                <div class="padded">
                  <p class="desc">Approximate percentage of graduating students that find work in their field of study</p>
                </div>
              </div>
              <div class="column small-3 tablet-4">
                <p class="month">November</p>
                <p class="day">19</p>
              </div>
            </a>
          </div>
          <div class="row event-item">
            <a href="">
              <div class="column small-9 tablet-8">
                <div class="padded">
                  <p class="desc">Year we began offering online programs.[link to academics/online] Discover our online education program</p>
                </div>
              </div>
              <div class="column small-3 tablet-4">
                <p class="month">January</p>
                <p class="day">02</p>
              </div>
            </a>
          </div>
          <div class="row event-item">
            <a href="">
              <div class="column small-9 tablet-8">
                <div class="padded">
                  <p class="desc">Student and alumni art shows and gallery exhibitions presented in San Francisco each year.</p>
                </div>
              </div>
              <div class="column small-3 tablet-4">
                <p class="month">February</p>
                <p class="day">23</p>
              </div>
            </a>
          </div>

        <!-- END Link in small Box 4 columns -->
      </div>
    </div>
    <div class="row">
      <div class="marged padded">
        <a href="#" class="link-btn">See All News and Event</a>
      </div>
    </div>
  </div>
</div>
<div class="four_spacing"></div>

Sign In