在jQuery Ui中显示带有限制和完成值的进度栏

Question

我需要在进度栏中显示进度值和剩余值。

这是我的html内容。

<html>

<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <style>
 .bar {
    width: 100px;
    height: 20px;
    margin: 2px;
    border: 1px solid black;
    background-color: lightgreen;
    text-align: center;
    float: left;
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    border-radius: 3px;
  }

  .list {
    background-color: lightblue;
    border: 1px solid gray;
  }

  .items .ui-selected {
    background: red;
    color: white;
    font-weight: bold;
  }

  .items {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
  }

  .items li {
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    border-radius: 3px;
  }

  .weekday {
    float: left;
  }

  .availablelist {
    background-color: orange;
    display: inline;
  }
   </style>
   </head>

  <body>
   <div style="float:left;width:500px;">
   <div><h2>Total Credits = <span id="total-credits">80</span></h2> </div>
 </div>

<div style="clear:both"></div>
<br>
<div id="timetable" style="float:left;width:700px;">    
  <div class="weekday">
     <ul class="items">
        <li class="list">
        <label class="core-ins-tag-numb">Jhonny</label>
        <input type="hidden" value="15" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Tim</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
       <label class="core-ins-tag-numb">George</label>
        <input type="hidden" value="25" name="credits" class="credits">
        </li>
        <li class="list">
       <label class="core-ins-tag-numb">Melissa</label>
        <input type="hidden" value="20" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Alice</label>
        <input type="hidden" value="5" name="credits" class="credits">
        </li>
    </ul>
</div>
<div class="weekday">
    <ul class="items">
        <li class="list">
        <label class="core-ins-tag-numb">Jhonny</label>
        <input type="hidden" value="20" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Tim</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">George</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Melissa</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
        <li class="list">
        <label class="core-ins-tag-numb">Alice</label>
        <input type="hidden" value="10" name="credits" class="credits">
        </li>
    </ul>
</div>
<br>

 <div id = "progressbar"></div>
 </div>
 <script>
$(function () {
    $("#timetable .items").sortable({
        connectWith: "ul"   
    });        

    /* for progress bar */ 
    var progressbar = $( "#progressbar" );
    $( "#progressbar" ).progressbar({
       value: 0,
       max:300
    });

    function progress() {
       var val = progressbar.progressbar( "value" ) || 0;
       progressbar.progressbar( "value", val + 1 );
       if ( val <= 00 ) {
          setTimeout( progress, 100 );
       }
    }
    setTimeout(progress, 3000);
    /* for progress bar */ 
});

我对每个带李的信用项目有一个隐藏值，因此，每当从右侧拖动任何一个李并将其拖放到左侧时，我都需要对每个左李信用的值求和，并与总信用进行匹配，并显示进度栏，其值如下图所示

此外，如果信用额度超过80，我还需要确保拖动不应该允许，>>

如何完成？

我需要在进度栏中显示进度值和剩余值。这是我的html内容。

Answer 1

jQuery .sortable具有一个称为update的属性。首先，当元素从列表移到另一个时，这是一个事件。您可以在此处添加逻辑。

在jQuery Ui中显示带有限制和完成值的进度栏

问题描述投票：0回答：1

1个回答

最新问题

在jQuery Ui中显示带有限制和完成值的进度栏

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1