Javascript 反馈选择器在JQueryUI演示中引用了什么_Javascript_Jquery_Css_Jquery Ui

Javascript 反馈选择器在JQueryUI演示中引用了什么

javascript jquery css jquery-ui

Javascript 反馈选择器在JQueryUI演示中引用了什么,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,我特别关注“可选”演示。以下是示例代码供参考： <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:

我特别关注“可选”演示。以下是示例代码供参考：

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


#反馈{字体大小：1.4em；}
#可选。用户界面选择{背景：#FECA40；}
#可选。ui已选择{背景：#F39814；颜色：白色；}
#可选{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可选li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
$（函数（）{
$（“#可选”）.selective（）；
});
第1项
第2项
第3项
第4项
第5项
第6项
第7项

HTML中没有一个包含“feedback”的id，我试着对

#feedback

样式进行注释，但我看不出有什么区别

谢谢

我认为jqueryui示例css代码的复制粘贴是可选的。仅在第三个示例中需要它，请查看

演示代码：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Selectable - Serialize</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/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({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          var index = $( "#selectable li" ).index( this );
          result.append( " #" + ( index + 1 ) );
        });
      }
    });
  });
  </script>
</head>
<body>

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>

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


</body>
</html>


jQuery UI可选-序列化
#反馈{字体大小：1.4em；}
#可选。用户界面选择{背景：#FECA40；}
#可选。ui已选择{背景：#F39814；颜色：白色；}
#可选{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可选li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
$（函数（）{
$（“#可选”）。可选({
停止：函数（）{
var result=$（“#选择结果”）.empty（）；
$（“.ui已选定”，此）.each（函数（）{
var指数=$（“#可选li”）。指数（本）；
结果。追加（“#”+（索引+1））；
});
}
});
});

您已选择：无。

第1项
第2项
第3项
第4项
第5项
第6项

它只在第三个演示中使用

在serialize演示中，如果选中devtools，您将看到：

<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>


您已选择：无。

链接到有问题的jquery ui文档？我认为这是一个复制粘贴，只有在第三个演示中才需要