jquery 筆記

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

jquery 旋轉

Post by ejsoon » 2017 Jun 22, 19:07


ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

TouchSwipe一個比較強大的手機滑動控制插件

Post by ejsoon » 2017 Aug 03, 16:14

TouchSwipe-Jquery-Plugin-master在此處下載
官方文檔在

兩天製作一個滑動菜單:touchWipe做了一個function,以此方便建立調用各種菜單。(突然想到如果是聯動菜單,還要想點辦法)
js:

Code: Select all

function scroll_selection(handler, index, fontsize = 20) {
	//init
	var handler_item = $(handler).children();
	var parent_height = $(handler).parent().height();
	var handler_top =  -index * parent_height;
	var end_duration = 300;
	handler_item.css('fontSize', fontsize - 10).css('opacity', 0.25);
	handler_item.eq(index).css('fontSize', fontsize).css('opacity', 1);
	handler_item.eq(index - 1).css('fontSize', fontsize - 5).css('opacity', 0.5);
	handler_item.eq(index + 1).css('fontSize', fontsize - 5).css('opacity', 0.5);
	$(handler).css('top', handler_top);

	//bind swipe
	$(handler).swipe( {
		threshold:null,
		swipeStatus: function (event, phase, direction, distance) {
			//current status
			var current_top = parseInt($(this).css('top'));
			var current_index = Math.round(-current_top / parent_height);
			var current_direction = (direction == 'up' ? -1 : 1);
			$(this).css('top', (handler_top + current_direction * parseInt(distance)));

			//change font and opacity
			var current_font_eq = Math.floor(-current_top / parent_height);
			var current_font_size_above = current_top % parent_height / 10 + fontsize;
			var current_font_size_below = -current_top % parent_height / 10 + fontsize - 5;
			var current_opacity_above = 1 + current_top % parent_height / 100;
			var current_opacity_below = 0.5 - current_top % parent_height / 100;

			handler_item.eq(current_font_eq).css('fontSize', current_font_size_above).css('opacity', current_opacity_above);
			handler_item.eq(current_font_eq + 1).css('fontSize', current_font_size_below).css('opacity', current_opacity_below);
			handler_item.eq(current_font_eq - 1).css('fontSize', current_font_size_above - 5).css('opacity', current_opacity_above * 0.5);
			handler_item.eq(current_font_eq + 2).css('fontSize', current_font_size_below - 5).css('opacity', current_opacity_below * 0.5);

			//end
			if (phase=="end") {
				//when over area
				var count_children = $(this).children().length;
				if (current_index < 0) {
					current_index = 0;
				} else if (current_index >= count_children) {
					current_index = count_children - 1;
				}

				//ending animation
				handler_item.eq(current_index - 1).animate({fontSize: fontsize - 5, opacity:0.5}, end_duration);
				handler_item.eq(current_index + 1).animate({fontSize: fontsize - 5, opacity:0.5}, end_duration);
				handler_item.eq(current_index).animate({fontSize: fontsize, opacity:1}, end_duration);
				handler_item.eq(current_index - 2).animate({fontSize: fontsize - 10, opacity:0.25}, end_duration);
				handler_item.eq(current_index + 2).animate({fontSize: fontsize - 10, opacity:0.25}, end_duration);
				$(this).animate({top: -current_index * parent_height}, end_duration, function(){
					handler_top = -current_index * parent_height;
				});
			}
		}
	})
}
css:

Code: Select all

.iscroll_outer {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100px;
    height: 50px;
}
.iscroll_inner {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.iscroll_item {
    height: 30px;
    padding: 10px 0;
}
.iscroll_outer_border {
    position: absolute;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 100%;
    height: 50px;
    bottom: 100px;
}
html:

Code: Select all

	<div class="iscroll_outer_border"></div>
	<div class="iscroll_outer">
	<div class="iscroll_inner" style="top: -150px;">
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">0 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">1 分</div>
		<div class="iscroll_item" style="font-size: 15px; opacity: 0.5;">2 分</div>
		<div class="iscroll_item" style="font-size: 20px; opacity: 1;">3 分</div>
		<div class="iscroll_item" style="font-size: 15px; opacity: 0.5;">4 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">5 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">6 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">7 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">8 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">9 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">10 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">11 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">12 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">13 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">14 分</div>
		<div class="iscroll_item" style="font-size: 10px; opacity: 0.25;">15 分</div>
	</div>
</div>

ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

第四和第五個隱藏

Post by ejsoon » 2017 Oct 25, 13:41

$(this).find('.csi_star').filter(function(idx){return idx > 2;}).css('display', 'none');

ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

jquery ajax upload

Post by ejsoon » 2017 Oct 27, 09:50

from:
here

html:

Code: Select all

<form action="myUpload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="hidden" id="token" name="token" value="1234567890">
    <input type="file" id="file" name="file">
    <input type="input" id="folder" name="folder" value="xunxiuli">
    <input type="button" value="oos" id="oos">
	<progress></progress>
</form>
jquery:

Code: Select all

	$('#oos').on('click', function() {
		alert ('#oos is clicked');
		$.ajax({
			// Your server script to process the upload
			url: "https://qcht.qchouses.com/plazz/api/file/commonUploadFile",
			type: 'POST',

			// Form data
			data: new FormData($('form')[0]),

			// Tell jQuery not to process data or worry about content-type
			// You *must* include these options!
			cache: false,
			contentType: false,
			processData: false,

			// Custom XMLHttpRequest
			xhr: function() {
				var myXhr = $.ajaxSettings.xhr();
				if (myXhr.upload) {
					// For handling the progress of the upload
					myXhr.upload.addEventListener('progress', function(e) {
						if (e.lengthComputable) {
							$('progress').attr({
								value: e.loaded,
								max: e.total,
							});
						}
					} , false);
				}
				return myXhr;
			},
			success: function(data) {
				console.log(JSON.stringify(data));
				alert(JSON.stringify(data));
			},
		});
	});


ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

Re: TouchSwipe一個比較強大的手機滑動控制插件

Post by ejsoon » 2017 Nov 10, 09:44

ejsoon wrote:
2017 Aug 03, 16:14
TouchSwipe-Jquery-Plugin-master在此處下載
官方文檔在

兩天製作一個滑動菜單:touchWipe做了一個function,以此方便建立調用各種菜單。(突然想到如果是聯動菜單,還要想點辦法)
更完整的代碼在此:
html:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
	<link rel="stylesheet" href="css/washmachine.css">
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.touchSwipe.min.js"></script>
	<script src="js/scroll_selection.js"></script>
	<!-- <script src="js/iscroll-probe.js"></script> -->
	<script src="js/washmachine.js"></script>
	<title>洗头机</title>
</head>
<body>
	<div class="whole_content cab">
		<img class="bg" src="img/bg.png" alt="bg">
		<div class="temperature">
			<img class="temperature_img" src="img/temperature.png" alt="temperature">
			<div class="temperature_content">
				<div class="vm"></div>
				<div class="temperature_inner">
					<div class="temperature_main">
						<span class="temperature_num">23</span>
						<span class="temperature_unit">°C</span>
					</div>
					<div class="temperature_note">当前水温</div>
				</div>
			</div>
		</div>
		<div class="function">
			<div class="timeline">
				<div class="timeline_main ibns">
					<div class="timeline_logo">
						<img class="timeline_logo_img" src="img/time_logo.png" alt="time_logo">
					</div>
					<div class="timeline_percent"><div class="timeline_go"><div class="timeline_needle"></div><div class="timeline_pointer"><div class="timeline_pointer_num"><span class="timeline_pointer_time">20</span><span class="timeline_pointer_unit">min</span></div><!-- <div class="timeline_pointer_text">已耗时间</div> --></div></div></div>
				</div>
				<div class="timeline_text cab">
					<div class="timeline_start">
						<div class="timeline_start_num">10:00</div>
						<div class="timeline_start_text">开始时间</div>
					</div>
					<div class="timeline_end">
						<div class="timeline_end_num">10:30</div>
						<div class="timeline_end_text">结束时间</div>
					</div>
				</div>
			</div>
			<div class="bottom">
				<div class="buttons">
					<div class="button">
						<div class="button_text_outer">
							<div class="button_text">
								<img class="button_text_bg" src="img/tip.png" alt="tip">
								<div class="button_text_main">长发</div>
							</div>
						</div>
						<img class="button_img" src="img/button_mode.png" alt="button_mode">
					</div>
					<div id="button_time" class="button">
						<div class="button_text_outer">
							<div class="button_text">
								<img class="button_text_bg" src="img/tip.png" alt="tip">
								<div class="button_text_main">长发</div>
							</div>
						</div>
						<img class="button_img" src="img/button_time.png" alt="button_time">
					</div>
					<div id="button_head" class="button">
						<div class="button_text_outer">
							<div class="button_text">
								<img class="button_text_bg" src="img/tip.png" alt="tip">
								<div class="button_text_main">长发</div>
							</div>
						</div>
						<img class="button_img" src="img/button_head.png" alt="button_head">
					</div>
					<div class="button">
						<div class="button_text_outer">
							<div class="button_text">
								<img class="button_text_bg" src="img/tip.png" alt="tip">
								<div class="button_text_main">长发</div>
							</div>
						</div>
						<img class="button_img" src="img/button_shampoo.png" alt="button_shampoo">
					</div>
					<div class="button">
						<div class="button_text_outer">
							<div class="button_text">
								<img class="button_text_bg" src="img/tip.png" alt="tip">
								<div class="button_text_main">长发</div>
							</div>
						</div>
						<img class="button_img" src="img/button_hcdtn.png" alt="button_hcdtn">
					</div>
					<div class="button">
						<div class="button_text_outer">
							<div class="button_text">
								<img class="button_text_bg" src="img/tip.png" alt="tip">
								<div class="button_text_main">长发</div>
							</div>
						</div>
						<img class="button_img" src="img/button_press.png" alt="button_press">
					</div>
				</div>
				<div class="control">
					<div class="vm"></div>
					<div class="shutdown">
						<img class="shutdown_img" src="img/shutdown.png" alt="shutdown">
					</div>
					<div class="playback">
						<img class="start" src="img/start.png" alt="start">
						<img class="stop" src="img/stop.png" alt="stop">
					</div>
				</div>
			</div>
		</div>
		<div class="iscroll_window_mask"></div>
		<div class="iscroll_window">
			<div class="iscroll_main">
				<div class="iscroll_outer_border"></div>
				<div class="iscroll_outer_left">
					<div class="iscroll_inner_left">
						<div class="iscroll_item_left">0 分</div>
						<div class="iscroll_item_left">1 分</div>
						<div class="iscroll_item_left">2 分</div>
						<div class="iscroll_item_left">3 分</div>
						<div class="iscroll_item_left">4 分</div>
						<div class="iscroll_item_left">5 分</div>
						<div class="iscroll_item_left">6 分</div>
						<div class="iscroll_item_left">7 分</div>
						<div class="iscroll_item_left">8 分</div>
						<div class="iscroll_item_left">9 分</div>
						<div class="iscroll_item_left">10 分</div>
						<div class="iscroll_item_left">11 分</div>
						<div class="iscroll_item_left">12 分</div>
						<div class="iscroll_item_left">13 分</div>
						<div class="iscroll_item_left">14 分</div>
						<div class="iscroll_item_left">15 分</div>
					</div>
				</div>
				<div class="iscroll_outer_right">
					<div class="iscroll_inner_right">
						<div class="iscroll_item_right">0 秒</div>
						<div class="iscroll_item_right">1 秒</div>
						<div class="iscroll_item_right">2 秒</div>
						<div class="iscroll_item_right">3 秒</div>
						<div class="iscroll_item_right">4 秒</div>
						<div class="iscroll_item_right">5 秒</div>
						<div class="iscroll_item_right">6 秒</div>
						<div class="iscroll_item_right">7 秒</div>
						<div class="iscroll_item_right">8 秒</div>
						<div class="iscroll_item_right">9 秒</div>
						<div class="iscroll_item_right">10 秒</div>
						<div class="iscroll_item_right">11 秒</div>
						<div class="iscroll_item_right">12 秒</div>
						<div class="iscroll_item_right">13 秒</div>
						<div class="iscroll_item_right">14 秒</div>
						<div class="iscroll_item_right">15 秒</div>
						<div class="iscroll_item_right">16 秒</div>
						<div class="iscroll_item_right">17 秒</div>
						<div class="iscroll_item_right">18 秒</div>
						<div class="iscroll_item_right">19 秒</div>
						<div class="iscroll_item_right">20 秒</div>
						<div class="iscroll_item_right">21 秒</div>
						<div class="iscroll_item_right">22 秒</div>
						<div class="iscroll_item_right">23 秒</div>
						<div class="iscroll_item_right">24 秒</div>
						<div class="iscroll_item_right">25 秒</div>
						<div class="iscroll_item_right">26 秒</div>
						<div class="iscroll_item_right">27 秒</div>
						<div class="iscroll_item_right">28 秒</div>
						<div class="iscroll_item_right">29 秒</div>
						<div class="iscroll_item_right">30 秒</div>
						<div class="iscroll_item_right">31 秒</div>
						<div class="iscroll_item_right">32 秒</div>
						<div class="iscroll_item_right">33 秒</div>
						<div class="iscroll_item_right">34 秒</div>
						<div class="iscroll_item_right">35 秒</div>
						<div class="iscroll_item_right">36 秒</div>
						<div class="iscroll_item_right">37 秒</div>
						<div class="iscroll_item_right">38 秒</div>
						<div class="iscroll_item_right">39 秒</div>
						<div class="iscroll_item_right">40 秒</div>
						<div class="iscroll_item_right">41 秒</div>
						<div class="iscroll_item_right">42 秒</div>
						<div class="iscroll_item_right">43 秒</div>
						<div class="iscroll_item_right">44 秒</div>
						<div class="iscroll_item_right">45 秒</div>
						<div class="iscroll_item_right">46 秒</div>
						<div class="iscroll_item_right">47 秒</div>
						<div class="iscroll_item_right">48 秒</div>
						<div class="iscroll_item_right">49 秒</div>
						<div class="iscroll_item_right">50 秒</div>
						<div class="iscroll_item_right">51 秒</div>
						<div class="iscroll_item_right">52 秒</div>
						<div class="iscroll_item_right">53 秒</div>
						<div class="iscroll_item_right">54 秒</div>
						<div class="iscroll_item_right">55 秒</div>
						<div class="iscroll_item_right">56 秒</div>
						<div class="iscroll_item_right">57 秒</div>
						<div class="iscroll_item_right">58 秒</div>
						<div class="iscroll_item_right">59 秒</div>
					</div>
				</div>
				<!-- <div class="iscroll_main_mask_top"></div> -->
				<!-- <div class="iscroll_main_mask_bottom"></div> -->
			</div>
			<div class="iscroll_control">
				<div class="iscroll_cancel">取消</div>
				<div class="iscroll_submit">确定</div>
			</div>
		</div>
		<div class="select_window_mask"></div>
		<div class="select_window">
			<div class="select_main">
				<div id="select_item1" class="select_item">长发</div>
				<div id="select_item2" class="select_item select_item_active">短发</div>
				<div id="select_item3" class="select_item">自动</div>
			</div>
			<div class="select_control">
				<div class="select_cancel">取消</div>
				<div class="select_submit">确定</div>
			</div>
		</div>
	</div>
</body>
</html>
css:

Code: Select all

html,body {margin: 0;padding: 0;width: 100%;height: 100%;}
.ibns {font-size:0;}
.ibns>*, body {font-size: 16px;}
a {color: black;text-decoration: none;}
a:hover {text-decoration:underline;}
a img {border:none;}
li {list-style: none;}
.cf{
	height: 1px;
	margin-top:-1px;
	clear:both;
	width: 100%;
}
.cab:after, .cab:before{
	content:"";
	clear:both;
	display:table;
}
.vm {
	width: 0;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.nw {
	white-space: nowrap;
	text-overflow: ellipsis;
}
.nw>* {
	white-space: normal;
}
.whole_content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #0c89ed;
    overflow: hidden;
}
.bg {
    position: absolute;
    top: -5%;
    left: 0;
    width: 100%;
    max-height: 100%;
}
.temperature {
    position: absolute;
    /* display: inline-block; */
    width: 44%;
    top: 7%;
    /* max-width: 147px; */
    left: 28%;
}
.temperature_img {
    width: 100%;
}
.temperature_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.temperature_inner {
    display: inline-block;
    vertical-align: middle;
}
.temperature_main {
    color: #00a0e9;
}
.temperature_num {
    font-size: 50px;
}
.temperature_unit {
    font-size: 27px;
}
.temperature_note {
    background: #00a0e9;
    color: white;
    border-radius: 15px;
    padding: 3px 0;
    font-size: 14px;
    margin-top: 3%;
}
.function {
    position: absolute;
    /* height: 57%; */
    /* background: rebeccapurple; */
    bottom: 0;
    width: 100%;
    padding-bottom: 3%;
    text-align: center;
     */
    display:;
}
.timeline {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 355px;
}
.timeline_main {
    text-align: left;
    position: relative;
}
.timeline_logo {
    width: 5%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3%;
    font-size: 0;
}
.timeline_logo_img {
    width: 100%;
}
.timeline_percent {
    height: 4px;
    background: rgba(255,255,255,0.5);
    width: 81%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4%;
    position: relative;
    border-radius: 2px;
}
.timeline_go {
    position: absolute;
    height: 100%;
    width: 20%;
    background: white;
    border-radius: 2px;
}
.timeline_needle {
    position: absolute;
    right: -5px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid white;
}
.timeline_text {
    position: relative;
    color: white;
    font-size: 12px;
    margin-top: 3px;
}
.timeline_pointer {
    position: absolute;
    top: -33px;
    right: -23px;
    color: white;
}
.timeline_pointer_num {
}
.timeline_pointer_time {
}
.timeline_pointer_unit {}
.timeline_pointer_text {}
.timeline_start {
    float: left;
    margin-left: 6%;
}
.timeline_start_num {
    font-size: 18px;
}
.timeline_start_text {}
.timeline_end {
    float: right;
    margin-right: 3%;
}
.timeline_end_num {
    font-size: 18px;
}
.timeline_end_text {}
.bottom {
    background: rgba(255,255,255,0.4);
    margin: 3% 5% 1%;
    /* max-height: 320px; */
    display: inline-block;
    position: relative;
    max-width: 300px;
    padding-bottom: 3%;
}
.buttons {
    /* max-width: 320px; */
}
.button:nth-child(3n+2) {
    margin-left: 11%;
    margin-right: 11%;
}
.button {
    width: 21%;
    display: inline-block;
    margin: 3% 2% 0;
}
.button_text_outer {}
.button_text {
    position: relative;
}
.button_text_bg {
    width: 67%;
}
.button_text_main {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    font-size: 12px;
}
.button_img {
    width: 100%;
}
.control {
    background: #1190ee;
    width: 98%;
    /* height: 15%; */
    position: relative;
    margin-left: 1%;
    border-radius: 25px;
    margin-top: 3%;
    padding: 2% 0;
}
.shutdown {
    display: inline-block;
    width: 8%;
    height: 60%;
    vertical-align: middle;
    margin-right: 48%;
}
.shutdown_img {
    width: 100%;
    height: 100%;
}
.playback {
    display: inline-block;
    width: 5%;
    height: 56%;
    vertical-align: middle;
}
.start {
    width: 100%;
    height: 100%;
    /* display: none; */
}
.stop {
    width: 65%;
    height: 80%;
    margin-top: 10%;
    display: none;
}
.iscroll_window_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
}
.iscroll_window {
    display: none;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}
.iscroll_main {
    background: white;
    height: 255px;
    position: relative;
    overflow: hidden;
}
.iscroll_main_mask_top {
    background: -webkit-linear-gradient(white, rgba(255,255,255,0.7), transparent);
    background: -o-linear-gradient(white, rgba(255,255,255,0.7), transparent);
    background: -moz-linear-gradient(white, rgba(255,255,255,0.7), transparent);
    background: linear-gradient(white, rgba(255,255,255,0.7), transparent);
    width: 100%;
    height: 70px;
    position: absolute;
    top: 0;
    background-image: url(../img/iscroll_mask_top.png);
    /* display: none; */
}
.iscroll_main_mask_bottom {
    background: -webkit-linear-gradient(transparent, rgba(255,255,255,0.7), white);
    background: -o-linear-gradient(transparent, rgba(255,255,255,0.7), white);
    background: -moz-linear-gradient(transparent, rgba(255,255,255,0.7), white);
    background: linear-gradient(transparent, rgba(255,255,255,0.7), white);
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
    background-image: url(../img/iscroll_mask_bottom.png);
    /* display: none; */
}
.iscroll_outer_left {
    position: absolute;
    width: 50%;
    left: 0;
    bottom: 100px;
    /* border-top: 1px solid black; */
    /* border-bottom: 1px solid black; */
    height: 50px;
}
.iscroll_inner_left {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.iscroll_item_left {
    height: 30px;
    padding: 10px 0;
    /* font-size: 10px; */
    /* opacity: 0.25; */
}
.iscroll_outer_right {
    position: absolute;
    height: 50px;
    width: 50%;
    right: 0;
    bottom: 100px;
    /* border-top: 1px solid black; */
    /* border-bottom: 1px solid black; */
}
.iscroll_inner_right {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.iscroll_item_right {
    height: 40px;
    padding-top: 10px;
    font-size: 10px;
    opacity: 0.25;
    /* border-top: 1px solid transparent; */
    /* border-bottom: 1px solid transparent; */
}
.iscroll_outer_border {
    position: absolute;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 100%;
    height: 50px;
    bottom: 100px;
}
.iscroll_control {
    background: white;
    text-align: left;
    margin-top: 1%;
}
.iscroll_cancel {
    display: inline-block;
    margin: 2% 3% 1%;
}
.iscroll_submit {
    float: right;
    color: #eb503a;
    margin: 2% 3% 1%;
}
.select_window_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
}
.select_window {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: none;
}
.select_main {
    background: white;
}
.select_item {
    height: 25px;
    padding: 10px;
    border-top: 1px solid black;
}
.select_item_active {
    font-size: 20px;
    font-weight: bold;
}
.select_control {
    background: white;
    text-align: left;
    margin-top: 1%;
}
.select_cancel {
    display: inline-block;
    margin: 2% 3% 1%;
}
.select_submit {
    float: right;
    color: #eb503a;
    margin: 2% 3% 1%;
}
@media screen and (max-height: 520px) {
	.temperature {
    top: 3%;
    width: 36%;
    left: 32%;
}
	.temperature_img {}
	.temperature_content {}
	.temperature_inner {}
	.temperature_main {}
	.temperature_num {
    font-size: 35px;
}
	.temperature_unit {}
	.temperature_note {
    font-size: 12px;
}
.bg {
    top: -11%;
}
}
washmachine.js:

Code: Select all

$(document).ready(function() {
	//bind touchwipe event
	function bind_touchwipe(min, sec) {
		scroll_selection('.iscroll_inner_left', min);
		scroll_selection('.iscroll_inner_right', sec);
	}
	//open iscroll_window
	$("#button_time").on("click", function(){
		$('.iscroll_window_mask').css('display', 'block');
		$('.iscroll_window').slideDown(300, function(){bind_touchwipe(3, 59)});
	});

	//close iscroll_window
	function close_iscroll_window() {
		$('.iscroll_window').slideUp(300, function(){
			$('.iscroll_window_mask').css('display', 'none');
		});
	}
	$('.iscroll_cancel').on("click", function(){close_iscroll_window()});
	$('.iscroll_window_mask').on("click", function(){close_iscroll_window()});

	//submit iscroll_window
	$('.iscroll_submit').on("click", function(){
		console.log($('.iscroll_inner_left').css('top'));
		console.log($('.iscroll_inner_right').css('top'));

		var iscroll_height = $('.iscroll_outer_right').height();
		var min = parseInt($('.iscroll_inner_left').css('top')) / -iscroll_height;
		var sec = parseInt($('.iscroll_inner_right').css('top')) / -iscroll_height;
		alert ('The result is ' + min + 'min, ' + sec + 'sec.');
	});

	//open select_window
	$("#button_head").on("click", function(){
		$('.select_window_mask').css('display', 'block');
		$('.select_window').slideDown(300);
	});

	//close select_window
	function close_select_window() {
		$('.select_window').slideUp(300, function(){
			$('.select_window_mask').css('display', 'none');
		});
	}
	$('.select_cancel').on("click", function(){close_select_window()});
	$('.select_window_mask').on("click", function(){close_select_window()});

	//select select_window_item
	$(".select_item").on("click", function(){
		$(this).css('fontSize', '20px').css('fontWeight', 'bold').siblings().css('fontSize', '16px').css('fontWeight', 'normal');
	});
});
scroll_selection.js在被引用層。

ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

jquery on scroll event

Post by ejsoon » 2017 Nov 15, 15:34

Code: Select all

	$(document).ready(function(){
		$('.ca').on('scroll', function(){
			console.log($(this).scrollTop());
		});
	});

ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

jquery下拉搜索匹配

Post by ejsoon » 2017 Nov 24, 20:46

https://stackoverflow.com/questions/144 ... ith-jquery

Code: Select all

$(document).ready(function(){

    var $this, i, filter,
        $input = $('#my_other_id'),
        $options = $('#my_id').find('option');

    $input.keyup(function(){
        filter = $(this).val();
        i = 1;
        $options.each(function(){
            $this = $(this);
            $this.removeAttr('selected');
            if ($this.text().indexOf(filter) != -1) {
                $this.show();
                if(i == 1){
                    $this.attr('selected', 'selected');
                }
                i++;
            } else {
                $this.hide();
            }
        });
    });

});

ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

jquery ajax

Post by ejsoon » 2018 May 07, 11:24

Code: Select all

<script>
		$('#tgla').on("click", function(){
			$.ajax({
				url: "http://xxx/api/invite/statistic",
				type: "post",
				contentType: "application/json",
				data: 'cf70813499cccec2dd7ebfac81c916b0',
				success: function(data) {
					console.log(data);
				},
			});
		});
	</script>

ejsoon
Site Admin
Posts: 3919
Joined: 2016 Jan 10, 22:15

jquery 可以根據根元素動態綁定事件

Post by ejsoon » 2018 Nov 14, 10:21

曉燕姊發來的地址

普通綁定:
$('.content dd').click(function(){

動態綁定(新增了也會綁定上):
$('.content').on('click','dd',function(){

Post Reply