Code Monkey home page Code Monkey logo

laquu.js's Introduction

Laquu.JS

Laquu.JSって?

Laquu.JSは普段からのHTMLコーディング作業量を極力減らすためのjQueryプラグインです。

プラグインが散乱することを防ぎ、1ファイルで完結することで、後の管理を極力低減させます。

Laquu.JSを使う事で、きっと「楽に作業を軽減」することができるはずです。

使い方

使い方は、scriptタグで読み込むだけで使う準備が整います。

<script type="text/javascript" src="/path/to/jquery.Laquu.JS"></script>

機能一覧

Laquu.JSでサポートしている機能は次の24機能です。

  • [ver1.0.0] シンプルなアコーディオンパネル(accordion)
  • [ver1.0.0] ブラックアウトスクロール(blackoutscroll)
  • [ver1.0.0] ブランク(blank)
  • [ver1.0.0] パンくず(breadcrumb)
  • [ver1.0.0] バブルポップアップ(bubblepopup)
  • [ver1.0.0] ドロップダウン(dropdown)
  • [ver1.0.0] フォントサイズ(fontsize)
  • [ver1.0.0] インナースライド(innerslide)
  • [ver1.0.0] コナミ(konami)
  • [ver1.0.0] クリアオーバー(clearOver)
  • [ver1.0.0] オーバー(over)
  • [ver1.0.0] ピックメニュー(picMenu)
  • [ver1.0.0] スクローラー(scroller)
  • [ver1.0.0] ストライプ(stripe)
  • [ver1.0.0] タブ(tab)
  • [ver1.0.0] ティッカー(ticker)
  • [ver1.0.0] ツールチップ(tooltip)
  • [ver1.1.0] 拡張子アイコン(exticon)
  • [ver1.1.0] イメージオーバー(imageOver)
  • [ver1.1.0] スクロールtoビュー(s2v)
  • [ver1.2.0] ブリンク(blink)
  • [ver1.2.0] イーキューヘイト(eqheight)
  • [ver1.2.0] ポスフィックス(posfix)
  • [ver1.2.0] トースト(Toast)
  • [ver1.3.0] インクリメンタル検索(ics)

今後も独断と偏見で色々な機能が追加される予定です。

各機能の使い方

このファイルでは収まり切らないので、Laquu.JSの公式サイトを御覧ください。

また、2.0公開に伴い、内部の実装が新しくなっております。

まだドキュメントは準備出来ていませんが、早く準備します。。

// 使い方は基本的なjQueryプラグインと同等に扱えます。(toastプラグインだけ異なった記述が必要です)

jQuery("CSS Selector").laquu("プラグイン名"[, { オプション }]);

のように記述します。

具体的にタブプラグインを挙げると、

jQuery("#tab1").laquu("tab");

と記述します。

各プラグインのminファイルの作り方

Laquu.JSはver1.2.0から、Google ClosureCompilerを利用し、min構成を作っています。

build.sh(bash)を実行することで自動的に最小構成ファイルの全入りと、各プラグインの最小構成ファイルを書き出します。

$ cd Laquu.JS
$ chmod 0755 build.sh
$ ./build.sh
:
: いっぱいログが出ます
:
$ // 書き出し完了のメッセージが表示されれば完了です。

ライセンスについて

MITライセンスで配布させていただいています。

商用利用もご自由に行ってください。

お気に召しましたら、開発者に1杯のビールかハイボールを下さい!XD

プラグインを利用して発生した障害などについて

当プラグインはMITラインセンスとして配布している為、これら全ての障害などについては一切の責任を負いません。

全て自己責任で利用してください。

laquu.js's People

Contributors

nully avatar

Stargazers

 avatar Junichi avatar アシカガコウジ avatar MOTOO11 avatar PGMY avatar  avatar  avatar  avatar Gun.io Robot avatar  avatar mamigaku avatar Daisuke Miura avatar mitsuakasayama avatar milligramme avatar ruedap avatar Joohun, Maeng avatar Tetsuwo OISHI avatar sasezaki avatar Naoki Endoh avatar

Watchers

 avatar James Cloos avatar  avatar

laquu.js's Issues

Closure Compilerを導入

概要

プラグインコードを最小化・読み込み速度向上のため、JSCompilerを導入。

Google謹製のClosureCompilerを利用します。

cloneしたユーザー

cloneされたユーザー方でも同梱したbuild.shを実行するだけで、自前で最小構成ファイルを生成できます。

ドキュメント整理

ドキュメント整理させて!

おねがい!><

ドキュメントの上手な作り方(?)みたいなのがあればアドバイスいただければと...orz

Current navigation plugin

閲覧ページのlocationから対象となるナビゲーションのhref属性と一致させ、「_on」などでナビゲーションのカレント状態を表示する。

使い方

$l("#global-nav").currentNav();

実装

laquu.fn.currentnav = function(o) {
    var anchors = this.find("a[href]"),
           currentLoc = location.href,
           options = $l.extend({
                suffix: '_on'
            }, o || {});
    anchors.each(function(){
        var $t = $l(this);
        if(new RegExp(currentLoc, "i").test(l))
            return true; // break on the next;

        var $i = $t.find("img"),
               s = $i.attr("src");

        var res = s.split("."),
               ext = res.pop();

        var r = res.push(options.suffix).push(ext).join(".");
        $i.attr("src", r);

        return false;
    });
    return this;
};

jQuery1.9以降で使えなくなる

jQueryのsubを使っているところがありますが、jQuery1.9以降ではsubは削除されています。
その結果プラグインがうまく動かなくなります。

私の所でtoastのプラグインを使おうとして失敗しました。

参考までに
http://s3pw.com/qrefy/jquery.sub/

Githubの方が最新だと気づいていなかったため、見当違いなissueを送ってしまいました。申し訳ありません。

サブクラス化

jQuery1.5からサポートされたsubClass構造を使ったコードに変更し

laquu("selector").pluinName();

で動作するようにする。

eqheightプラグインの余白問題

eqheightプラグインを適用する要素の余白(padding)が指定されていると、余白+高さの合計値が要素に適用されてしまうバグを解決しよう!やってみよう!

ピックメニューのcurrentオプションについて

概要

ピックメニューのcurrentオプションをautoオプションとの併用を考慮する。

所感

個人的な所感としては、自動開閉するのに1番目とかの指定はどうなのだろう?というのがあり、autoオプションとの併用は行わないようにしていました。

が、見た目上の都合を考えると、開いた状態にしておくことでインパクトも出るし、自動開閉することでユーザーへのアプローチ手段としても使えるので、ver1.2.0での対応をします。

対応策

currentオプションは初期表示を決定づけるものなので、指定された場所から次の要素を自動開閉する必要が有る。

TomatoCMSからRougeへ移行

概要

現在はTomatoCMSを利用して運営しているが、これだといちいちモジュール作って、登録して...なんて結構面倒。

しかも大概自作しなければ...っ!

なので、自作するならZFのネイティブコードに近いRougeを使って構築する。

そうすればカスタムダウンロードも実装できる。

アコーディオンの表示時の挙動

アコーディオンプラグインの表示されているパネルのトリガーをクリックするとアニメーション処理が実行されてしまうので、表示されてる場合は処理させないようにする

png透過プラグインを追加したい

というタイトル通りの要望。

追加バージョンはわかりません...。

ver1.2.0い追加できれば追加しますです。

(特段必要無いような気もしますが)

Toastプラグインの追加

概要

Android端末で良く利用されるToastをlaquuでも実装する。

イメージ

Toastまんま。

実装予定

laquu.Toastはオブジェクトで、この中に以下のメソッドを持つ(予定)。

  • show
  • queue
  • dequeue
  • showNextQueue

オプション

message

発行するメッセージ。

showTime

Toastの表示時間。

msで指定する。

fadeTime

フェードイン/アウトする際の速度を指定。

msで指定する。

examplesをtestsディレクトリへ変更

examplesではなく、testsディレクトリへ変更。

testsディレクトリは各プラグインのHTMLが入っている。

プラグインテストページで利用する素材などはexternalsに入る。

IEのposition問題をフィックスするプラグインの追加

概要

IE6ではpositionでfixedが使えないので、これに対応するためのプラグインを追加する。

対応策はabsoluteとスクロールイベントでのポジション固定化を図る。

ピュアCSSと違い、動作が格付く恐れがあるが、これはIEがfixedに対応していないほうが悪いので、仕様とさせて頂きます。

現在考えてるオプションは以下のとおり。

オプション

表示位置

固定化するウィンドウの上端+指定された値で表示位置を調整する。
初期値は0とする。

固定位置は上下左右とあるので、以下のような形式で指定するようになる可能性が高い。(単位はpx)

var options = {
    top: 0,
    right: 10,
};

または

var options = {
    bottom: 10,
    left: 20
};

スクロールイベント発生時のコールバック関数の実装は未定。(ほぼやらない予定)

また、プラグイン側ではpositionプロパティと座標位置を表すプロパティにのみ抑えるようにする。

Safari6でスクローラーが動かない

Safari6にてスムーススクローラーが動かない

Safari6のJSエンジンにバグがあるのか定かでは無いが、jQueryForumにおいて同様の現象が発生し、Safari6のバグとして報告されている模様。

Laquu.JSの本質からずれないようにするため。差異を吸収するように、scroll(Top or Left)の内容からSafari6の場合のみscrollLeftを削除して適用させるように修正する。

ピックメニューの初期開き状態の設定

無くてもいいとは個人的には思っていたが、場合により、開いた状態にしておきたいことがあるので、実装しようか予定中。

対処法として、mouseoverがbindされているので、オプションにより、triggerを実行することで対処。

自動開閉の場合は開くことはできるが、自動的に次を開くようになる予定。

タブプラグインでタブパネル以外が開いてしまうバグ

タブプラグイン単体ではなく、タブプラグイン+アコーディオンプラグインなど、プラグインを併用市たことで見つけたバグ。

概要

ID属性がタブもアコーディオンも同一に設定されていた場合にタブプラグイン側で親子関係が整理できていない

発症コード

https://gist.github.com/1483919

(IDをよく見ると重複している。)

対応策

親子の関係を維持させるように修正

ブリンクプラグインの追加

概要

ブリンクプラグインはマウスオーバーの際に点滅したような表現をするプラグインです。

リンクや、画像などに利用し、視覚効果を与えます。

オプション

opacity

マウスが乗っかったときに下がる透明度を指定します。

初期値は「.65(65%)」です。

onComplete

透明度が1になった際に呼び出されるコールバック関数です。

初期値は「$l.empty(空関数)」です。

onMouseOver

マウスが対象にのっかったときに呼び出されるコールバック関数です。

初期値は「$l.empty(空関数)」です。

要素同士の高さを揃えるプラグインを追加

概要

IEってほら、display: box;とか使えないじゃないですか?
そこでこれが登場するわけですよ。

要素ごとの高さを揃えるために、CSSではほとんどサポートが辛いと思われるため、プラグインとして実装し、高さを揃えるプラグイン。

実装概要

指定したクラス要素(.equalHeightなど)をループで解析し、高さの大きい物に揃えるようにする。

書き方の実装

// あくまで例
laquu(".equalHeight").equalHeight();

オプション

オプションは今のところ考えてません。

あるとすれば、min-heightとmax-heightを指定することくらいかな...。

laquu(".equalHeight").equalHeight({
    minHeight: 100,
    maxHeight: 300
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.