jQuery UI Resizable widget()方法

jQuery UI Resizable widget()方法

jQuery UI由GUI部件,视觉效果和使用jQuery,CSS和HTML实现的主题组成。 jQuery UI对于构建网页的UI界面是非常好的。jQuery UI Resizable widget()方法是用来调用widget方法的。这个方法不接受任何参数。

语法:

var widget = $( ".selector" ).resizable( "widget" );

参数:该方法不接受任何参数。

CDN 链接:

<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>

示例:

<!doctype html>  
<html lang="en">  
   <head>  
      <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>  
      <style>  
         h1 {
             color: green;
         }
         .container{
             width: 170;
         }
   
         #right-div{
             float: center;
         }
         #left-div,#right-div 
         { 
             width: 150px; 
             height: 150px;   
             text-align: center; 
             border: 2px solid black;
         }  
      </style>  
      <script>  
         (function() {  
            ( "#right-div" ).resizable();  
            var widget = $( "#right-div" ).resizable('widget');
            console.log(widget)
         });  
      </script>  
   </head>  
    
   <body> 
      <center>
           <h1>GeeksforGeeks</h1>  
           <h3>jQuery UI Resizable widget() Method</h3>
           <div class="container">  
              <div id="right-div">   
                 <h3 class="gfg">I'm widget</h3>  
              </div>
           </div>
      </center>
   </body>  
</html>  
  
  

输出:

  • 具有可调整大小的效果。

jQuery UI Resizable widget()方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程