nasum/README

## README
jQuery.flickEndlessで時間を指定するピッカーのような物を作った。

http://pochi-tools.com/flickendless.html

## jsdoit.css
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
  font-size: 30px;
  font-family: sans-serif;
  padding : 50px;
}

#result {
    margin-top : 10px;
}

#main {
    position : relative;
    width : 250px;
    height : 100px;
    margin-left: auto;
    margin-right: auto;
    background: -moz-linear-gradient(top, white, darkgray);
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(darkgray));
	background: -o-linear-gradient(top, white, darkgray);
	background: linear-gradient(top, white, darkgray);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
    box-shadow: 0 0 12px rgba(0,0,0,.6);
}

.drum {
    position : relative;
    text-align: center;
    width : 50px;
    height : 99px;
    overflow : auto;
    background: -moz-linear-gradient(top, white, gray);
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));
	background: -o-linear-gradient(top, white, gray);
	background: linear-gradient(top, white, gray);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
    box-shadow: 0 0 12px rgba(0,0,0,.6);
    float :left;
}

.separator{
    top : 30px;
    position : relative;
    text-align: center;
    width : 50px;
    float : left;
}
#drum li{
    height : 30px;
    width : 50px;
}

#select {
    pointer-events: none;
    width : 250px;
    height : 36px;
    top : 32px;
    position : absolute;
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
    box-shadow: 0 0 12px rgba(0,0,0,.6);
}

## jsdoit.html
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="http://jsrun.it/assets/a/t/x/x/atxxX"></script>
    </head>
    <body>
        <div id="main">
            <div class="drum">
                <ul id="hour_ten">
                    <li><div>0</div></li>
                    <li><div>1</div></li>
                    <li><div>2</div></li>
                </ul>
            </div>
            <div class="drum">
                <ul id="hour_one">
                    <li><div>0</div></li>
                    <li><div>1</div></li>
                    <li><div>2</div></li>
                    <li><div>3</div></li>
                    <li><div>4</div></li>
                </ul>
            </div>
            <div class="separator">
                :
            </div>
            <div class="drum">
                <ul id="minutes_ten">
                    <li><div>0</div></li>
                    <li><div>1</div></li>
                    <li><div>2</div></li>
                    <li><div>3</div></li>
                    <li><div>4</div></li>
                    <li><div>5</div></li>
                </ul>
            </div>
            <div class="drum">
                <ul id="minutes_one">
                    <li><div>0</div></li>
                    <li><div>1</div></li>
                    <li><div>2</div></li>
                    <li><div>3</div></li>
                    <li><div>4</div></li>
                    <li><div>5</div></li>
                    <li><div>6</div></li>
                    <li><div>7</div></li>
                    <li><div>8</div></li>
                    <li><div>9</div></li>
                </ul>
            </div>
            <div id="select"></div>
        </div>
        <div id="result">
            設定した時間は<span id="h-ten"></span><span id="h-one"></span>時<span id="m-ten"></span><span id="m-one"></span>分
        </div>
    </body>
</html>

## jsdoit.js
// forked from tomato360's "jQuery.flickEndlessでiPhoneのデータピッカーのような物を作る" http://jsdo.it/tomato360/7sxZ
$('.drum').flickEndless({
    vertical : true,
    onPageChange : function(){
        var current = this.page;
        var targetId = this.target.closest('ul').attr('id');

        if(current == this.count){
            current = 0;
        }

        if(targetId === 'hour_ten'){
            $('#h-ten').text(current);
        } else if(targetId === 'hour_one'){
            $('#h-one').text(current);
        } else if(targetId === 'minutes_ten'){
            $('#m-ten').text(current);
        } else if(targetId === 'minutes_one'){
            $('#m-one').text(current);
        }
    }
});
	jQuery.flickEndlessで時間を指定するピッカーのような物を作った。

	http://pochi-tools.com/flickendless.html
	* {
	margin: 0;
	padding: 0;
	border: 0;
	}

	body {
	background: #ffd;
	font-size: 30px;
	font-family: sans-serif;
	padding : 50px;
	}

	#result {
	margin-top : 10px;
	}

	#main {
	position : relative;
	width : 250px;
	height : 100px;
	margin-left: auto;
	margin-right: auto;
	background: -moz-linear-gradient(top, white, darkgray);
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(darkgray));
	background: -o-linear-gradient(top, white, darkgray);
	background: linear-gradient(top, white, darkgray);
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
	box-shadow: 0 0 12px rgba(0,0,0,.6);
	}

	.drum {
	position : relative;
	text-align: center;
	width : 50px;
	height : 99px;
	overflow : auto;
	background: -moz-linear-gradient(top, white, gray);
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));
	background: -o-linear-gradient(top, white, gray);
	background: linear-gradient(top, white, gray);
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
	box-shadow: 0 0 12px rgba(0,0,0,.6);
	float :left;
	}

	.separator{
	top : 30px;
	position : relative;
	text-align: center;
	width : 50px;
	float : left;
	}
	#drum li{
	height : 30px;
	width : 50px;
	}

	#select {
	pointer-events: none;
	width : 250px;
	height : 36px;
	top : 32px;
	position : absolute;
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
	box-shadow: 0 0 12px rgba(0,0,0,.6);
	}
	<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="http://jsrun.it/assets/a/t/x/x/atxxX"></script>
	</head>
	<body>
	<div id="main">
	<div class="drum">
	<ul id="hour_ten">
	<li><div>0</div></li>
	<li><div>1</div></li>
	<li><div>2</div></li>
	</ul>
	</div>
	<div class="drum">
	<ul id="hour_one">
	<li><div>0</div></li>
	<li><div>1</div></li>
	<li><div>2</div></li>
	<li><div>3</div></li>
	<li><div>4</div></li>
	</ul>
	</div>
	<div class="separator">
	:
	</div>
	<div class="drum">
	<ul id="minutes_ten">
	<li><div>0</div></li>
	<li><div>1</div></li>
	<li><div>2</div></li>
	<li><div>3</div></li>
	<li><div>4</div></li>
	<li><div>5</div></li>
	</ul>
	</div>
	<div class="drum">
	<ul id="minutes_one">
	<li><div>0</div></li>
	<li><div>1</div></li>
	<li><div>2</div></li>
	<li><div>3</div></li>
	<li><div>4</div></li>
	<li><div>5</div></li>
	<li><div>6</div></li>
	<li><div>7</div></li>
	<li><div>8</div></li>
	<li><div>9</div></li>
	</ul>
	</div>
	<div id="select"></div>
	</div>
	<div id="result">
	設定した時間は<span id="h-ten"></span><span id="h-one"></span>時<span id="m-ten"></span><span id="m-one"></span>分
	</div>
	</body>
	</html>
	// forked from tomato360's "jQuery.flickEndlessでiPhoneのデータピッカーのような物を作る" http://jsdo.it/tomato360/7sxZ
	$('.drum').flickEndless({
	vertical : true,
	onPageChange : function(){
	var current = this.page;
	var targetId = this.target.closest('ul').attr('id');

	if(current == this.count){
	current = 0;
	}

	if(targetId === 'hour_ten'){
	$('#h-ten').text(current);
	} else if(targetId === 'hour_one'){
	$('#h-one').text(current);
	} else if(targetId === 'minutes_ten'){
	$('#m-ten').text(current);
	} else if(targetId === 'minutes_one'){
	$('#m-one').text(current);
	}
	}
	});