- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
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) {
//冷藏区
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
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.
怪我咯2017-06-30 10:02:14
angular.directive('foo', function(){
return {
link: function(scope, el){
// TODO 调用你jq的初始化代码 el.something()...
}
}
})