如何将此功能实现到我的索引.html

How to implement this to my index.html?

本文关键字：我的 索引 html 实现 功能      更新时间：2023-09-26

我想 http://rvera.github.io/image-picker/实现此功能，并将我的互联网商店与购买商品联系起来，因此您选择项目（在图像上）并选择保存到变量，该变量表示支持付款用户想要支付给我多少钱。问题是我不知道该怎么做。我从内部链接了js，css，但在源代码中有一些文件带有咖啡和时髦等文件夹。有什么想法吗？:)我没有Javascript和jQuery的经验，我只想:)做这个功能。

这是某个文件索引.html

<html>
<head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>

<!-- scripts for imagepicker -->
    <link rel="stylesheet" href="css/image-picker.css">
    <script type="text/javascript" src="js/image-picker.js"></script>
    <script type="text/javascript" src="ja/image-picker.min.js"></script>
<!--code for imagepicker-->
<select multiple="multiple" class="image-picker show-html">
  <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
  <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
  <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
  <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
</head>
<body><script>
$("select").imagepicker()
</script>
    <select class="image-picker show-html">
      <option value=""></option>
      <option data-img-src="image-path goes here" value="1">Image 1</option>
      <option data-img-src="image-path goes here" value="2">Image 2</option>
    </select></body>

</html>

一旦，您已经下载了文件并添加到项目中。在您的 HTML 页面上添加以下内容：

编辑：我想这应该对你有用

<html>
<head>

        <!-- scripts for imagepicker -->
            <link rel="stylesheet" href="css/image-picker.css">
            <script type="text/javascript" src="js/image-picker.js"></script>
            <script type="text/javascript" src="js/image-picker.min.js"></script>

        <script type="text/javascript">
        $("select").imagepicker();
        </script>
</head>
    <body>
    <!--code for imagepicker-->
        <select multiple="multiple" class="image-picker show-html">
          <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
          <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
          <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
          <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
        </select>
            <select class="image-picker show-html">
              <option value=""></option>
              <option data-img-src="image-path goes here" value="1">Image 1</option>
              <option data-img-src="image-path goes here" value="2">Image 2</option>
            </select>
    </body>
</html>

如果您更喜欢使用咖啡文件夹，则需要先安装 CoffeeScript 才能使用此 http://rvera.github.io/image-picker/。

在 ubuntu 机器上，您可以使用以下命令

sudo npm install -g coffee-script

并且比您从此处下载的脚本 - http://rvera.github.io/image-picker/执行以下操作：

a. 创建名为"img"的文件夹和一些名称为 - 01.jpg、02.jpg、03.jpg、04.jpg 的图像。授予完全权限。

b. 创建一个文件图像选取器.html。此文件应放置在目录"图像选取器"之外，并在该文件中复制以下代码。

c. 在浏览器中运行 HTML 文件。

<link rel="stylesheet" type="text/css" href="image-picker/image-picker.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="image-picker/image-picker.js" type="text/javascript"></script>    
<div class="picker"> 
<select multiple="multiple" class='image-picker show-html'>
<option data-img-src='img/01.jpg' value='1'>  Page 1  </option>
<option data-img-src='img/02.jpg' value='2'>  Page 2  </option>
<option data-img-src='img/03.jpg' value='3'>  Page 3  </option>
<option data-img-src='img/04.jpg' value='4'>  Page 4  </option>
</select>
</div>
<ul class="thumbnails image_picker_selector" style="display: none">
<li><div class="thumbnail"><img class="image_picker_image" src="img/01.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/02.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/03.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/04.jpg"></div></li>
</ul>
<script type="text/javascript">
jQuery("select.image-picker").imagepicker({
  hide_select:  false,
});
jQuery("select.image-picker.show-labels").imagepicker({
  hide_select:  false,
  show_label:   true,
});
jQuery("select.image-picker.limit_callback").imagepicker({ 
  limit_reached:  function(){alert('We are full!')},
  hide_select:    false
}); 
//Return total amount on click of options in drop down. considering $50 for each item
$('.image-picker').click(function(){ 
   var amount = 0; 
   $('.image-picker option:selected').each(function()
   { 
     amount = amount + 50; 
  }); 
  alert("Final Amount - "+amount);
 });

相关文章：