如何创建javascipt的/ HTML5微调列表与图片？ [英] How to create Javascipt/HTML5 Spinner List with images?

问题描述

目标：创建使用图像（而不是文本），以便用户可以输入体重和身高的一个JavaScript / HTML5微调列表。 （例如图像/资产下文）。

环境/应用：是科尔多瓦/离子来构建移动应用程序。只支持iOS的（WebKit的CSS）。

有没有在那里，让我实现这一目标的任何组件？

图片：

解决方案

这可能给你的是如何可能实现一些微调的想法。经测试使用Opera，Firefox和Android版Chrome。

\r

\r

VAR NUM_HEIGHT = 55;\r
VAR Y_OFFSET = 50;\r
VAR SPINNER_HEIGHT = 150;\r
\r
变种targetPosition = 0;\r
变种currentPosition = 0;\r
变种DELTAY = 0;\r
\r
功能targetReached（）{\r
  DELTAY = 0;\r
  currentPosition = targetPosition;\r
  。的document.getElementById（值）的innerHTML =值：+ currentPosition;\r
}\r
\r
功能移动（）{\r
  VAR yPosition = -currentPosition * NUM_HEIGHT + DELTAY + Y_OFFSET;\r
  。的document.getElementById（数字）style.backgroundPosition =0像素+ yPosition +PX\r
\r
  如果（targetPosition＆GT; currentPosition）{\r
    如果（DELTAY＆GT; -NUM_HEIGHT）{\r
      DELTAY = DELTAY - 5;\r
      的setTimeout（移动，10）;\r
    }其他{\r
      targetReached（）;\r
    }\r
  }否则如果（targetPosition＆LT; currentPosition）{\r
    如果（DELTAY＆LT; NUM_HEIGHT）{\r
      DELTAY = DELTAY + 5;\r
      的setTimeout（移动，10）;\r
    }其他{\r
      targetReached（）;\r
    }\r
  }\r
}\r
移动（）;\r
\r
\r
\r
\r
功能getClickPosition（五）{\r
  //点​​击位置的处理。\r
  // xPosition位置和yPosition是相对于元素的边界。\r
  //来源：http://www.kirupa.com/html5/getting_mouse_click_position.htm\r
  VAR parentPosition =为getPosition（e.currentTarget）;\r
  VAR xPosition位置= e.clientX - parentPosition.x;\r
  VAR yPosition = e.clientY - parentPosition.y;\r
\r
  如果（yPosition＆GT; SPINNER_HEIGHT / 2和;＆放大器;！currentPosition = 10）{\r
    targetPosition = currentPosition + 1;\r
  }否则如果（yPosition＆下; SPINNER_HEIGHT / 2和;＆放大器;！currentPosition = 0）{\r
    targetPosition = currentPosition - 1;\r
  }\r
  移动（）;\r
}\r
\r
功能为getPosition（元素）{\r
  //辅助功能\r
  //来源：http://www.kirupa.com/html5/getting_mouse_click_position.htm\r
  变种xPosition位置= 0;\r
  变种yPosition = 0;\r
  而（元素）{\r
    xPosition位置+ =（element.offsetLeft - element.scrollLeft + element.clientLeft）;\r
    yPosition + =（element.offsetTop - element.scrollTop + element.clientTop）;\r
    元素= element.offsetParent;\r
  }\r
  返回{\r
    X：xPosition位置，\r
    Y：yPosition\r
  };\r
}\r
\r
//的document.getElementById（数字）的addEventListener（点击，getClickPosition，假的）。\r
的document.getElementById（数字）的addEventListener（鼠标按下getClickPosition，FALSE）;

\r

#spinner {\r
  背景：网址（http://i.stack.imgur.com/0Fc85m.png）;\r
  背景尺寸：100％100％;\r
  背景重复：不重复;\r
  高度：150像素;\r
  宽度：300像素;\r
}\r
#NUMBER {\r
  背景：网址（http://i.stack.imgur.com/c0ufam.png）;\r
  背景重复：不重复;\r
  背景尺寸：100％600px的;\r
  高度：150像素;\r
  宽度：50像素;\r
  保证金左：20像素;\r
}

\r

＆LT; D​​IV ID =微调＆GT;\r
  ＆LT; D​​IV ID =号＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; BR /＆GT;\r
＆LT; D​​IV ID =值＆GT;值：0℃; / DIV＆GT;

\r

\r

\r

Objective: Create a Javascript/HTML5 spinner list using images (not text) so user may enter weight and height. (example images/assets are below).

Environment/Application: Using Cordova/Ionic to build mobile application. Only supporting iOS (webkit css).

Are there any components out there that allow me to achieve this?

Images:

解决方案

This might give you some an idea of how it is possible to implement a spinner. Tested with Opera, Firefox and Chrome for Android.

var NUM_HEIGHT = 55;
var Y_OFFSET = 50;
var SPINNER_HEIGHT = 150;

var targetPosition = 0;
var currentPosition = 0;
var deltaY = 0;

function targetReached() {
  deltaY = 0;
  currentPosition = targetPosition;
  document.getElementById("value").innerHTML = "Value: " + currentPosition;
}

function move() {
  var yPosition = -currentPosition * NUM_HEIGHT + deltaY + Y_OFFSET;
  document.getElementById("number").style.backgroundPosition = "0px " + yPosition + "px";

  if (targetPosition > currentPosition) {
    if (deltaY > -NUM_HEIGHT) {
      deltaY = deltaY - 5;
      setTimeout(move, 10);
    } else {
      targetReached();
    }
  } else if (targetPosition < currentPosition) {
    if (deltaY < NUM_HEIGHT) {
      deltaY = deltaY + 5;
      setTimeout(move, 10);
    } else {
      targetReached();
    }
  }
}
move();




function getClickPosition(e) {
  // Click position handling.
  // xPosition and yPosition are relative to element bounds.
  // Source: http://www.kirupa.com/html5/getting_mouse_click_position.htm
  var parentPosition = getPosition(e.currentTarget);
  var xPosition = e.clientX - parentPosition.x;
  var yPosition = e.clientY - parentPosition.y;

  if (yPosition > SPINNER_HEIGHT / 2 && currentPosition != 10) {
    targetPosition = currentPosition + 1;
  } else if (yPosition < SPINNER_HEIGHT / 2 && currentPosition != 0) {
    targetPosition = currentPosition - 1;
  }
  move();
}

function getPosition(element) {
  // Helper function
  // Source: http://www.kirupa.com/html5/getting_mouse_click_position.htm
  var xPosition = 0;
  var yPosition = 0;
  while (element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

// document.getElementById("number").addEventListener("click", getClickPosition, false);
document.getElementById("number").addEventListener("mousedown", getClickPosition, false);

#spinner {
  background: url(http://i.stack.imgur.com/0Fc85m.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 150px;
  width: 300px;
}
#number {
  background: url(http://i.stack.imgur.com/c0ufam.png);
  background-repeat: no-repeat;
  background-size: 100% 600px;
  height: 150px;
  width: 50px;
  margin-left: 20px;
}

<div id="spinner">
  <div id="number">
  </div>
</div>
<br />
<div id="value">Value: 0</div>

这篇关于如何创建javascipt的/ HTML5微调列表与图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！