ホームページ ウェブフロントエンド jsチュートリアル Baidu Popup.js ポップアップ ボックスの進化版、ドラッグ アンド ドロップの小さいフレームのリリース、IE6/7/8、Firefox、Chrome_javascript スキルと互換性あり

Baidu Popup.js ポップアップ ボックスの進化版、ドラッグ アンド ドロップの小さいフレームのリリース、IE6/7/8、Firefox、Chrome_javascript スキルと互換性あり

May 16, 2016 pm 06:29 PM
ポップアップボックス 百度

Script House は以前にもそのようなコードをリリースしましたが、これは大きな問題ではありませんが、今回のバージョンでは主にサーバー側のメソッドを実行するためのいくつかの関数とコールバックが追加されており、asp.net 開発または Ajax 開発にとって非常に価値のある改善です。
まずレンダリングを見てみましょう:
Baidu Popup.js ポップアップ ボックスの進化版、ドラッグ アンド ドロップの小さいフレームのリリース、IE6/7/8、Firefox、Chrome_javascript スキルと互換性あり

オリジナルの Baidu の Popup.js があります

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

宣言された Web ページ、つまり IE6、7、および 8 のマスクには互換性の問題があります。レイヤーは全画面表示にすることができますが、Firefox および Chrome では全画面マスキングはできません。
FF および Chrome でマスク レイヤーが全画面表示にならない原因となる問題は 267 行目にあります:
コードをコピー コードは次のとおりです。
var C = '
';

スタイルマスク レイヤーの DialogBoxBG は単純に height:100% に設定されているため、 ステートメントを含むページは FF および Chrome と互換性がありません。
しかし、現在、「luocheng」popup.js の「完全版」がインターネット上にあります。それをダウンロードして試してみたところ、FF と Chrome と完全には互換性がありませんでした。マスクレイヤーをフルスクリーンにできないというバグがまだあり、ソースコードを読んでエラーを見つけました:LuochengのバージョンではgetValueメソッドが追加されており、実際にはswitchステートメントに2つのケース「clientHeight」がありました。 1 つを削除した後は、まだ FF と Chrome との互換性がありません。追加された setBackgroundSize メソッドで、height=integer をコピーするだけです。これは Web 標準に従っていないため、FF と Chrome にはバグがあります。
コードをコピー コードは次のとおりです。

setBackgroundSize: function() {
var getValueWidth;
var getMaxValueWidth = [getValue("clientWidth"), getValue("scrollWidth")];
getValueWidth = eval("Math.max(" getMaxValueWidth.toString() ")"); >G( 'dialogBoxBG').style.width = getValueWidth;
var getValueHeight = [getValue("clientHeight"), getValue("scrollHeight")]; Math.max (" getMaxValueHeight.toString() ")");
G('dialogBoxBG').style.height = getValueHeight; },


解決策は簡単です: G(' DialogBoxBG') .style.height = getValueHeight; を G('dialogBoxBG').style.height = getValueHeight "px"; に変更します。
そのため、今後の開発プロセスでは、幅と高さに「px」などの単位を追加するのが最善であることに注意してください。

異なるブラウザ間のページの高さの違いを取得するためのリファレンスを添付します: ClientHeight: IE と FF ではこの属性に違いはありません。どちらもブラウザの可視領域を指します。ブラウザのツールバーとステータスバーを除いた残りのページ表示スペースの高さです。
scrollHeight: IE では、scrollHeight はページの実際のコンテンツの高さであり、FF では clientHeight よりも小さくなる可能性があります。は Web ページのコンテンツの高さですが、最小値は clientHeight です。
/************************************************* *****/
拡張メソッド:

1. サーバー側メソッド

を実行するための確認ボックスのコールバックをポップアップします。
コードをコピー コードは次のとおりです:

function Showconfirm(title, content, target) //確認ダイアログボックスを表示
{
var Pop = new Popup({
contentType: 3,
isReloadOnClose: false,
幅: 350,
高さ: 110
});
pop.setContent("title", title);
pop.setContent("confirmCon", content); .setContent("callBack", ShowCallBackServer); //コールバック関数
pop.setContent("parameter", {
id: "divCall",
str: target,
obj: Pop
});
pop.build();
popp = Pop;
}

// サーバー側を実行します。メソッド、つまり __doPostBack('','') 操作を実行します。

function ShowCallBackServer(para) { var str = para["str"] if ("" != str && null != str) {
str = GetEachBtnName(str);
if ("" != str && null != str) {
//alert(str); , '');
}
}
ClosePop();
}
//ページ内のボタン名を走査します
function GetEachBtnName(obj) {
return obj .name == '' || obj.name == null ? obj.id :
}



OnClick 内="btnTest_Click" の Button コントロールに OnClientClick を return Showconfirm(' ','削除してもよろしいですか?', this) として登録します。
完全なコード:


コードをコピー

コードは次のとおりです: 2. iframe での Popup.js の使用
ページに iframe を埋め込み、iframe にポップアップするダイアログ ボックスまたは確認ボックスを親ページにポップアップ表示します。マスクレイヤーが親ページ内だけでなく全画面表示になっている場合は、確認後にコールバック操作 iframe を実行します。これにより、iframe 内のサーバー側メソッドが実行されます。

コードをコピー

コードは次のとおりです。 function ShowconfirmIFrame(title, content, target) //表示確認ダイアログ{ var Pop = new Popup({ contentType: 3,
isReloadOnClose: false,
width: 350,
height: 110
});
pop.setContent("title", title);
pop.setContent("callBack", ShowIFrame); 🎜>pop .setContent("パラメータ", {
id: "divCall",
str: ターゲット,
obj: ポップ
}); .build( );
popp = Pop;
var temp;
parent.フレーム["コンテンツ"].window.ShowCallBackServerIFrame(temp);
//parent.window.iframe.ShowCallBackServer();
}
function ShowCallBackServerIFrame(para) {
var str = para;
if ("" != str && null != str) {
str = GetEachBtnName(str)
if ("" != str && null != str) {
__doPostBack(str) , '' ; >



コードをコピー


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


//削除
関数subDel(obj)
{
returnparent.parentDel(obj);
}



ボタン ボタン コントロールは OnClientClick イベントを登録します:


コードをコピーします
コードは次のとおりです: 親ページ定義 js メソッド:


コードをコピーします


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

functionparentDel(obj) { return ShowconfirmIFrame('Delete '、'削除してもよろしいですか? ',obj);
}
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

2か月後、人型ロボットWalker Sが服をたたむことができるようになった 2か月後、人型ロボットWalker Sが服をたたむことができるようになった Apr 03, 2024 am 08:01 AM

Machine Power Report 編集者: Wu Xin 国内版の人型ロボット + 大型模型チームは、衣服を折りたたむなどの複雑で柔軟な素材の操作タスクを初めて完了しました。 OpenAIのマルチモーダル大規模モデルを統合したFigure01の公開により、国内同業者の関連動向が注目を集めている。つい昨日、中国の「ヒューマノイドロボットのナンバーワン株」であるUBTECHは、Baidu Wenxinの大型モデルと深く統合されたヒューマノイドロボットWalkerSの最初のデモを公開し、いくつかの興味深い新機能を示した。 Baidu Wenxin の大規模モデル機能の恩恵を受けた WalkerS は次のようになります。 Figure01 と同様に、WalkerS は動き回るのではなく、机の後ろに立って一連のタスクを完了します。人間の命令に従って服をたたむことができる

Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売 Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売 Jun 04, 2024 pm 08:01 PM

5月15日、Baidu Apolloは武漢Baidu キャロット Auto Robot Zhixing Valleyで2024年アポロデーを開催し、過去10年間におけるBaiduの自動運転における大きな進歩を包括的に実証し、大型モデルと乗客の安全性の新たな定義に基づいた技術的飛躍をもたらした。世界最大の自動運転ネットワークである百度は、自動運転を人間の運転よりも安全なものにしました。このおかげで、より安全、より快適、環境に優しい、低炭素の旅行方法が理想から現実へと変わりつつあります。百度グループ副社長兼インテリジェント・ドライビング・ビジネス・グループ社長の王雲鵬氏はその場で「自動運転車を開発するという私たちの本来の目的は、より良い旅行への人々の高まる切望を満たすことだ。人々の満足こそが私たちの原動力である。なぜなら安全性、とても美しいので、見ることができて嬉しいです

百度西陽貝殻の入手方法を紹介 百度西陽貝殻の入手方法を紹介 Mar 28, 2024 am 09:11 AM

西浪には貝殻の場所と入手方法が分からないユーザーがたくさんいます。数時間探してもまだ見つからないプレイヤーもいます。以下では、編集者が百度西陽貝殻の入手方法を紹介します。 . ぜひ見に来てください。 Baidu Xirang Shell の入手方法 1. まずコミュニティに来てから、下の写真の場所に来る必要があります。 2. ここで目的地を選択し、188階に入​​るを選択します。 3. 188 階に入った後、歩いているとこのプロンプトが表示されるので、「了解しました」をクリックします。 4. 砲弾の場所は少し見つけにくいですが、188 エレベーターのすぐ後ろに、砲弾である小さな光る点があります。 5. 貝殻をクリックするには VR コントローラーを使用する必要があります。引き換え方法 1. まず、ページ右上隅の「設定」アイコンをクリックし、「」を選択します。

Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口 Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口 Feb 19, 2025 pm 04:54 PM

DeepSeekは、Webバージョンと公式Webサイトの2つのアクセス方法を提供する強力なインテリジェント検索および分析ツールです。 Webバージョンは便利で効率的であり、公式ウェブサイトは包括的な製品情報、ダウンロードリソース、サポートサービスを提供できます。個人であろうと企業ユーザーであろうと、DeepSeekを通じて大規模なデータを簡単に取得および分析して、仕事の効率を向上させ、意思決定を支援し、イノベーションを促進することができます。

百度のロビン・リー氏は石油・ガス業界のインテリジェンスについて話し合うためにチームを率いてペトロチャイナを訪問した 百度のロビン・リー氏は石油・ガス業界のインテリジェンスについて話し合うためにチームを率いてペトロチャイナを訪問した May 07, 2024 pm 06:13 PM

5月7日の当サイトのニュースによると、5月6日、百度の創業者兼会長兼最高経営責任者(CEO)のロビン・リー氏がチームを率いて北京の中国石油天然気集団公司(以下、ペトロチャイナ)を訪問し、同社の取締役らと会談した。中国石油総公司の董事長と戴侯良党書記が会談した。両者は協力を強化し、エネルギー産業とデジタルインテリジェンスの深い統合を促進することについて綿密な意見交換を行った。ペトロチャイナはデジタル中国石油総公司の構築を加速し、百度グループとの協力を強化し、エネルギー産業とデジタルインテリジェンスの徹底的な統合を促進し、国家エネルギー安全保障の確保にさらに貢献する。ロビン・リー氏は、大型モデルによって示される「インテリジェントな創発」と理解、生成、論理、記憶といった中核的な機能によって、最先端技術と石油・ガス事業の組み合わせに対する想像力のより広い空間が開かれたと述べた。いつも

Samsung Galaxy S24シリーズ携帯電話の中国版「Search in Circle」がGoogle検索に対応すると報じられている Samsung Galaxy S24シリーズ携帯電話の中国版「Search in Circle」がGoogle検索に対応すると報じられている Jun 01, 2024 am 09:54 AM

5月31日のニュースによると、ブロガー@ibinguniverseが本日、Samsung Galaxy S24シリーズ携帯電話の中国版「Search in Circle」がGoogle検索をサポートするというニュースを伝えた。ブロガーは具体的な発売時期については明らかにしなかった。 Samsungの以前の紹介によると、Samsung Galaxy S24シリーズは多くの高レベルのAI機能、入力、翻訳、レコーダー、メモ、カメラなどのAIベースの実用的な機能を搭載しており、ユーザーにより便利で効率的な包括的なサービスを提供します。経験。海外版とは異なり、Samsung Galaxy S24シリーズのAI機能のほとんどはBaiduなどの国内メーカーが提供しています。以前に報告されたように、Galaxy AI は、Baidu Wenxin 大型モデルの複数の機能を深く統合しており、エンドサイド対応の通話機能と翻訳機能、および生成 AI によってもたらされるインテリジェントな要約を提供できます。

AIツールのおすすめ AIツールのおすすめ Nov 29, 2024 am 11:08 AM

この記事では、Douyin Doubao、Wenxin Yige、Tencent Zhiying、Baidu Feipiao EasyDL、Baidu AI Studio、iFlytek Spark Cognitive Large Model を含む 6 つの人気 AI ツールを紹介します。これらのツールは、テキスト作成、画像生成、ビデオ編集、AI モデル開発などのさまざまな機能をカバーしています。適切な AI ツールを選択するには、機能要件、技術レベル、コスト予算などの要素を考慮する必要があります。これらのツールは、AI 支援を必要とする個人や企業に便利で効率的なソリューションを提供します。

Baiduの別の国の製品は、Deepseekに接続されていますか? Baiduの別の国の製品は、Deepseekに接続されていますか? Mar 12, 2025 pm 01:48 PM

DeepSeek-R1はBaidu LibraryとNetDiskを支援します。深い思考と行動の完璧な統合は、わずか1か月で多くのプラットフォームに迅速に統合されました。大胆な戦略的レイアウトにより、BaiduはDeepSeekをサードパーティモデルのパートナーとして統合し、それをそのエコシステムに統合します。これは、「ビッグモデル検索」の生態学的戦略の大きな進歩を示しています。 Baidu SearchとWenxin Intelligent Intelligent Platformは、DeepSeekおよびWenxin Bigモデルの深い検索関数に最初に接続し、ユーザーに無料のAI検索エクスペリエンスを提供します。同時に、「Baiduに行くときにあなたが知っている」という古典的なスローガンとBaiduアプリの新しいバージョンは、WenxinのBig ModelとDeepseekの機能も統合し、「AI検索」と「ワイドネットワーク情報の改良」を起動します。

See all articles