jQuery の下にある、使用されていない可能性のあるいくつかの関数 used_jquery

1. 独自のドロップダウンリストを作成します
HTML でドロップダウン リストと言えば、

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

hello 1

しかし、その表示は見栄えが良くありません。div ul を使用して自分でドロップダウンリストを作成することもできますが、非常に面倒なスライドダウン機能とスライドアップ機能があります。
IE8 での効果の比較:


まず、非常に単純なアイデアについて説明します。
a ドロップダウンの代わりに Div を使用する必要があります。 list レコードが表示されるコンテナを選択し、offset を使用して Div を表示する位置、offset.top および offset.left を取得します。

b. UL とその子 li を通じてドロップダウン ボックスをシミュレートします。

i: UL は新しく作成された Div に配置する必要があり、この Div の位置は前のステップの Div の先頭から遠く離れています。 iDiv) の最上位データの iDiv.height;

ii: li 要素をクリックした後は必ずクリアしてください。そうしないと、ドロップダウン リストがどんどん長くなってしまいます。 。 。

iii: マウスが他の場所をクリックしたとき、ドロップダウン リストは非表示にする必要があります。

この関数を実装する方法をコードで段階的に説明します。


1. ドロップダウン リストで選択した値のコンテナとして iDiv を作成します。
iDiv を作成する前に、まずこのドロップダウン リストを表示する位置を取得する必要があります:

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

// offset、width、height を使用して選択リストの位置を取得します

var offset = $(".select_css").offset();
var width = $(".select_css").width();
var height = $(".select_css").height();


次のステップは次のとおりです。 iDivb を作成し、css() メソッドを使用して iDiv に書式設定を追加します。

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

var iDiv = $("

").css({

'top': offset.top,
'left': offset.left,
'width': width,
' height': 高さ、
'border': '1px ソリッド #aaaaaa'、
'fontSize': '12px'、
'textIndent': '4px'、
'cursor' : 'default ' }).text("hello");


iDiv も本来は不要な class='iDiv' を追加しましたが、jQuery の css() が処理できないことがわかりました。画像の no-repeat 属性については、長い間探しても外国人用の例がないため、この clas='iDiv':

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

{

background-image:url('images/select_right. gif');
background-position:right;
background-repeat:no-repeat;


効果は次のとおりです。 🎜>
2. iDiv でクリック イベントが発生したら、ドロップダウン ボックスを作成し、スライドダウン効果を使用します。

まず、cDiv を作成し、それを HTML の本文に追加する必要があります。その位置は iDiv のすぐ下にあるため、cDiv は次のように作成する必要があります:


コードをコピー

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

var cDiv = $("

") .css({ 'position': '絶対', 'width': 幅, 'top': offset.top 22, 'left': offset.left,

'background': '# f7f7f7',

'border': '1px ソリッド シルバー'
}).hide();


デフォルトでは非表示にします。



この cDiv を使用すると、iDiv Click イベントが発生したときに UL リストを作成し、それを cDiv に追加するだけで済みます。

コードをコピー


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

var UL = $("

").appendTo(cDiv); >for (var i = 1; i $("

")。 appendTo(UL).text("hello" i).mouseover(function () {
$(this).css(
{
'color': 'white',
'background' : 'グレー'
}
);
'background': 'white'
});
}).click(function () {
// cDiv を非表示にし、選択した crent li のテキストを iDiv のテキストとして設定します
$ ("#cDiv").slideUp().hide();
$("#iDiv").html($(this).html());
}
// cDiv をスライド表示します
$("#cDiv").slideDown('slow');


マウスオーバーで各 li レコードが追加されることがわかります。マウスアウトイベントとクリックイベント。

クリック イベントが発生したら、cDiv を slideUp に渡すだけでなく、次回 iDiv をクリックする前にそれを非表示にして cDiv をクリアする必要があります。この2点がとても重要です。この 2 つのことを実行しないとどうなるかを試してみてください。

li をクリックするときは、現在の li の HTML コンテンツを iDiv にコピーすることを忘れないでください。そうしないと、コントロールは実質的な効果を持ちません。 。 。 。 。

3. Ajax を使用して、サーバーからドロップダウン リストの値を取得します。

多くの場合、サーバーからドロップダウン リストの値を動的に取得する必要があるため、iDiv をクリックするときは、まず jQuey の ajax メソッド (または他の ajax を介してサーバーからデータをロードする必要があります)メソッド）、データのロードが完了すると、UL リストの作成が開始されました。

Ajax 要求のデータ ソースとして WCF Servece を使用しています。




利便性を高めるため、サーバーからデータを取得する際にロード画像としてiDivを表示させます。 。 。 。 。 。 。 。 。 。 。 。

コードのダウンロード:

http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

2. jQuery の追加機能を使用して、再生するビデオ ファイル (Flash または Silverlight プレーヤー) を更新せずに切り替えます。 以前、これを必要とするミニサイトがありました。調べてみましたが、本当に効果があります。

http://haokan.lafaso.com/pretty.html

どなたでもご覧いただけます。これは広告ではないと思いますが、ほとんどの男性はこれを読まないと思います。ふふ。ただ、将来的にはこの方法が使えるかもしれないと思っています。

これらのプレーヤーはすべて埋め込みコントロールであるため、埋め込みの src 属性を置き換えることでさまざまなビデオを再生できます。例:

jQuery の append() メソッドを使用すると、embed の src を変更し、div1 の html を再度置き換えることができます。これは、ページ上で ajax テクノロジーを使用しているようなものです。

コードをコピー

コードは次のとおりです: $("#div1 embed")。 empty() ; var placeHolder = $("

"); var tempParent = $("

"); div1 embed" ); embed.replaceWith(placeHolder);

tempParent.append(embed);

embed.attr("src", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/ v.swf&auto =1);
placeHolder.replaceWith(tempParent.html());

3. jQuery を使用して HTML のヘッダー関数とフッター関数を実装します。
phpやasp.netではヘッダーやフッターなどのコントロールがありますが、phpではincludeを使いますが、asp.netではmasterやascxを使います。 HTML の

はどうでしょうか?今までなかったと思います。しかし、顧客は、ユーザーが多すぎると心配なので、ページを HTML にするように要求しました。 。 。 。 。

フッターとヘッダーを使用する利点は、これらの部分のコンテンツを変更する必要がある場合、1 ページを変更するだけですべてのページが変更されることです。

その後、jquery のload() メソッドを使用する方法を見つけました。

まず、HTML に 2 つの Div を追加する必要があります。1 つは の上部に、もう 1 つは下部にあります。Id='header' と id='footer' を指定するのが最適です。 。

その後、サーバー側では header.html と footer.html を作成するだけで済みます。

ページが読み込まれるとき、jquery のloadメソッドを使用してheader.htmlとfooter.htmlを読み込みます。


コード:

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

$("#header").load("controls/header.html", function (response, status, xhr) {
if (status == "error") {
var msg = "サーバー データ送信エラー。ページを更新してください。";
// $("#error").html(msg xhr.status " " xhr.statusText); msg);
}
});
// サーバーからフッターをロード
$("#footer").load("controls/footer.html", function (response, status, xhr) ) {
if (status == "error") {
var msg = "サーバー データ送信エラー。ページを更新してください。"
// $("#error").html(msg xhr .status " " xhr .statusText);
alert(msg);
}
可能であれば、いくつかの jQuery テクニックをまとめて共有します。後で。 。 。 。 。 。 。 。ドロップダウン ボックスのコードのダウンロード アドレスも後ほどお知らせします。
乾杯
ニック

コードのダウンロード:
http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript oop_javascript スキルを使用してスライド メニュー コントロールを開発する次の記事：JavaScript oop_javascript スキルを使用してスライド メニュー コントロールを開発する

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved