- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
Saya menghadapi masalah kawalan dalam projek. Saya menggunakan kesan seretan panel yang ditulis dalam JQ sebelum ini. Saya ingin memindahkannya ke kod sudut dan saya tidak tahu cara menanganinya
Kod 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) {
//冷藏区
cangshiname = '冷藏区';
$('.main').append(dialogModal('冷藏区'));
new scale('btn', 'bar', 'title', 1, 9, num);
} else if ($type == 2) {
//变温区
$('.main').append(dialogModal('变温区'));
new scale('btn', 'bar', 'title', -20, 5, num);
} else if ($type == 3) {
//冷冻区
$('.main').append(dialogModal('冷冻区'));
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
});
}
}
};
PHP中文网2017-06-30 10:02:14
Anda boleh menulis kod jQuery dalam arahan sudut Jika perpustakaan jQuery telah diperkenalkan, maka parameter kedua pautan dalam arahan sudut ialah objek jQuery.
怪我咯2017-06-30 10:02:14
angular.directive('foo', function(){
return {
link: function(scope, el){
// TODO 调用你jq的初始化代码 el.something()...
}
}
})