jQuery万能フロートプラグインテスト

jQuery万能フロートプラグインテスト
http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html
ソースファイルのダウンロードzip 17.2k
一、ページ上の要素をロードする
デフォルトrelロード
HTMLコード:<a id="trigger1"href="javascript:;"rel="targetBox">デフォルトrelロード</a>
JSコード:$("#trigger 1").powerFloat();
targetパラメータロード
HTMLコード:<a id="trigger2"href="###">targetパラメータロード</a>
JSコード:$("#trigger 2").powerFloat({ target: $("#targetBox") });
targetパラメータはセレクタ
HTMLコード:<a id="trigger3"href="###">targetパラメータはセレクタ</a>
JSコード:$("#trigger 3").powerFloat({ target: ".target_box"});
二、Ajax外部要素のロード
relプロパティ表示ピクチャ
HTMLコード:<a id="trigger4"href="javascript:;"rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg「>relプロパティ表示ピクチャ</a>
JSコード:$("#trigger 4").powerFloat({ targetMode: "ajax"});
targetパラメータはピクチャアドレス
HTMLコード:<a id="trigger5"href="javascript:;">targetパラメータはピクチャアドレス</a>
JSコード:$("#trigger 5").powerFloat({ target: "http://tp3.sinaimg.cn/2305056670/180/5608200132/0", targetMode: "ajax"});
外部HTMLクリップのロード:クリックして表示を切り替え
HTMLコード:<button id="trigger6">クリックして表示を切り替えます</button>
JSコード:$("#trigger 6").powerFloat({ eventType: "click", target: "/study/201009/html-load.html", targetMode: "ajax"});
外部ページデータのロードに失敗しました:テストをクリック
HTMLコード:<button id="trigger7">クリックテスト</button>
JSコード:$("#trigger 7").powerFloat({ eventType: "click", target: "http://www.baidu.com/", targetMode: "ajax"});
三、ドロップダウンリストの表示
純文字リストドロップダウン:クリックして名前リストを表示▼
HTMLコード:<button id="trigger8">クリックすると名前のリストが表示されます▼</button>
JSコード:$("#trigger 8").PowerFloat({width:“inherit”,eventType:“click”,target:[“唐麗霞”,“徐棟梁”,“成霞”,“王慶花”,“王腊梅”,“朱小麗”,“束方娟”,“吉回秀”,“陳陽”,“<a href='##;>もっと>&targetMode: "list"});
リンク付きテキストドロップダウン:もっと記事▼
HTMLコード:<a id="trigger9"href="/wordpress/">もっと記事▼</a>
JSコード:$("#trigger 9").PowerFloat({width:250,target:[{href:「####」,text:「これは文章1の話です」},{href:「##」,text:「あ,ほら,文章2」},{href:「####」,text:「あ,悪い,文章3を家に忘れました!」{href:「##」,text:「マサガ,これが伝説の...文章4...」},{href:“##”,text:“なんだよ、文章5だよ、期待してたんだよ”},targetMode:“list”});
リストデータ表示なし
HTMLコード:<a id="trigger10"href="#">リストなしデータ表示</a>
JSコード:$("#trigger 10").powerFloat({ targetMode: "list"});
四、簡単なヒントの表示
パスワードを入力:
再入力:
HTMLコード:パスワード入力:<input class="pwdTrigger"type="password"placeholder="6~20文字"/>再入力:<input class="pwdTrigger"type="password"placeholder="上と同じパスワードを入力"/>
JSコード:$(".pwdTrigger").powerFloat({ eventType: "focus", targetMode: "remind", targetAttr: "placeholder", position: "1-4"});
[OK]ボタンをクリックするか、フォーカスを失った後にヒントを表示します(テキストボックスデータを空にする/変な文字を入力するなど):
を選択します.
HTMLコード:<input id="posTrigger1"type="text"/> <button id="trigger11">確定</button>
JSコード:var fnPosTri=function(){var oPosTri=$("#posTrigger 1"),vPosTri=$.trim(oPosTri.val());if(vPosTri=="){oPosTri.powerFloat({eventType:null,targetMode:"remind",target:"入力内容が空にならない!"position: "1-4"}).focus(); } Else if(/W/g.test(vPosTri){oPosTri.powerFloat({eventType:null,targetMode:"remind",target:"英字,数字,下線のみ入力",position:"1-4").focus(); } else { $.powerFloat.hide(); } }; $("#trigger11").bind("click", fnPosTri); $("#posTrigger1").bind("blur", fnPosTri);
四、カスタムフローティングヒント
アナログtitleのtipヒント表示:触って私もそして私
HTMLコード:<a class="tipTrigger"href="###"tip="触って">触って</a> <a class="tipTrigger"href="###"tip="私も">私も</a> <a class="tipTrigger"href="###"tip="そして私">そして私</a>
JSコード:$(".tipTrigger").powerFloat({ offsets: { x: -10, y: 22 }, showDelay: 200, hoverHold: false, targetMode: "tip", targetAttr: "tip", position: "3-4"});
右上隅の固定位置の操作ヒントレイヤ(ajaxリクエストでヒント、ページジャンプでヒントなど):
ログイン送信リフレッシュ
HTMLコード:<span id="targetFixed"class="target_fixed"></span> <button class="operateTrigger">ログイン</button> <button class="operateTrigger">コミット</button> <button class="operateTrigger">リフレッシュ</button>
CSSコード:.target_fixed { height:25px; padding:1px; position:fixed; _position:absolute; top:0; right:0; }
JSコード:

$(".operateTrigger").click(function() {
    var txt = $(this).text();
    //IE6  
    if (!window.XMLHttpRequest) {
        $("#targetFixed").css("top", $(document).scrollTop() + 2);	
    }
    //        
    if (!$("#overLay").size()) {
        $('<div id="overLay"></div>').prependTo($("body"));
        $("#overLay").css({
            width: "100%",
            backgroundColor: "#000",
            opacity: 0.2,
            position: "absolute",
            left: 0,
            top: 0,
            zIndex: 99
        }).height($(document).height());
    }
    //      ，       
    $("#targetFixed").powerFloat({
        eventType: null,
        targetMode: "doing",	
        target: "  " + txt + " ...",
        position: "1-2"
    });
    //    ，   
    setTimeout(function() {
        $("#overLay").remove();
        $.powerFloat.hide();
    }, 2000);
});

五、カスタムコンテナ
カスタムコンテナ外部ピクチャのロード(ソフト投影なし):
CSSコード:

.custom_container{position:absolute; background-color:rgba(0, 0, 0, .5); background-color:#999\9;}
.custom_container img{padding:0; position:relative; top:-5px; left:-5px;}

HTMLコード:<div id="customContainer"class="custom_container"></div> <input id="trigger12"type="button"src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg"value="私をクリック"/>
JSコード:$("#trigger 12").powerFloat({ eventType: "click", targetMode: "ajax", targetAttr: "src", container: $("#customContainer"), reverseSharp: true });
カスタムコンテナロードページ要素:
HTMLコード:<input id=「trigger 13」type=「button」src=「targetBox」value=「私をクリック」/>
JSコード:$("#trigger 13").powerFloat({ eventType: "click", targetMode: null, targetAttr: "src", container: $("#customContainer") });
六、マウス追従効果
サムネイルには大きな図が表示され、マウスで追従(垂直方向):

CSSコード:.dib { display: inline-block; }
HTMLコード:<a class="dib"id="trigger14"href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg"/> </a>
JSコード:$("#trigger 14").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "y", position: "6-8"});
サムネイルには大きな図が表示され、マウスで追従(水平方向):

CSSコード:.dib { display: inline-block; }
HTMLコード:<a class="dib"id="trigger15"href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg"/> </a>
JSコード:$("#trigger 15").powerFloat({ targetMode: "ajax", targetAttr: "href", hoverFollow: "x", hoverHold: false, position: "5-7"});