jQuery---jquery.ui實作新聞模塊-有解無憂

jquery.ui實作新聞模塊

jquery也有ui，了解即可，用的不多，類似element ui 和bootstrap

JQuery UI API:

jquery.ui實作新聞模塊

draggale拖動，并用屬性handle，指定下拖動手柄

    $(".drag-wrapper").draggable({
      handle:".drag-bar"
    });

見說明書：

sortable排序, 并指定元素的透明度，（就是排序選中的那個元素透明度會改變）

    $(".sort-item").sortable({
      opacity:0.3
    });

見說明書

同理，resizable, 縮放，定義下該元素的縮放方向

    $(".resize-item").resizable({
      handles:"s"
    });

完整代碼

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="jquery-ui.css">
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    .drag-wrapper {
      width: 400px;
      margin: 50px auto 0;
      /*border: 10px solid #000;*/
    }
    
    .drag-bar {
      height: 40px;
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      text-align: center;
      background-color: #E6E6E6;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      cursor: move;
    }
    
    .resize-item {
      height: 212px;
      border: 1px solid #e6e6e6;
    }
    
    .sort-wrapper {
      height: 100%;
      overflow: hidden;
    }
    
    .sort-item {
      list-style: none;
      padding-top: 10px;
    }
    
    .sort-item li {
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      cursor: pointer;
    }
    
    .sort-item li:hover {
      background-color: #e6e6e6;
    }
  </style>



</head>

<body>
<div class="drag-wrapper">
  <div class="drag-bar">可拖動、排序、變形的新聞模塊</div>
  <div class="resize-item">
    <div class="sort-wrapper">
      <ul class="sort-item">
        <li>這是第1條新聞!</li>
        <li>這是第2條新聞!</li>
        <li>這是第3條新聞!</li>
        <li>這是第4條新聞!</li>
        <li>這是第5條新聞!</li>
        <li>這是第6條新聞!</li>
        <li>這是第7條新聞!</li>
        <li>這是第8條新聞!</li>
        <li>這是第9條新聞!</li>
        <li>這是第10條新聞!</li>
      </ul>
    </div>
  </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>


<script>
  $(function () {
  
    $(".drag-wrapper").draggable({
      handle:".drag-bar"
    });
  
    
    $(".sort-item").sortable({
      opacity:0.3
    });
    
    
    $(".resize-item").resizable({
      handles:"s"
    });
  });
</script>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/11153.html

標籤：jQuery

上一篇：jQuery---jquery.color.js和jquery.lazyload.js的使用

下一篇：安卓手機微信自帶瀏覽器點擊事件失效解決