Anpassbares JQueryUI-Widget

Die jQueryUI stellt eine Eigenschaft namens resizable()-Methode bereit, die angibt, ob die Größe des Elements vom Benutzer geändert werden kann oder nicht. Mit dem Größenänderungs-Plugin können Sie die Größe ausgewählter Elemente ändern, indem Sie das Symbol unten rechts am Element verwenden, um die Größe zu ändern.

lesen Sie auch:

  • JQuery Keydown, Keypress und Keyup
  • JQUEry-Einstellungs-Dropdown-Wert
  • JQuery prepend() und prependTo()

Die Größenänderungsmethode kann in den folgenden Formen verwendet werden:

  • $(Selektor, Kontext).resizable(Optionen)
  • $(Selektor, Kontext). in der Größe veränderbar („Aktionen“, [params])

Das Folgende ist ein einfaches Beispiel für ein veränderbares Widget:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#resizeMe {
	width: 150px;
	height:150px;
	padding:0.5em;
	background:orange;
	text-align:center;
	font-weight: bold;
	}
</style>
   <script type="text/javascript">
      $(function () {
         $('#resizeMe').resizable();
      });
   </script>
</head>
<body>
	<div id="resizeMe">
		<p>Resize Me</p>
	</div>
</body>
</html>

Einfache anpassbare JQuery-Demo

Einfaches JQueryUI-Beispiel

Anpassbare Widget-Optionen

Das in der Größe veränderbare Widget enthält einige Optionen, die in der folgenden Tabelle aufgeführt sind:

Option Beschreibung Standardwert

auchGröße ändernEs wird verwendet, um die Größe mehrerer Elemente gleichzeitig zu ändern.FALSCH
animierenEs aktiviert die endgültige Größe nach der Größenänderung, wenn die Maustaste losgelassen wird.FALSCH
animateDurationEs bestimmt die Dauer des Größenänderungseffekts in Millisekunden und wird nur verwendet, wenn es auf „true“ gesetzt ist.langsam
animateEasingEs gibt an, welche Beschleunigung angewendet werden soll, wenn die Animationsoption verwendet wird.schwingen
SeitenverhältnisEs bestimmt, ob das Höhen- und Breitenverhältnis für das Element beibehalten werden soll.FALSCH
automatisch ausblendenEs verbirgt das Symbol oder die Ziehpunkte, wenn der Benutzer nicht mit der Maus über das Element fährt.FALSCH
stornierenDie Größenänderung bestimmter Elemente wird gestoppt.Eingabe, Textbereich, Schaltfläche, Auswahl, Option
EindämmungEs ändert die Größe des angegebenen Elements innerhalb der Grenzen der Region.FALSCH
VerzögerungEs gibt die Verzögerungszeit in Millisekunden an, wenn die Größenänderung beginnt.0
deaktiviertEs deaktiviert die Größenänderung von Elementen, wenn es auf „true“ gesetzt ist, dh es stoppt die Größenänderung der Elemente.FALSCH
DistanzEs bestimmt die Verschiebung zu Beginn der Größenänderung in Form von Pixeln1
GeistEs handelt sich um ein halbtransparentes Hilfselement, das zur Größenänderung angezeigt wird, wenn es auf „true“ gesetzt ist.FALSCH
NetzEs rastet die Größenänderungselemente im Rastersystem mit x- und y-Pixeln in der Form ein [x,y].FALSCH
GriffeDas Handle, das die Größenänderung von Elementen startet.e, s, se
HelferEs stellt ein Hilfselement für die Größenänderung von Elementen bereit und fügt beim Ziehen des Größenänderungsgriffs ein Proxy-Element hinzu.FALSCH
maximale HöheEs definiert die maximale Höhe, in der die Größe des Elements geändert werden soll.Null
maximale BreiteEs definiert die maximale Breite des Elements, dessen Größe geändert werden soll.Null
minHöheEs definiert die Mindesthöhe, die das Element in der Größe ändern darf.10
MindestbreiteEs definiert die Mindestbreite, die das Element in der Größe ändern darf.10

Das folgende Beispiel demonstriert die Verwendung von animieren, Helfer, Geist Und automatisch ausblenden Optionen in der jQueryUI-Größenänderungsfunktion:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#resizeMe1, #resizeMe2, #resizeMe3{
	width: 150px;
	height:150px;
	padding:0.5em;
	background:orange;
	text-align:center;
	font-weight: bold;
	float:left;
	margin-left: 20px;
	}
	.helper {
	    border: 2px solid green;
        }
</style>
<script type="text/javascript">
      $(function () {
         $('#resizeMe1').resizable({
            animate:true,
            helper: "helper"
         });
         $('#resizeMe2').resizable({
	     ghost:true
         });
         $('#resizeMe3').resizable({
	     autoHide:true
         });
      });
</script>
</head>
<body>
	<div id="resizeMe1">
		This is animate!!!
	</div><br>
	<div id="resizeMe2">
		This is ghost!!!
	</div><br>
	<div id="resizeMe3">
		Hover to see magnification icon at the bottom right corner!!!
	</div>
</body>
</html>
  • Das obige Skript nutzt skalierbare Optionen wie Animate, Helper, Ghost und AutoHide.
  • Die Animationsoption aktiviert die endgültige Größe nach der Größenänderung, wenn die Maustaste losgelassen wird.
  • Die Hilfsoption stellt ein Hilfselement für die Größenänderung von Elementen bereit und fügt beim Ziehen des Größenänderungsgriffs ein Proxy-Element hinzu. Hier gibt das Hilfselement einen grünen Farbrand, während die Größe des Elements geändert wird.
  • Die Ghost-Option zeigt ein halbtransparentes Hilfselement an, das angezeigt wird, während die Größe des Elements geändert wird.
  • Die Option autoHide verbirgt das Symbol, wenn der Benutzer nicht mit der Maus über das Element fährt. Wenn wir mit der Maus über das Element fahren, sehen wir unten in der rechten Ecke das Symbol, über das wir die Größe des Elements ändern können.
  • Alle oben genannten Optionen verwenden unterschiedliche ID-Selektoren innerhalb des div-Elements und stellen mithilfe dieser ID-Selektoren unterschiedliche CSS-Stile bereit, wie im obigen Skript gezeigt.

Demo zu veränderbaren JQuery-Optionen

Beispiel für anpassbare JQueryUI-Optionen

Das folgende Beispiel demonstriert die Verwendung von Eindämmung, minHöhe Und Mindestbreite Optionen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#resizeMe1{
	width: 100px;
	height:100px;
	padding:0.5em;
	background:orange;
	text-align:center;
	font-weight: bold;
	float:left;
	margin-left: 20px;
	}
	#container{
	width:400px;
	height:200px;
	border:2px solid orange;
	float:left;
	padding:0.5em;
	}
</style>
<script type="text/javascript">
      $(function () {
         $('#resizeMe1').resizable({
            containment: "#container",
			  minHeight: 40,
			  minWidth: 70
          });
       });
</script>
</head>
<body>
    <h2>jQueryUI Example using Options</h2>
    <div id="container">
	<div id="resizeMe1">
		Resize within the container!!!
	</div>
   </div>
</body>
</html>
  • Das obige Skript verwendet einige der in der Größe veränderbaren Optionen wie Eindämmung, minHeight und minWidth.
  • Die Einschlussoption, die die Größe des angegebenen Elements innerhalb der Grenzen der Region ändert.
  • Die Optionen minHeight und minWidth definieren die Mindesthöhe und Mindestbreite, die angeben, dass die Größe des Elements mit den angegebenen Werten geändert werden soll.

JQuery-Resizable-Optionen Demo1

Beispiel für anpassbare JQueryUI-Optionen1

Das folgende Beispiel demonstriert die Verwendung von auchGröße ändern Möglichkeit:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#resizeMe1,#resizeMe2{
	width:  100px;
	height: 100px;
	border: 1px solid black;
	text-align: center;
	float: left;
	margin-left: 10px;
        background-color: lightblue;
    }
</style>
<script type="text/javascript">
      $(function (){
         $("#resizeMe1").resizable({
	      alsoResize: "#resizeMe2"
	 });
         $("#resizeMe2").resizable();
      });
</script>
</head>
<body>
    <h2>jQueryUI Example using Options</h2>
	<div id="resizeMe1">
		Resize the element with other element!!!
	</div>
	<div id="resizeMe2">
		Resized!!!!
	</div>
</body>
</html>
  • Das Skript verwendet die Größenänderungsoption alsoResize, die die Größe eines oder mehrerer Elemente synchron mit größenveränderbaren Elementen ändert.
  • Die Funktion verwendet die beiden ID-Selektoren #resizeMe1 und #resizeMe1 innerhalb des div-Elements. Die alsoResize-Optionen ändern die Größe des anderen Elements mithilfe der ID #resizeMe2 und definieren verschiedene CSS-Stile mithilfe dieser beiden IDs, wie im Skript gezeigt.

JQuery-Resizable-Optionen Demo2

Beispiel für anpassbare JQueryUI-Optionen2

Anpassbare Widget-Methoden

Die folgende Tabelle zeigt einige der Methoden, die mit veränderbaren Widgets verwendet werden:

Methodenbeschreibung

zerstören()Dadurch wird die Größenänderungsfunktion entfernt.
deaktivieren()Diese Methode deaktiviert die Größenänderungsaktion.
aktivieren()Diese Methode ermöglicht die Größenänderungsaktion.
Beispiel()Es erstellt das in der Größe veränderbare Instanzobjekt. Wenn keine Instanz vorhanden ist, wird undefiniert zurückgegeben.
Optionen()Es gibt die Optionseigenschaft zurück. Es legt die größenveränderbare Option mit dem angegebenen Optionsnamen fest.
widget()Es definiert ein skalierbares Element mit einem jQuery-Objekt.

Das folgende Beispiel demonstriert die Verwendung von deaktivieren, aktivieren Und zerstören Methoden:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#resizeMe1,#resizeMe2,#resizeMe3{
	width:  200px;
	height: 200px;
	border: 1px solid black;
	text-align: center;
	float: left;
	margin-left: 10px;
    background-color: lightblue;
    }
</style>
<script type="text/javascript">
   $(function(){
	   $("#resizeMe1").resizable();
	   $("#resizeMe1").resizable('disable');
	   $("#resizeMe2").resizable();
	   $("#resizeMe2").resizable('enable');
	   $("#resizeMe3").resizable();
	   $("#resizeMe3").resizable('destroy');
   });
</script>
</head>
<body>
    <h2>jQueryUI Example using Methods</h2>
	<div id="resizeMe1">
		Disabled Element!!!
	</div>
	<div id="resizeMe2">
		Enabled Element!!!!
	</div>
	<div id="resizeMe3">
		Destroyed Element!!!!
	</div>
</body>
</html>
  • Das Skript verwendet einige der in der Größe veränderbaren Methoden wie Deaktivieren, Aktivieren und Zerstören.
  • Die Disable-Methode deaktiviert die Funktionalität eines Elements. Wir können keine Vorgänge für deaktivierte Elemente ausführen.
  • Um das Element zu aktivieren, verwenden Sie die Methode namens „enable“, mit der wir die Größe des Elements ändern können.
  • Die Methode destroy zerstört die skalierbare Funktionalität vollständig. Es ist nicht möglich, Aktionen für das Element auszuführen.

Demo zu veränderbaren JQuery-Methoden

Beispiel für veränderbare JQueryUI-Methoden

Anpassbare Widget-Ereignisse

Die folgende Tabelle zeigt Ereignisse, die mit veränderbaren Widgets verwendet werden:

Eventbeschreibung

create(event, ui)Es wird ausgelöst, wenn ein in der Größe veränderbares Element erstellt wird.
resize(event, ui)Es wird während der Größenänderung ausgelöst, wenn der Größenänderungshandler gezogen wird.
start(event, ui)Es wird ausgelöst, wenn der Größenänderungsvorgang beginnt.
stop(event, ui)Es wird ausgelöst, wenn der Größenänderungsvorgang endet.

Das folgende Beispiel demonstriert die Verwendung von Start, Größe ändern Und stoppen Veranstaltungen:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
	#resizeMe{
	width:  100px;
	height: 100px;
	border: 1px solid black;
	margin-left: 10px;
        background-color: lightblue;
       }
       #resizeMe1{
        color:red;
       }
</style>
<script type="text/javascript">
      $(function (){
         $("#resizeMe").resizable({
            start: function(event, ui){
               $("#resizeMe1").text('Resizing Started');
            },
            resize: function(event, ui){
            },
            stop: function(event, ui){
		$("#resizeMe1").text('Resizing Stopped');
	}
        });
     });
</script>
</head>
<body>
    <h2>jQueryUI Example using Events</h2>
	<div id="resizeMe">
		Resize Me!!!
	</div><br>
	<span id="resizeMe1"></span>
</body>
</html>
  • Das obige Skript nutzt größenveränderbare Ereignisse, nämlich Start-, Größenänderungs- und Stoppereignisse.
  • Das Startereignis wird ausgelöst, wenn der Vorgang zur Größenänderung startet. Wenn der Größenänderungsvorgang beginnt, wird die Textnachricht „‚Größenänderung gestartet‘“ angezeigt.
  • Das Stop-Ereignis wird ausgelöst, wenn der Vorgang zur Größenänderung endet. Wenn der Vorgang beendet ist, wird die Textnachricht als „Resizing Stopped“ angezeigt, wie im obigen Skript angegeben.
  • Das Größenänderungsereignis wird ausgelöst, wenn der Handler des in der Größe veränderbaren Elements gezogen wird.

JQuery-Demo für anpassbare Ereignisse

Beispiel für anpassbare JQueryUI-Ereignisse

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen