Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung der Verwendungsbeispiele für JS-Plug-In-Overlibs_Javascript-Kenntnisse

Ausführliche Erläuterung der Verwendungsbeispiele für JS-Plug-In-Overlibs_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:23:19

Original

1379 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben die Verwendung von Overlib. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

overLIB ist ein hervorragender JS-Code, der Seiteneffekte wie Eingabeaufforderungsfelder und Popup-Menüs generiert.

Es kann einfach den Stil, die Oberfläche und die Form der Popup-Seite ändern, indem einige Parameter oder Befehle festgelegt werden. Darüber hinaus bietet es sehr einfache Erweiterungsfunktionen, um den unterschiedlichen Bedürfnissen der Kunden gerecht zu werden.

overLIB ist sehr einfach zu verwenden.

1. Fügen Sie das Tag

hinzu:

Kopieren Sie den Code Der Code lautet wie folgt:

2. Fügen Sie das Tag hinzu:

Kopieren Sie den Code Der Code lautet wie folgt:

< div id="overDiv" style="position:absolute; sichtbarkeit:hidden; z-index:1000;">

Dieser Schritt kann für Versionen 4.10 und höher weggelassen werden

3. Generieren Sie zwei verschiedene Stile von Popup-Seiten (Popup und Sticky)

<a href="javascript:void(0);" onmouseover="return overlib('这是一个popup.');" onmouseout="return nd();">popup示例</a>
<a href="javascript:void(0);" onmouseover="return overlib('这是一个sticky',STICKY, MOUSEOFF);" onmouseout="return nd();">stick示例 </a>

Nach dem Login kopieren

4. Befehle und Parameter

Popup

sein verwendet werden erwartet

Attributname	Typ	Erforderlich	Standard	Beschreibung
Text	Zeichenfolge	Ja	n/a	der Text/HTML, der im Popup-Fenster angezeigt werden soll
Auslöser	Zeichenfolge	Nein	onMouseOver	Was wird verwendet, um das Popup-Fenster auszulösen? Kann onMouseOver oder onClick
klebrig	boolean	Nein	falsch	Das Popup bleibt bestehen, bis es geschlossen wird
Bildunterschrift	Zeichenfolge	Nein	n/a	setzt die Beschriftung auf Titel
fgcolor	Zeichenfolge	Nein	n/a	Farbe der Innenseite der Popup-Box
bgcolor	Zeichenfolge	Nein	n/a	Farbe des Randes der Popup-Box
Textfarbe	Zeichenfolge	Nein	n/a	Legt die Farbe des Texts im Feld fest
Capcolor	Zeichenfolge	Nein	n/a	Legt die Farbe der Boxbeschriftung fest
Farbe schließen	Zeichenfolge	Nein	n/a	Legt die Farbe des Abschlusstextes fest
Textschriftart	Zeichenfolge	Nein	n/a	Legt die Schriftart fest, die vom Haupttext verwendet werden soll
Beschriftungsschriftart	Zeichenfolge	Nein	n/a	legt die Schriftart der Beschriftung fest
closefont	Zeichenfolge	Nein	n/a	Legt die Schriftart für den „Schließen“-Text fest
Textgröße	Zeichenfolge	Nein	n/a	Legt die Größe der Schriftart des Haupttextes fest
Bildunterschriftsgröße	Zeichenfolge	Nein	n/a	Legt die Größe der Schriftart der Beschriftung fest
Nahgröße	Zeichenfolge	Nein	n/a	Legt die Größe der Schriftart des „Schließen“-Textes fest
Breite	Ganzzahl	Nein	n/a	legt die Breite der Box fest
Höhe	Ganzzahl	Nein	n/a	legt die Höhe der Box fest
links	boolean	Nein	falsch	Lässt die Popups links von der Maus erscheinen
richtig	boolean	Nein	falsch	Lässt die Popups rechts von der Maus erscheinen
Mitte	boolean	Nein	falsch	Lässt die Popups in die Mitte der Maus wandern
oben	boolean	Nein	falsch	Lässt die Popups über der Maus erscheinen. HINWEIS: Nur möglich, wenn die Höhe eingestellt wurde
unten	boolean	Nein	falsch	Lässt die Popups unter der Maus erscheinen
Grenze	Ganzzahl	Nein	n/a	macht den Rand der Popups dicker oder dünner
Offsetx	Ganzzahl	Nein	n/a	Wie weit vom Zeiger entfernt das Popup angezeigt wird, horizontal
Offset	Ganzzahl	Nein	n/a	Wie weit vom Zeiger entfernt das Popup angezeigt wird, vertikal
fgbackground	URL zum Bild	Nein	n/a	definiert ein Bild, das anstelle der Farbe für die Innenseite des Popups verwendet werden soll.
bgbackground	URL zum Bild	Nein	n/a	definiert ein Bild, das anstelle der Farbe für den Rand des Popups verwendet werden soll. HINWEIS: Sie sollten bgcolor auf „“ setzen, sonst wird die Farbe ebenfalls angezeigt. HINWEIS: Bei einem Schließen-Link rendert Netscape die Tabellenzellen neu, wodurch alles falsch aussieht
closetext	Zeichenfolge	Nein	n/a	setzt den Text „Schließen“ auf etwas anderes
noclose	boolean	Nein	n/a	Zeigt den Text „Schließen“ nicht auf Stickies mit einer Beschriftung an
Status	Zeichenfolge	Nein	n/a	Legt den Text in der Statusleiste des Browsers fest
Autostatus	boolean	Nein	n/a	setzt den Text der Statusleiste auf den Text des Popups. HINWEIS: Überschreibt die Statuseinstellung
autostatuscap	Zeichenfolge	Nein	n/a	setzt den Text der Statusleiste auf den Text der Beschriftung. HINWEIS: Überschreibt Status- und Autostatus-Einstellungen
inarray	Ganzzahl	Nein	n/a	weist overLib an, Text aus diesem Index im ol_text-Array in overlib.js zu lesen. Dieser Parameter kann anstelle von Text
caparray	Ganzzahl	Nein	n/a	weist overLib an, die Beschriftung aus diesem Index im ol_caps-Array zu lesen
capicon	URL	Nein	n/a	zeigt das vor der Popup-Beschriftung angegebene Bild an
snapx	Ganzzahl	Nein	n/a	rastet das Popup an einer gleichmäßigen Position in einem horizontalen Raster ein
bissig	Ganzzahl	Nein	n/a	rastet das Popup an einer gleichmäßigen Position in einem vertikalen Raster ein
fixx	Ganzzahl	Nein	n/a	Sperrt die horizontale Position des Popups. Hinweis: Überschreibt alle anderen horizontalen Platzierungen
fixy	Ganzzahl	Nein	n/a	Sperrt die vertikale Position des Popups. Hinweis: Überschreibt alle anderen vertikalen Platzierungen
Hintergrund	URL	Nein	n/a	Legt fest, dass das Bild anstelle des Tabellenfeldhintergrunds verwendet werden soll
padx	Ganzzahl,Ganzzahl	Nein	n/a	Fügt dem Hintergrundbild horizontalen Leerraum für die Textplatzierung hinzu. Hinweis: Dies ist ein Befehl mit zwei Parametern
pady	Ganzzahl,Ganzzahl	Nein	n/a	Fügt dem Hintergrundbild vertikale Leerzeichen für die Textplatzierung hinzu. Hinweis: Dies ist ein Befehl mit zwei Parametern
vollständiges HTML	boolean	Nein	n/a	ermöglicht Ihnen, den HTML-Code vollständig über ein Hintergrundbild zu steuern. Der HTML-Code wird im Attribut „text“
Rahmen	Zeichenfolge	Nein	n/a	controls popups in a different frame. See the overlib page for more info on this function
timeout	string	No	n/a	calls the specified javascript function and takes the return value as the text that should be displayed in the popup window
delay	integer	No	n/a	makes that popup behave like a tooltip. It will popup only after this delay in milliseconds
hauto	boolean	No	n/a	automatically determine if the popup should be to the left or right of the mouse.
vauto	boolean	No	n/a	automatically determine if the popup should be above or below the mouse.

overLIB 可以接受任意个命令和参数。格式如下：命令[,'命令参数']

<a href="javascript:void(0);" onclick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION,
'Sticky!', CENTER);" onmouseout="nd();">Click here!</a>

Nach dem Login kopieren

五、 overlib的一些使用示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<scriptlanguage="JavaScript" src="overlib.js"></script><html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<ahref="#" onclick="return overlib('使用overlib的命令', CAPTION, '这是Caption命令，就是生成头部',HAUTO);"" onmouseout="return nd();">弹出测试</a>
<ahref="javascript:void(0);" onmouseover="return overlib('This is an ordinary popup.',CLOSECLICK);" onmouseout="return nd();">here</a>
<ahref="javascript:void(0);" onmouseover="return overlib('This is what we call a sticky, since I stick around (it goes away if you move the mouse OVER and then OFF the overLIB popup--or mouseover another overLIB).', STICKY, MOUSEOFF);" onmouseout="return nd();">吸附性的提示框</a>
<ahref="javascript:void(0);" onclick="return overlib('This is a sticky with a caption. And it is centered under the mouse!', STICKY, CAPTION,'Sticky!',CENTER);">含CAPTION的STICKY!</a>
<ahref="javascript:void(0);" onclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',HEIGHT, 100,WIDTH,120,LEFT);">指定大小与位置弹出</a>
<ahref="javascript:void(0);" onclick="return overlib('Setting size and posiztion!', STICKY, CAPTION,'Sticky!',STATUS ,'Hello');">设置状态栏</a>
</body>
</html>

Nach dem Login kopieren

六、自定义overlib。overlib有三种方式可以实现自定义。

1、我们上面用过的通过输入不同命令来实现自定义。
2、修改overlib.js中的默认值来实现自定义
3、在引用的页面指定变量来实现自定义。

overlib点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

Verwandte Etiketten：

用法

Quelle：php.cn

Vorheriger Artikel：AngularJS verwendet ngMessages für die Formularvalidierung_AngularJS Nächster Artikel：Detaillierte Erläuterung der benutzerdefinierten Filter in AngularJS_AngularJS

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors