chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2014/09/12

[Javascript]文章でクラスの追加、削除のタイミングなどを指定するJavascript「uilang」

設定方法が普段みるものとは異なっていて面白いと思ったのでご紹介。使用する場面は非常に限られておりますw
Javascriptで書かれており、どのブラウザでも動作すると思いますが今回チェックはしておりません。
変わったものもあるんだなーぐらいで、どうぞw

ウェブデザイナーのためのjQueryプラグイン?

設定方法があまりみないタイプだったので、ご紹介。

uilang」というJavascriptなのですが、まずはサンプルにあったアコーディオンのアニメーションがこちら

8zOYWiGVC1

どのように動いているか調べてみました。

サンプルコードですが、htmlタグやheadタグが無かったので、

必要なものを足したコードが以下です。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1 class=open>About me</h1>
<p>Hi! My name’s Ben, I’m a 30-year old interface designer.

<h1>Work</h1>
<p>You can see some of my recent work on <a href=http://dribbble.com/bdc>Dribbble</a>.

<h1>Contact</h1>
<p>Feel free to send me <a href="#">an email</a> or ping me on <a href="#">Twitter</a>!

<script src=uilang.js></script>

<code>
 clicking on "h1" removes class "open" on "h1.open"
 clicking on "h1" adds class "open" on "target"
</code>

</body>
</html>

スクリプトが反応している部分はこちらです。

<code>
 clicking on "h1" removes class "open" on "h1.open"
 clicking on "h1" adds class "open" on "target"
</code>

jQueryで書かれていないので、書き易い方にはいいかもしれません。

一応スクリプト部分の解説を。

clicking on “h1” 「h1をクリックした時」 removes class “open” on “h1.open” 「h1.openのopenクラスを取り除く」

clicking on “h1” 「h1をクリックした時」adds class “open” on “target”  「ターゲット(h1もしくはクラス指定も可能)にopenクラスを付ける」

といった具合に、文章で操作が可能です。

構文というのは決まっていて、

<code>
    clicking on "(1)" (2) class "(3)" on "(4)"
</code>

まず、(1) はCSSのセレクタです。クリックされる要素をclassまたはidまたはタグを書きます。

(2)は adds (追加) , removes(削除) , toggles (on/off) の3つうちどれかを入れます。

(3)は追加や削除したいclassまたはidを指定します。

(4)はどこに追加するかCSSのセレクタを指定します targetの場合はクリックした要素となるようです。

これが基本構文なので、ほんとに簡単なものかつアニメーションはCSSで記述する必要があります。

使う場面というのは非常に限られているとは思いますが・・・w

 

サイトはすごい綺麗ですので、使わずとも一度サイトを覗いてみてはいかがでしょうか。

 

※2014/09/13 タイトルがjQueryプラグインになっていたので修正しました。

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加