javascript jQuery的自定义插件演示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript jQuery的自定义插件演示相关的知识，希望对你有一定的参考价值。
/**
* jQuery自定义方法库
*/
;~(function ($) {
function selectChange(opt) {
var defaultOpt = {
targetSelect: '.selection-bg', //目录选择器，需要和select同级
ignoreTxt:'请选择'
}
defaultOpt = $.extend({}, defaultOpt, opt);
var $obj = this;
$obj.each(function () {
var $selectObj = $(this);
$selectObj.on('change', function () {
$selectObj.find(defaultOpt.targetSelect).html($selectObj.find("option:selected").text());
});
//显示默认
if ($selectObj.find("option:selected").text() !== defaultOpt.ignoreTxt) {
$selectObj.find(defaultOpt.targetSelect).html($selectObj.find("option:selected").text());
}
})
}
/**
* 复选框全选取消
* @param opt
*/
var checkAll = function (opt) {
var defaultSetting = {
itemSelector: '.js_item_check'
}
var setting = $.extend({}, defaultSetting, opt);
$nowObj = this;
$nowObj.on('click', function () {
if ($(this).is(':checked')) {
$(setting.itemSelector).each(function () {
this.checked = true;
})
} else {
$(setting.itemSelector).each(function () {
this.checked = false;
})
}
})
}
var multipleCheckAndSubmit = function (opt) {
var defaultSetting = {
btnSelect: '.js_multiple_button',
itemSelector: '.js_item_check',
layerMsg: '请选择要删除的项',
layerIcon: 0,
showConfirm: 1,
confirmMsg: '确定要删除吗?',
okMsg: '确定',
cancelMsg: '取消'
}
var setting = $.extend({}, defaultSetting, opt);
var thisForm = this;
$(setting.btnSelect).on('click', function (e) {
e.preventDefault();
var checkCorp = $('' + setting.itemSelector + ':checked');
if (checkCorp.length == 0) {
layer.alert(setting.layerMsg, {icon: setting.layerIcon});
return false;
}
if (setting.showConfirm) {
layer.confirm(setting.confirmMsg, {
btn: [setting.okMsg, setting.cancelMsg] //按钮
}, function () {
thisForm.submit();
}, function () {
});
} else {
thisForm.submit();
}
})
}
var tabBar = function (opt) {
var defaultSetting = {
tabTitle: '.js_tab_title',
tabContent: '.js_tab_content',
selectClass: 'on',
eventType: 'mouseover'
}
var setting = $.extend({}, defaultSetting, opt);
var $tabBars = this;
$tabBars.each(function () {
var $this = $(this);
var $tabTitle = $this.find(setting.tabTitle);
var $tabContent = $this.find(setting.tabContent);
$tabTitle.children().each(function () {
$(this).on(setting.eventType, function () {
var index = $tabTitle.children().index($(this));
$tabTitle.children().removeClass(setting.selectClass);
$(this).addClass(setting.selectClass);
$tabContent.children().hide();
$tabContent.children().eq(index).show();
})
})
});
};
var searchSelect = function(opt){
var defaultSetting = {
eventS:'.select-view', //事件选择器
inputS: '.select-value', //文本表单选择器,最终要提交的
textS: '.select-text',//显示文本
optionsS: '.options',//选项组的标签
itemS: 'li',//选项标签,
popZIndex:999
};
var caoverId = 'cover_'+Math.random();
var $cover = $('<div id="'+caoverId+'" style="display:none;top:0;left:0;bottom:0;right:0;position:absolute;filter:Alpha(Opacity=0);background:#aaa;-moz-opacity: 0;opacity:0;"></div>');
$("body").append($cover);
var setting = $.extend({}, defaultSetting, opt);
var $select = this;
$select.each(function () {
var $this = $(this);
function setSelectedValue(inputValue,inputText){
$this.find(setting.textS).html(inputText);
$this.find(setting.inputS).val(inputValue);
}
$this.find(setting.eventS).on('click', function(){
$cover.show();
$("#"+caoverId).css('z-index',setting.popZIndex-1);
var $options = $this.find(setting.optionsS);
$options.show();
$options.css('z-index',setting.popZIndex);
function doSelect(e){
if (e.target.nodeName.toLowerCase() == 'li') {
$targetObj = $(e.target);
setSelectedValue($targetObj.data('value'),$targetObj.html());
closePop();
}
$(this).off('click',doSelect);
}
$options.on('click',doSelect);
function closePop(){
$options.hide();
$cover.hide();
}
$cover.one('click',closePop)
})
})
};
var postPageTool = function(opt) {
var defaultSetting = {
pageSelector:'.js_post_page',
formSelector:'.js_form_search',
pageParam:'page'
};
var setting = $.extend({}, defaultSetting, opt);
var $this = this;
$this.find("a").click(function(e){
e.preventDefault();
var $this = $(this);
var href = $this.prop('href');
var regexp = new RegExp(''+setting.pageParam+'=(\\d+)');
var match = href.match(regexp);
var page = 0;
if (match) {
page = match[1]
}
if (page) {
$(setting.pageSelector).val(page);
$(setting.formSelector).submit();
}
})
};
$.fn.extend({
selectChange: selectChange,
CasualCheckAll: checkAll,
CasualCheckAndSubmit: multipleCheckAndSubmit,
CasualTabBars: tabBar,
CasualSearchSelect:searchSelect,
CasualPostPage:postPageTool
})
})(jQuery);
/**
* Created by Administrator on 2018/1/22.
*/
$(function () {
adminModule.selectControl();
adminModule.checkControl();
adminModule.doLogin();
adminModule.showTaletsPage();
adminModule.PageConsultantEdit();
adminModule.PageConsultantList();
adminModule.TalentApplyList();
adminModule.TalentListForAudited();
adminModule.datePicker();
});
var adminModule = {
'isAllocation':false,
'isAudit':false,
'selectControl':function(){
if ($(".js_selection-control").length) {
$(".js_selection-control").selectChange();
}
}
,'checkControl': function () {
if ($(".checkAll").length) {
$(".checkAll").CasualCheckAll();
}
}
,'doLogin':function(){
$("#lg-form").submit(function(e){
e.preventDefault();
if ($("#username").val() == '') {
layer.alert('请填写用户名', {icon: 2});
return false;
}
if ($("#password") == '') {
layer.alert('请填写密码', {icon: 2});
return false;
}
var url = '/index.php/module/AdminHt/action/Login';
$.ajax(url,{
'dataType':'json',
'type':'post',
'data':{
username:$("#username").val(),
password:$("#password").val(),
rememberUsername:$("#rememberUsername:checked").val()
},
'success':function(data){
if (data.status == '200') {
//登录成功
location.href = '/index.php/module/AdminHt/action/Index';
} else {
layer.msg(data.message);
}
}
})
return false;
})
}
,'showTaletsPage':function() {
if ($('#js_action_talent_show').length == 0) {
return false;
}
var datePreg = /^(?:(?:1[6-9]|[2-9][0-9])[0-9]{2}([-/.]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:(?:1[6-9]|[2-9][0-9])(?:0[48]|[2468][048]|[13579][26])|(?:16|[2468][048]|[3579][26])00)([-/.]?)0?2\2(?:29))(\s+([01][0-9]:|2[0-3]:)?[0-5][0-9]:[0-5][0-9])?$/;
function getRecordList(htId) {
$("#talentShow_RecordBox").html('<span>正在加载</span>');
var url = '/index.php/module/AdminHt/action/TalentRecordList';
$.ajax(url, {
data: {
htId: htId
},
dataType: 'html',
success:function(data) {
$("#talentShow_RecordBox").empty();
$("#talentShow_RecordBox").html(data);
}
});
}
//第一次加载,异步获取列表
getRecordList($("#c_htId").val());
$("#contactSave").click(function(){
var cDate = $("#c_date").val();
var cContent = $("#c_content").val();
var cUserId = $("#c_userId").val();
var cHtId = $("#c_htId").val();
if (cDate.search(datePreg) == -1) {
layer.msg('日期格式不正确');
return false;
}
if ($.trim(cContent) == '') {
layer.msg('请填写联系记录');
return false;
}
var url = '/index.php/module/AdminHt/action/TalentsRecordEditAjax';
$.ajax(url, {
dataType:'json',
type:'post',
data:{
cDate:cDate,
cContent:cContent,
cUserId:cUserId,
cHtId:cHtId
},
success:function(data){
if (data.status == 200) {
layer.msg('添加成功');
$("#c_content").val('');
getRecordList(cHtId);//添加成功后,异步获取列表
} else {
layer.alert(data.message);
}
}
})
});
}
,'PageConsultantEdit':function(){
if ($('#js_action_ConsultantEdit').length == 0) {
return false;
}
var myValidform = $("#editForm").Validform({
tiptype:function(msg,o,cssctl){
if(!o.obj.is("form")){
var objtip=o.obj.parent().parent().find(".Validform_checktip");//向上去两层是因为当前的结构是table 或 下拉层级为了统一，只好向上两层
cssctl(objtip,o.type);
objtip.text(msg);
}else{
var objtip=o.obj.find("#msgdemo");
cssctl(objtip,o.type);
objtip.text(msg);
}
}
});
}
,'PageConsultantList':function(){
if ($('#js_page_consultant_list').length == 0){
return false;
}
$(".js_status_set").on('click',function(){
var url = '/index.php/module/AdminHt/action/ConsultantStatusSetAjax';
$.ajax(url,{
type:'post',
'dataType':'json',
data:{
'editID':$(this).data('editid')
},
success:function(data){
if (data.status == 200) {
window.location.reload();
} else {
layer.alert(data.message, {btn:['我知道了']});
}
}
});
});
}
,'TalentApplyList':function(){
if ($('#TalentApplyList').length == 0){
return false;
}
$('#checkAll').CasualCheckAll();
//批量删除
$('#delTalent').on('click',function (){
var inputs = $('.eTalent:checked');
var talent_id = new Array;
if (inputs.length<1) {
layer.alert("请勾选需要操作的简历！", {icon:0});
return false;
}
for (var $i=0;$i<inputs.length;$i++) {
if ($(inputs[$i]).data('status')!=1){
talent_id[$i] = $(inputs[$i]).val();
} else {
layer.alert("您不能删除已审核过的简历！请重新确认您勾选的项目！", {icon:0});
return false;
}
}
if (talent_id.length>OpLimit) {
layer.alert("您一次最多同时删除"+OpLimit+"条简历！", {icon:0});
return false;
}
if (talent_id.length>0) {
layer.confirm('确定从猎聘人才库删除这' + talent_id.length + '条简历吗？',{icon: 0, title:'提示'},function(){
$.post('/index.php/module/AdminHt/action/TalentDel',{talent_id:talent_id},function(data){
if (data.code=='1002') {
layer.alert(data.data, {icon:1}, function (index) {
layer.close(index);
window.location.href = window.location.href;
});
} else {
layer.alert(data.data, {icon:0});
}
},'json');
});
} else {
layer.alert("请勾选要操作的简历", {icon:0});
}
return false;
});
//编辑简历开始
//编辑简历弹窗
$('.talentEdit').on('click',function () {
var talent_id = $(this).data('num');
$.get('/index.php/module/AdminHt/action/TalentEdit',{talent_id:talent_id},function ($data) {
$('#talentEditBox').html($data);
$('#talentEditBox').show();
$('#pop_bg').show();
});
});
//简历编辑
$('#talentEditBox').on('click','#TalentEdit',function(){
$.ajax({
url:'/index.php/module/AdminHt/action/TalentEdit',
type:'post',
data:$('#talentEditBox input').serialize(),
dataType:'json',
success:function(data){
if (data.code=='1002') {
$('#talentEditBox').hide();
layer.alert(data.data, {icon:1}, function (index) {
layer.close(index);
window.location.href = window.location.href;
});
} else {
layer.alert(data.data, {icon:0});
}
}
});
});
//关闭弹窗
$('#talentEditBox').on('click','.closeBtn',function(){
$('#talentEditBox').find('table').remove();
$(this).parent().parent().hide();
$('#pop_bg').hide();
});
//编辑简历结束
//审核简历开始
//审核弹窗
$('.talentAudit').on('click',function () {
var talent_id = $(this).data('num');
var name = $(this).data('name');
if (name == '---') {
layer.alert("请先完善简历信息！");
return false;
}
$('#talentAuditBox #AuditName').val(name);
$('#talentAuditBox #audit_talent_id').val(talent_id);
$('#talentAuditBox').show();
$('#pop_bg').show();
});
//批量审核弹窗
$('#talentAudit').on('click',function () {
var inputs = $('.eTalent:checked');
var talent_id = new Array;
var name = new Array;
if (inputs.length<1) {
layer.alert("请勾选需要操作的简历！", {icon:0});
return false;
}
for (var $i=0;$i<inputs.length;$i++) {
if ($(inputs[$i]).data('status')!=1){
talent_id[$i] = $(inputs[$i]).val();
if ($(inputs[$i]).data('name') == '---') {
layer.alert("所选简历中有信息未完善的简历！", {icon:0});
return false;
}
name[$i] = $(inputs[$i]).data('name');
} else {
layer.alert("您不能审核已审核通过的简历！请重新确认您勾选的项目！", {icon:0});
return false;
}
}
if (talent_id.length>OpLimit) {
layer.alert("您一次最多同时审核"+OpLimit+"条简历！", {icon:0});
return false;
}
name = name.join(',');
var num = '（' + talent_id.length + '人）';
talent_id = talent_id.join(',');
$('#talentAuditBox #AuditName').val(name);
$('#talentAuditBox #audit_talent_id').val(talent_id);
$('#talentAuditBox #AuditNum').text(num);
$('#talentAuditBox').show();
$('#pop_bg').show();
});
//关闭弹窗
$('#talentAuditBox').on('click','.closeBtn',function(){
$(this).parent().parent().hide();
$('#pop_bg').hide();
});
//切换审核通过和不通过的选项
$("#talentAuditBox input[name='status']").on('click',function(){
var val = $(this).val();
if (val == 1 ||val == 3) {
$('#hunts').show();
$('#reason').hide();
} else if (val == 2 || val == 4) {
$('#hunts').hide();
$('#reason').show();
}
});
//简历审核
$('#TalentAuditBtn').on('click',function () {
var $this = this;
if ($this.isAudit==true) {
return ;
} else {
$this.isAudit = true;
}
var index = layer.load(0,{shade: [0.8, '#393D49']});
$.ajax({
url:'/index.php/module/AdminHt/action/TalentAudit',
type:'post',
data:$('#talentAuditBox input,#talentAuditBox select').serialize(),
dataType:'json',
success:function(data){
layer.close(index);
$this.isAudit=false;
if (data.code=='1002') {
$('#talentAuditBox').hide();
layer.alert(data.data, {icon:1}, function (index) {
layer.close(index);
window.location.href = window.location.href;
});
} else {
layer.alert(data.data, {icon:0});
}
}
});
});
//审核简历结束
}
,'TalentListForAudited':function(){
if ($('#TalentListForAudited').length == 0){
return false;
}
$('#checkAll').CasualCheckAll();
//分配顾问开始
//分配弹框
$('.talentAllocation').on('click',function () {
var talent_id = $(this).data('num');
var name = $(this).data('name');
if (name == '---') {
layer.alert("请先完善简历信息！", {icon:0});
return false;
}
$('#talentAllocationBox #AuditName').val(name);
$('#talentAllocationBox #audit_talent_id').val(talent_id);
$('#talentAllocationBox').show();
$('#pop_bg').show();
});
//批量简历分配
$('#talentAllocation').on('click',function () {
var inputs = $('.eTalent:checked');
var talent_id = new Array;
var name = new Array;
if (inputs.length<1) {
layer.alert("请勾选需要操作的简历！", {icon:0});
return false;
}
for (var $i=0;$i<inputs.length;$i++) {
if ($(inputs[$i]).data('status') == 1 || $(inputs[$i]).data('status') == 3){
talent_id[$i] = $(inputs[$i]).val();
if ($(inputs[$i]).data('name') == '---') {
layer.alert("所选简历中有信息未完善的简历！", {icon:0});
return false;
}
name[$i] = $(inputs[$i]).data('name');
} else {
layer.alert("您不能分配未审核或者审核未通过的简历！请重新确认您勾选的项目！", {icon:0});
return false;
}
}
if (talent_id.length>20) {
layer.alert("您一次最多同时分配20条简历！", {icon:0});
return false;
}
name = name.join(',');
var num = '（' + talent_id.length + '人）';
talent_id = talent_id.join(',');
$('#talentAllocationBox #AuditName').val(name);
$('#talentAllocationBox #audit_talent_id').val(talent_id);
$('#talentAllocationBox #AllocationNum').text(num);
$('#talentAllocationBox').show();
$('#pop_bg').show();
});
//简历分配
$('#TalentAllocationBtn').on('click',function () {
$.ajax({
url:'/index.php/module/AdminHt/action/TalentAllocation',
type:'post',
data:$('#talentAllocationBox input,#talentAllocationBox select').serialize(),
dataType:'json',
success:function(data){
if (data.code=='1002') {
$('#talentAllocationBox').hide();
layer.alert(data.data, {icon:1}, function (index) {
layer.close(index);
window.location.href = window.location.href;
});
} else {
layer.alert(data.data, {icon:0});
}
}
});
});
//关闭弹窗
$('#talentAllocationBox').on('click','.closeBtn',function(){
$(this).parent().parent().hide();
$('#pop_bg').hide();
});
//分配顾问结束
//职位推荐开始
//推荐弹框
$('.jobRecommend').on('click',function () {
var talent_id = $(this).data('num');
var name = $(this).data('name');
if (name == '---') {
layer.alert("请先完善简历信息！", {icon:0});
return false;
}
$('#jobRecommendBox #TalentNames').val(name);
$('#jobRecommendBox #talent_ids').val(talent_id);
$('#jobRecommendBox').show();
$('#pop_bg').show();
});
//批量职位推荐弹框
$('#jobRecommend').on('click',function () {
var inputs = $('.eTalent:checked');
var talent_id = new Array;
var name = new Array;
if (inputs.length<1) {
layer.alert("请勾选需要操作的简历！", {icon:0});
return false;
}
for (var $i=0;$i<inputs.length;$i++) {
if ($(inputs[$i]).data('status')==1){
talent_id[$i] = $(inputs[$i]).val();
if ($(inputs[$i]).data('name') == '---') {
layer.alert("所选简历中有信息未完善的简历！", {icon:0});
return false;
}
name[$i] = $(inputs[$i]).data('name');
} else {
layer.alert("您不能给未审核或审核未通过的简历推荐职位！请重新确认您勾选的项目！", {icon:0});
return false;
}
}
if (talent_id.length>20) {
layer.alert("您一次最多同时给20条简历推荐职位！", {icon:0});
return false;
}
name = name.join(',');
var num = '（' + talent_id.length + '人）';
talent_id = talent_id.join(',');
$('#jobRecommendBox #TalentNames').val(name);
$('#jobRecommendBox #talent_ids').val(talent_id);
$('#jobRecommendBox #recommendNum').text(num);
$('#jobRecommendBox').show();
$('#pop_bg').show();
});
//推荐职位
$('#jobRecommendBtn').on('click',function () {
var $this = this;
if ($this.isAllocation==true) {
return ;
} else {
$this.isAllocation = true;
}
var index = layer.load(0,{shade: [0.8, '#393D49']});
$.ajax({
url:'/index.php/module/AdminHt/action/JobRecommendToTalent',
type:'post',
data:$('#jobRecommendBox input, #jobRecommendBox select, #jobRecommendBox textarea').serialize(),
dataType:'json',
success:function(data){
layer.close(index);
$this.isAllocation=false;
if (data.code=='1002') {
$('#talentAllocationBox').hide();
layer.alert(data.data, {icon:1}, function (index) {
layer.close(index);
window.location.href = window.location.href;
});
} else {
layer.alert(data.data, {icon:0});
}
}
});
});
//推荐职位时返回短信预览
$('#jobSelect').on('change', function(){
var jobID= $(this).val();
var jobName = $('#jobSelect option:selected').data('jobname');
$.post('/index.php/module/AdminHt/action/getJobRecommendSmsContent',{jobID:jobID, jobName:jobName},function (data) {
if (data.code=='1002') {
$('#smsContent').val(data.data);
}
},'json');
});
//关闭弹窗
$('#jobRecommendBox').on('click','.closeBtn',function(){
$(this).parent().parent().hide();
$('#pop_bg').hide();
});
//职位推荐结束
//简历等级开始
//简历等级弹框
$('.talentRankSet').on('click',function () {
var talent_id = $(this).parent().parent().data('num');
var rank = $(this).parent().parent().data('rank');
if (parseInt(rank)>0) {
$("#talentRankSetBox input[value='"+rank+"']").attr('checked',true)
}
$('#talentRankSetBox #talent_id').val(talent_id);
$('#talentRankSetBox').show();
$('#pop_bg').show();
});
//简历等级
$('#talentRankSetBtn').on('click',function () {
$.ajax({
url:'/index.php/module/AdminHt/action/TalentRankSet',
type:'post',
data:$('#talentRankSetBox input, #talentRankSetBox select, #talentRankSetBox textarea').serialize(),
dataType:'json',
success:function(data){
if (data.code=='1002') {
$('#talentAllocationBox').hide();
layer.alert(data.data, {icon:1}, function (index) {
layer.close(index);
window.location.href = window.location.href;
});
} else {
layer.alert(data.data, {icon:0});
}
}
});
});
//关闭弹窗
$('#talentRankSetBox').on('click','.closeBtn',function(){
$(this).parent().parent().hide();
$('#pop_bg').hide();
});
}
,
/**
* datePicker监听方法
*/
datePicker: function () {
if ($(".datePicker").length < 1) {
return false;
}
$(".datePicker").each(function () {
/* 默认配置 */
var data = {
autoclose: true,
language: 'zh-CN',
todayHighlight: true,
clearBtn: true
};
// 时间格式 yyyy-mm-dd
if ($(this).attr('format') && $(this).attr('format') == 'typeOne') {
data = {
autoclose: true,
language: 'zh-CN',
todayHighlight: true,
clearBtn: true,
format: 'yyyy-mm-dd'
}
}
$(this).datepicker(data).on('changeDate', function (e) {
if ($(this).attr('changeEvent')) {
eval($(this).attr('changeEvent'));
}
})
});
}
}以上是关于javascript jQuery的自定义插件演示的主要内容，如果未能解决你的问题，请参考以下文章