القائمة الرئيسية

الصفحات

 jQuery - Interaction Resize-able


Description

The Resize able function can be used with interactions in JqueryUI. This function can be enabled Resize able functionality on any DOM element.With the cursor grab the right or bottom border and drag to the desired width or height.

يمكن استخدام وظيفة "تغيير الحجم" مع التفاعلات في JqueryUI. يمكن تمكين هذه الوظيفة تغيير حجم وظيفة قادرة على أي عنصر DOM. باستخدام المؤشر ، امسك الحد الأيمن أو السفلي واسحب إلى العرض أو الارتفاع المطلوب.

Syntax

Here is the simple syntax to use drag-able −

$( "#resizable" ).resizable();

Example

Following is a simple example showing the usage of Resize-able −


<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link 
         href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
      </script>
		
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
			
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
			
         #resizable-14{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
		
      <!-- Javascript -->
		
      <script>
         $(function() {
			
            $( "#resizable-14" ).resizable({
				
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },

               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
				
         });
      </script>
   </head>
	
   <body>
	
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
		
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>
هل اعجبك الموضوع :

تعليقات