zoukankan      html  css  js  c++  java
  • jQuery UI组件构成(一)——交互(Interactions)

    jQuery UI 主要分为3个部分:交互、微件和效果库。

    今天跟大家谈一下第1部分:交互(Interactions)

    交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动(Draggable) , 放置(Droppable) , 选择(Selectable) , 排序(Sortable)等。

    1、缩放(Resizable)

    案例代码:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 缩放(Resizable) - 默认功能</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #resizable { width: 150px; height: 150px; padding: 0.5em; }
      #resizable h3 { text-align: center; margin: 0; }
      </style>
      <script>
      $(function() {
        $( "#resizable" ).resizable();
      });
      </script>
    </head>
    <body>
     
    <div id="resizable" class="ui-widget-content">
      <h3 class="ui-widget-header">缩放(Resizable)</h3>
    </div>
     
     
    </body>
    </html>

    2、拖动(Draggable)

    案例代码:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 拖动(Draggable) - 默认功能</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #draggable { width: 150px; height: 150px; padding: 0.5em; }
      </style>
      <script>
      $(function() {
        $( "#draggable" ).draggable();
      });
      </script>
    </head>
    <body>
     
    <div id="draggable" class="ui-widget-content">
      <p>请拖动我!</p>
    </div>
     
     
    </body>
    </html>

    3、放置(Droppable)

    案例代码;

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 放置(Droppable) - 默认功能</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
      #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
      </style>
      <script>
      $(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
          drop: function( event, ui ) {
            $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "Dropped!" );
          }
        });
      });
      </script>
    </head>
    <body>
     
    <div id="draggable" class="ui-widget-content">
      <p>请把我拖拽到目标处!</p>
    </div>
     
    <div id="droppable" class="ui-widget-header">
      <p>请放置在这里!</p>
    </div>
     
     
    </body>
    </html>

    4、选择(Selectable)

     案例代码:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 选择(Selectable) - 默认功能</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
     
      <style>
      #feedback { font-size: 1.4em; }
      #selectable .ui-selecting { background: #FECA40; }
      #selectable .ui-selected { background: #F39814; color: white; }
      #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
      </style>
      <script>
      $(function() {
        $( "#selectable" ).selectable();
      });
      </script>
    </head>
    <body>
     
    <ol id="selectable">
      <li class="ui-widget-content">Item 1</li>
      <li class="ui-widget-content">Item 2</li>
      <li class="ui-widget-content">Item 3</li>
      <li class="ui-widget-content">Item 4</li>
      <li class="ui-widget-content">Item 5</li>
      <li class="ui-widget-content">Item 6</li>
      <li class="ui-widget-content">Item 7</li>
    </ol>
     
     
    </body>
    </html>

    5、排序(Sortable)

    案例代码:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 排序(Sortable) - 默认功能</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable li span { position: absolute; margin-left: -1.3em; }
      </style>
      <script>
      $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
      });
      </script>
    </head>
    <body>
     
    <ul id="sortable">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>
     
     
    </body>
    </html>
  • 相关阅读:
    .NET泛型中的协变与逆变
    使用 Roslyn引擎动态编译代码
    Windows 自动更新服务恢复
    She Left Her Shoes
    .NET Core 配置
    EFCore中SQLSERVER 2008 的分页问题
    SQL SERVER 2012/ 2014 分页,用 OFFSET,FETCH NEXT改写ROW_NUMBER的用法(转)
    TFS命令行操作
    负载均衡(Load Balancing)学习笔记(三)
    负载均衡(Load Balancing)学习笔记(二)
  • 原文地址:https://www.cnblogs.com/hjcblog/p/8676797.html
Copyright © 2011-2022 走看看