Skip to content

Commit

Permalink
Readme, example update
Browse files Browse the repository at this point in the history
  • Loading branch information
@effone
effone committed Aug 22, 2018
1 parent 07043dd commit 7d13db0
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 17 deletions.
81 changes: 80 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,81 @@
# jquery.ruk
Yet another full-fledged jQuery accordion plugin with bare minimum code.
Yet another full-fledged jQuery accordion plugin with bare minimum code. 607 bytes only (418 bytes : js, 189 bytes : css

## Dependency
Since it is a jQuery plugin; jQuery library should be included on prior.

## Instalation
Include `jquery.ruk.min.css` from dist folder.
```
<link rel="stylesheet" href="./dist/jquery.nok.min.css">
```

Include `jquery.ruk.min.js` from dist folder.
```
<script src="./dist/jquery.nok.min.js"></script>
```
Initiate the plugin.
```
$('.target').ruk();
```
Thats all. Your target div is now ruk (an accordion).

npm? `npm install jquery.ruk`

## Target Element Structure

The target element should have div groups, each containing collapse groups in div pairs : one for title and the other for content (that will hide or show). Targetting element structure other than this may cause the plugin malfunction. Example:

```
<div class="target"> <!-- the ruk element -->
<div> <!-- group : 1 -->
<div>Title Block</div> <!-- title block -->
<div>Content Block</div> <!-- content block (will show / hide) -->
</div>
<div> <!-- group : 2 -->
<div>Title Block</div>
<div>Content Block</div>
</div>
<div> <!-- group : 3 -->
<div>Title Block</div>
<div>Content Block</div>
</div>
<!-- add as many similar groups as you want -->
</div>
```

## Option(s)
As of now there is only one option and that is `only`. By default this is set to `false` but if you set it `true` only one element will remain opened at-a-time, that means clicking on a 'title block' will close other opened 'content blocks' before opening its content.

You can set `only` option on this way:
```
$('.target').ruk({
only: true
});
```

## Callback
This plugin supports a callback and extends the ability to get the group sequence number and it's content state after each title click. This can be helpful for
- Saving the states of the groups using cookies
- Targetting to load ajax content in the content block when it gets opened.

etc.

You can set the callback this way:
```
$('.target').ruk({
after: function (id, state) {
// 'id' is the group serial number
// 'state' is corresponding 'content block' state. If the content block is visible the state is 'true', else 'false'.
console.log(id + " : " + state);
}
});
```
## Version History
1.0.0 : <2018.08.22>
- Initial stable release
1 change: 1 addition & 0 deletions example/base.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$("#ruk").ruk({
only: true,
after: function (id, state) {
console.log(id + " : " + state);
}
Expand Down
55 changes: 39 additions & 16 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,66 @@
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Maitree:400,700">
<link type="text/css" rel="stylesheet" href="base.css" />
<link type="text/css" rel="stylesheet" href="../src/jquery.ruk.css" />
<link type="text/css" rel="stylesheet" href="../dist/jquery.ruk.min.css" />
</head>

<body>
<div id="container">
<h2>jquery.ruk</h2>
<div id="ruk">
<div>
<div>First Title</div>
<div>What is Lorem Ipsum?</div>
<div>
Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded.

Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</div>
</div>
<div>
<div>Second Title</div>
<div>Where does it come from?</div>
<div>
Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded.

Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College
in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line
in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</div>
<div>
<div>Third Title</div>
<div>
Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded.

Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.
<div>Why do we use it?</div>
<div>It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English. Many
desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and
a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
<div>
<div>Where can I get some?</div>
<div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable. If you
are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden
in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200
Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</div>
</div>
</div>
<!-- copyright notice.-->
<p>&#169; effone, 2018</p>
<p>&#169; <a href="https://github.com/effone">effone</a>, 2018</p>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../src/jquery.ruk.js"></script>
<script type="text/javascript" src="../dist/jquery.ruk.min.js"></script>
<script type="text/javascript" src="base.js"></script>
</body>

Expand Down

0 comments on commit 7d13db0

Please sign in to comment.