需求描述:
1、如上图,当VFC的过滤条件存在时,页面加载时滚动到VFC值的位置。
2、当页面向下滚动一定高度时,常用按钮被隐藏,为了用户体验良好,将常用按钮固定显示。
3、当使用多个input输入数据时,当input失去焦点、点击enter时,判断是否有下一个input,若有,聚焦到下一个input输入框行尾。
JQuery效果实现:
1、
function setupProductsSitePageRankPage() {
var $productSitePageRankMoudle = $('.products-sitepage-rank-page'),
$modalRank = $productSitePageRankMoudle.find('.change-rank-modal'),
$submitRank = $modalRank.find('.submit-rank-form'),
$checkboxes = $productSitePageRankMoudle.find('.checkboxes'),
$inputNum = $productSitePageRankMoudle.find('.input-number'),
vfcText = $productSitePageRankMoudle.find('.vfc-text').val(),
$obj;
//if no checkbox is checked,'change rank' button is disabled.
if ($('input[type=checkbox]:checked').length > 0) {
$('.change-rank-btn').prop('disabled', false);
$('.change-rank-btn').removeClass('disabled');
} else {
$('.change-rank-btn').prop('disabled', true);
$('.change-rank-btn').addClass('disabled');
}
//Window scroll to where matched the vfc.
function getJqObjByText(content) {
var $ele;
$("span:contains('" + content + "')").each(function () {
if (this.innerHTML == content) {
$ele = $(this); //获取jquery对象
return false; //加上这句,在找到第一个符合的元素时跳出$.each。
}
});
return $ele;
}
$("html,body").animate({
scrollTop: getJqObjByText(vfcText).offset().top - 100
}, 400);
//With the window scrolled up util'change rank'btn,fix the btn.
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('.fixed-change-rank').show();
} else {
$('.fixed-change-rank').hide();
}
});
//Change Rank modal on submit,location reload.
$modalRank.find('.submit-rank-btn').on('click', function () {
var $this = $(this),
rank = $modalRank.find('.rank').val(),
pvlist = [],
pv,
jsonval;
$productSitePageRankMoudle.find('.checkboxes').each(function () {
var $this = $(this);
if ($this.prop('checked')) {
jsonval = $this.data('json');
pvlist.push(jsonval);
}
});
pv = JSON.stringify(pvlist);
$.ajax({
url: getUncachedUrl($this.data('url')),
type: 'POST',
data: {
pv: pv,
rank: rank
},
success: function (data) {
//console.log(data);
if (data.status === 's') {
toastr.success(data.message);
location.reload(true);
} else {
toastr.error(data.message);
}
$this.removeClass('loading');
},
error: function () {
showNotificationError();
$this.removeClass('loading');
}
});
return false;
});
//Page Rank changed.
$inputNum.on('change', function () {
var $this = $(this),
rank = $this.val(),
jsonval = $this.closest('tr').find('.checkboxes').data('json'),
pvlist = [],
pv;
pvlist.push(jsonval);
pv = JSON.stringify(pvlist),
$.ajax({
url: getUncachedUrl('/products/sitepagerankhandler'),
type: 'POST',
data: {
act: 'edit-rank',
pv: pv,
rank: rank
},
success: function (data) {
//console.log(data);
if (data.status === 's') {
toastr.success(data.message);
//location.reload(true);
} else {
toastr.error(data.message);
}
$this.removeClass('loading');
},
error: function () {
showNotificationError();
$this.removeClass('loading');
}
});
});
$inputNum.on('keypress', function (e) {
var $this = $(this);
if (e.which === 13) {
$this.blur();
if ($this.parent().parent().next('tr').find('.input-number')) {
var content = $this.parent().parent().next('tr').find('.input-number').val();
$this.parent().parent().next('tr').find('.input-number').val("").focus().val(content);
} else {
return false;
}
}
});
}
注意:
1、获取非input元素的文本值,如div。如果div里含有多个级别的div,则用获取文本内容。
span:contains('" + content + "')
2、将光标定位到行尾的操作,等价于把input中原有的内容复制再把值赋给input。
var content = $this.parent().parent().next('tr').find('.input-number').val();
$this.parent().parent().next('tr').find('.input-number').val("").focus().val(content);