J'ai rencontré un problème de contr?le dans le projet. J'ai déjà utilisé l'effet de glissement de panneau écrit en JQ. Je souhaite le transplanter en code angulaire et je ne sais pas comment le gérer. Veuillez me le faire savoir.
Code JQ
scale = function (btn, bar, title, from, to, initnum) {
//獲取增減溫度的按鈕
this.plus = $('.scale_btn_l a');
this.add = $('.scale_btn_r a');
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("p")[0];
this.from = from;
this.to = to;
this.initnum = initnum;
this.init();
};
var length = 0;
scale.prototype = {
init: function () {
var f = this, g = document, b = window, m = Math;
$('.scale_panel .fl').html(f.from + '℃');
$('.scale_panel .fr').html(f.to + '℃');
$('.basemsg span').html(f.initnum + '℃');
if (f.from) {
length = 100 / (f.to - f.from);
var lengthinit = f.to - f.initnum;
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
this.title.innerHTML = this.initnum;
f.btn.style.left = offsetleft + 'px';
this.step.style.width = offsetleft + 'px';
}
f.btn.addEventListener('touchstart', function(event) {
var x = event.targetTouches[0].pageX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.addEventListener('touchmove',function(_event){
var thisX = _event.targetTouches[0].pageX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
if (to > length) {
to += length;
}
if(to > f.bar.offsetWidth){
f.btn.style.left = f.bar.offsetWidth + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), f.bar.offsetWidth);
}else{
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
}
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
});
}, false);
/*f.btn.touchstart = function (e) {
var x = (e || b.event).clientX;
var l = this.offsetLeft;
var max = f.bar.offsetWidth - this.offsetWidth;
g.touchmove = function (e) {
var thisX = (e || b.event).clientX;
var to = m.min(max, m.max(-2, l + (thisX - x)));
if (to > length) {
to += length;
}
f.btn.style.left = to + 'px';
f.ondrag(m.round(m.max(0, to / max) * 100), to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.touchend = new Function('this.touchmove=null');
};*/
//手動控制
f.plus.on('click', function () {
var currentNum = parseInt(f.title.innerHTML);
if (currentNum > f.from) {
var lengthinit = f.to - (currentNum - 1);
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
f.title.innerHTML = currentNum - 1;
$('.basemsg span').html((currentNum - 1) + '℃');
// $('.leng').html((currentNum - 1) + '℃');
if ((currentNum - 1) == f.from) {
f.btn.style.left = 0 + 'px';
f.step.style.width = 0 + 'px';
} else {
f.btn.style.left = offsetleft + 'px';
f.step.style.width = offsetleft + 'px';
}
}
});
f.add.on('click', function () {
var currentNum = parseInt(f.title.innerHTML);
if (currentNum < f.to) {
var lengthinit = f.to - (currentNum + 1);
var offsetleft = (f.bar.clientWidth / (f.to - f.from)) * (Math.abs(f.to - f.from) - Math.abs(lengthinit)) + length;
f.title.innerHTML = currentNum + 1;
$('.basemsg span').html((currentNum + 1) + '℃');
// $('.leng').html((currentNum + 1) + '℃');
if ((currentNum + 1) == f.to) {
f.btn.style.left = f.bar.clientWidth + 'px';
f.step.style.width = f.bar.clientWidth + 'px';
} else {
f.btn.style.left = offsetleft + 'px';
f.step.style.width = offsetleft + 'px';
}
}
});
},
ondrag: function (pos, x) {
var num = parseInt(pos / length) + 1;
var num1 = 0;
if (this.from < 0) {
num1 = this.from + (num - 1);
} else {
num1 = num;
}
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = num1;
$('.basemsg span').html(num1 + '℃');
}
}
//冰箱溫度控制
//new scale('btn', 'bar', 'title', -23, -15, -13);
function changeTemper($this, $type) {
$('.dialog').remove();
var num = $this.find('p span').html();
if ($type == 1) {
//冷藏區(qū)
cangshiname = '冷藏區(qū)';
$('.main').append(dialogModal('冷藏區(qū)'));
new scale('btn', 'bar', 'title', 1, 9, num);
} else if ($type == 2) {
//變溫區(qū)
$('.main').append(dialogModal('變溫區(qū)'));
new scale('btn', 'bar', 'title', -20, 5, num);
} else if ($type == 3) {
//冷凍區(qū)
$('.main').append(dialogModal('冷凍區(qū)'));
new scale('btn', 'bar', 'title', -23, -15, num);
}
$('.dialog').find('.dialog-btn-ok').on('click', function () {
//跟控制面板交互根據$type參數聯動數據
if ($type == 1){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.leng').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
else if ($type == 2){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.bian').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
else if ($type == 3){
$this.find('p span').html($('.basemsg span').html().replace('℃', ''));
$('.dong').html($('.basemsg span').html().replace('℃', ''));
$('.dialog').remove();
}
});
}
function dialogModal($name){
var htmlstr = '<p class="dialog">' +
' <p class="mask"></p>' +
' <p class="dialog-modal">' +
' <p class="dialog-bd">' +
' <p class="vfridge-slide">' +
' <p class="basemsg">' + $name + '<span>-20℃</span>' +
' <small>實時溫度</small>' +
' </p>' +
' <p class="scale_wrap">' +
' <p class="scale_btn_l fl"><a><img src="images/refrigeratorControl/icon-plusDevice@3x.png"></a></p>' +
' <p class="scale_panel fl">' +
' <span class="fl">-23℃</span>' +
' <p class="scale" id="bar">' +
' <p id="scaleprogress" name="scaleprogress" class="scaleprogress"></p>' +
' <p id="btn" class="btn">' +
' <span id="title" class="msg">-23</span>' +
' </p>' +
' </p>' +
' <span class="fr">-15℃</span>' +
' </p>' +
' <p class="scale_btn_r fr"><a><img src="images/refrigeratorControl/icon-addDevice@3x.png"></a></p>' +
' </p>' +
' <p>設置溫度</p>' +
' </p>' +
' </p>' +
' <p class="dialog-ft">' +
' <a class="dialog-btn-cancel" onclick="$(\'.dialog\').remove();changge = null;">取消</a>' +
' <a class="dialog-btn-ok">確定</a>' +
' </p>' +
' </p>' +
'</p>';
return htmlstr;
}
//加溫度
$scope.plusTemp = function(type){
if (type == 1) {
if ($scope.refrigeratorTargetTemperature >= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn(translations.lang_maxTem + " " + $scope.DeviceData.refrigeratorTargetTemperature.logic.range.maxValue + translations.lang_cannotHigh);
});
}
} else {
$scope.refrigeratorTargetTemperature === "-/-" ? 0 : $scope.refrigeratorTargetTemperature;
$scope.refrigeratorTargetTemperature += $scope.DeviceData.refrigeratorTargetTemperature.logic.range.step;
$scope.settingTemp({
'refrigeratorTargetTemperature': $scope.refrigeratorTargetTemperature
});
}
}
else if (type == 3) {
if ($scope.vtRoomTargetTemperature +21 >= $scope.DeviceData.vtRoomTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn(translations.lang_maxTem + " " + ($scope.DeviceData.vtRoomTargetTemperature.logic.range.maxValue -21)+ translations.lang_cannotHigh);
});
}
} else {
$scope.vtRoomTargetTemperature === "-/-" ? 0 : $scope.vtRoomTargetTemperature;
$scope.vtRoomTargetTemperature += $scope.DeviceData.vtRoomTargetTemperature.logic.range.step;
$scope.settingTemp({
'vtRoomTargetTemperature': $scope.vtRoomTargetTemperature
});
}
}
else {
if (($scope.freezerTargetTemperature+26) >= $scope.DeviceData.freezerTargetTemperature.logic.range.maxValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_maxTem','lang_cannotHigh']).then(function(translations) {
$$.warn("不能再高了"+ " " + ($scope.DeviceData.freezerTargetTemperature.logic.range.maxValue -26) + translations.lang_cannotHigh);
});
}
} else {
$scope.freezerTargetTemperature === "-/-" ? 0 : $scope.freezerTargetTemperature;
$scope.freezerTargetTemperature += $scope.DeviceData.freezerTargetTemperature.logic.range.step;
$scope.settingTemp({
'freezerTargetTemperature': $scope.freezerTargetTemperature
});
}
}
};
//減溫度
$scope.minusTemp = function(type){
if (type == 1) {
if ($scope.refrigeratorTargetTemperature <= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + $scope.DeviceData.refrigeratorTargetTemperature.logic.range.minValue + translations.lang_cannotLow);
});
}
} else {
$scope.refrigeratorTargetTemperature === "-/-" ? 0 : $scope.refrigeratorTargetTemperature;
$scope.refrigeratorTargetTemperature -= $scope.DeviceData.refrigeratorTargetTemperature.logic.range.step;
$scope.settingTemp({
'refrigeratorTargetTemperature': $scope.refrigeratorTargetTemperature
});
}
}
else if (type == 3){
if (($scope.vtRoomTargetTemperature +21 ) <= $scope.DeviceData.vtRoomTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + ($scope.DeviceData.vtRoomTargetTemperature.logic.range.minValue -21) + translations.lang_cannotLow);
});
}
} else {
$scope.vtRoomTargetTemperature === "-/-" ? 0 : $scope.vtRoomTargetTemperature;
$scope.vtRoomTargetTemperature -= $scope.DeviceData.vtRoomTargetTemperature.logic.range.step;
$scope.settingTemp({
'vtRoomTargetTemperature': $scope.vtRoomTargetTemperature
});
}
} else {
if (($scope.freezerTargetTemperature+26) <= $scope.DeviceData.freezerTargetTemperature.logic.range.minValue) {
if ($$(".ModalPromptBox").length === 0) {
$translate(['lang_minTem','lang_cannotLow']).then(function(translations) {
$$.warn(translations.lang_minTem + " " + ($scope.DeviceData.freezerTargetTemperature.logic.range.minValue -26) + translations.lang_cannotLow);
});
}
} else {
$scope.freezerTargetTemperature === "-/-" ? 0 : $scope.freezerTargetTemperature;
$scope.freezerTargetTemperature -= $scope.DeviceData.freezerTargetTemperature.logic.range.step;
$scope.settingTemp({
'freezerTargetTemperature': $scope.freezerTargetTemperature
});
}
}
};
2
0
0
人生最曼妙的風景，竟是內心的淡定與從容！
Vous pouvez écrire du code jQuery dans l'instruction angulaire. Si la bibliothèque jQuery a été introduite, alors le deuxième paramètre du lien dans l'instruction angulaire est l'objet jQuery.
angular.directive('foo', function(){
return {
link: function(scope, el){
// TODO 調用你jq的初始化代碼 el.something()...
}
}
})
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
