jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順-jsチュートリアル-php.cn

jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順

WBOY

リリース： 2016-05-16 18:19:58

オリジナル

1685 人が閲覧しました

例:
Internet Explorer 6.0
Firefox 2.0
Opera 9.0
Safari 3.0
Google Chrome 1.0
Konqueror 3.5
qTip を使用すると、位置とスタイルを簡単に定義できます。同時に、qTip には強力な API もあります...
qTip を使用する前に、2 つの JS ファイルをインポートするだけです:

コードをコピーコードは次のとおりです。

次の例比較的単純な例をいくつか示します。

1. 基本テキスト

html は次のとおりです:

コードをコピーしますコードは次のとおりです。

基本テキスト ;/div> ;

JS コード:

コードをコピーコードは次のとおりです:

jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順

2. タイトル属性
html は次のとおりです:

コードをコピーコードは次のとおりです:

タイトル属性

JS コード:

コードをコピーしますコードは次のとおりです:

効果は次のとおりです:

3. jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順

html は次のとおりです表示:

コードをコピーコードは次のように:

コードをコピーコードは次のとおりです:

$(document).ready(function()

{
$('#content a[href]').qtip({
コンテンツ: ' jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順

})
}); >効果は図に示すとおりです:

4. コーナー値

html は次のとおりです:
jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順

コードをコピー

コードは次のとおりです:

コーナー値 div>

JS コード:

コードをコピー

コードは次のとおりです。

効果は次の図のようになります:

5. >
html は次のとおりです:

コードをコピーします

コードは次のとおりです:

🎜>

JS コード:

コードをコピー

コードは次のとおりです: < ;script type="text/javascript" > $(document).ready(function() { $('#content img').each(function()

{

$(this).qtip(
{
content: '編集 | 削除',
位置: 'topRight'、
非表示: {
固定: true
}、
スタイル: {
パディング: '5px 15px'、
名前: 'クリーム'
}
}) ;
});

CSS コード:

コードをコピーします

コードは次のとおりです。

効果は図に示すとおりです:

6. HTML の読み込み 

html は次のとおりです:

コードをコピーします

jquery 用のツールチッププラグイン qtip_jquery の使用に関する詳細な手順

コードは次のとおりです:

;a href="#" rel="sample.html">クリックしてください

JS コード: コードをコピー

コードは次のとおりです。

Js コード

$(document).ready(function()
{
$ ('#content a[rel]').each(function()
{ $(this).qtip ( { content: { url: $(this).attr('rel'), title: { text: 'Wiki - ' $(this).text( ),
button: 'Close'
}
},
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust: {
screen: true
}
},
show: {
when: 'click',
solo: true
},
非表示: 'unfocus'、
スタイル: {
ヒント: true 、
ボーダー: {
幅: 0、
半径: 4
}、
名前: 'light',
width: 570
}
})
})
});

効果は図に示すとおりです:

7. モーダルツールチップ

html は次のとおりです:

コードをコピーします

コードは次のとおりです:

< ;div id="content"> ここをクリック