jQuery

【jQuery】ウェブサイトにPinterestのようなボックスを追加することができるBoxify

June 18, 2017
Boxify.js

Boxify.jsは簡単にあなたのウェブサイトにPinterestのようなボックスを追加することができるjQueryプラグイン。

Adding Boxify.js to your website

<script type="text/javascript" src="/path/to/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/boxify.min.js"></script>

Using Boxify

<section id="boxy">
  <figure>
    <img src="..." />
    <figcaption>
      ...
    </figcaption>
  </figure>
</section>
<script type="text/javascript">
    $(window).load(function() {
        $('#boxy').boxify();
    });
</script>

Global Styling

  1. background
  2. border-color
  3. color
  4. margin
  5. padding
  6. width

example

// This sets our boxes to have a red background and a width of 300px
$('#boxy').boxify({
    background: "#f00",
    width: "300px"
});

Individual Box Styling

  1. data-background
  2. data-border-color
  3. data-color

example

<figure data-background="#f00" data-color="white">
    ...
</figure>