对于JQuery的学习,已经有3年多的时间了,直到去年与我的组长一起做项目,看到他写的JS,确实特别漂亮,有时甚至还看不太懂,
我才发现其实我不太会JQuery。所以我有时间就会去看看他写的JS代码,直到今天我都会很怀恋那段在清大的日子,是我人生思想道路上的一次艳遇。
我到现在都一直喜欢去看一些牛人的js文章,譬如像 (叶小钗,司徒正美,tom大叔)等人的文章都是很不错的。
上面的话说多了,来看看我如何输写JS代码,模块化的思路整理,大概有下面的几种情况:
第一种:教你如何在项目中编写一个可以通用的弹框,废除掉 alert("shit")
var alertBox = function (option) {
//扩展区域
var options = {
w: '',
title: '提示:',
msg: '',
msgExt: '',
MsgArr: [],
yes_btn: "确定",
no_btn: "取消",
yesBool: true,
noBool: true,
ok_Fun: null,
backgroundColor: '#DC0100',
AutoFun: null //----自执行函数----
}
//---继承合并,形成组合的options参数----
option = $.extend({}, options, option || {});
//--随机生成一个ID--
var obj_msgprint = "msgprint_" + parseInt(Math.random() * 1000);
//--确定--
option.yes_btn = option.yesBool ?
"<a id='a_activateYes' style= background-color:" + option.backgroundColor + " href='javascript:;'>" + option.yes_btn + '</a>' : "";
//--取消--
option.no_btn = option.noBool ? '<a id="a_activateNo" class="cancel" href="javascript:;">' + option.no_btn + '</a>' : "";
if (option.noBool) {
noBtn = "";
}
var allMsgArr = [];
if (option.MsgArr.length > 0) {
for (var item in option.MsgArr) {
allMsgArr.push("<p class='big'>" + option.MsgArr[item] + "</p>");
};
}
if (option.msg != '') {
allMsgArr.push("<p class='big'>" + option.msg + "</p>");
}
if (option.msgExt != '') {
allMsgArr.push("<p style='text-align:center;'>" + option.msgExt + "</p>");
}
var boxContentArr = ["<div id='" + obj_msgprint + "' class='albox' style='position:absolute;z-index:1002;display:block;width:" + option.w + "'>
<div class='headbox' style='background-color: " + option.backgroundColor + "'>", "<p>" + option.title + "</p>", "</div>
<div class='conbox' style='border-color: " + option.backgroundColor + "'><div class='txt'>" + allMsgArr.join('') + "</div>
<div class='btnbox'>", option.yes_btn, option.no_btn, "</div></div></div>"];
$("body").append(boxContentArr.join(''));
$("#a_activateNo,#a_closeActivate,#a_activateYes").click(function () {
$("#" + obj_msgprint).hide();
mask.hide();
$("#" + obj_msgprint).remove();
mask.remove();
if (option.ok_Fun && (typeof (option.ok_Fun) === 'function') && $(this).is("#a_activateYes")) {
option.ok_Fun.apply();
}
});
//按下回车键
$(document).keypress(function (e) {
var ev = e || event;
if (ev.keyCode == 13) {
$("#a_activateYes").trigger("click");
}
});
//***************创建遮罩效果*****************/
var mask = $("<div id=\"maskOfDiv\"></div>"); //--Div遮罩----
$("body").append(mask);
var sh = document.documentElement.scrollHeight,
ch = document.documentElement.clientHeight,
height = sh > ch ? sh : ch;
mask.css({
"position": "absolute",
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"z-index": "1000",
"background-color": "#000000",
"display": "none",
"height": height
});
mask.show().css("opacity", "0.3");
$("#" + obj_msgprint).show();
//***************创建遮罩效果******************/
//-------居中提示类型---------
var dom_obj = document.getElementById(obj_msgprint);
dom_obj.style.top = ((document.documentElement.clientHeight - $("#" + obj_msgprint).height()) / 2) + "px";
dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $("#" + obj_msgprint).width()) / 2) + "px";
//------自动执行函数--------
if (option.AutoFun && (typeof (option.AutoFun) === 'function')) {
option.AutoFun.apply();
}
}
window.alertBox = alertBox;
调用插件:
<script type="text/javascript">
alertBox({ msg: "干掉alert,你看行不行!", yes_btn: "alertBox"});
</script>
大家可以重点去学习,$.extend():
//---继承合并,形成组合的options参数----
option = $.extend({}, options, option || {});
截图效果:
==========================================================
第二种: 教你如何用js的 prototype 原型链模式,做一个通用的验证插件。
View Code
调用插件:
<form class="familyClass">
<input type="text" class="Validate" name="Phone" id="Phone" value="@Model.Phone"
data-val="{type:'phone',initMsg:'请输入您的手机号!',sucMsg:'手机号码验证成功!',errorMsg:'请输入正确的手机号!'}"/>
<form>
<script type="text/javascript">
var familyForm = new FormValidateCommon(".familyClass", false);
familyForm.init();
familyForm.validatorAll();
</script>
上面的调用实现了很灵活的自动式标签绑定验证,但是只适合一种一个项目的通用样式的提示。
大家可以重点去学习,FormValidateCommon.prototype = {} :
截图效果:
============================================
第三种:用js制作实现一个漂亮的下拉框插件:selectPlus
View Code
调用插件:
<div class="order">
<div style="width: 124px;" class="seleitem">
<input type="hidden" name="pay-name" data-name="data" value="已支付">
<input type="hidden" name="orderPayNum" data-value="data" value="1">
<i id="opOption"></i>
<a id="orderPay" class="show" href="javascript:void(0);" value="1">已支付</a>
<p style="width: 140px; height: 55px;">
<a value="" href="javascript:void(0)" style="display: none;" class="">全部</a>
<a value="0" href="javascript:void(0)" style="display: none;">未支付</a>
<a value="1" href="javascript:void(0)" style="display: none;" class="current">已支付</a>
</p>
</div>
</div>
<script type="text/javascript">
$(function () {
//-------------插件调用-------------------------------
$(".order").selectPlus({
index: 0 });//--支付状态,{index:为选中第一个}
});
</script>
截图效果:
======================================================================
第四种:续
: selectPlus
对于上面的selectPlus我还有话要说,对于插件的思想,未必真的就很好,看了BootStrap的一些插件源代码,你会发现,它还结合了一种绑定式的思想。
对于上面提到的所有插件式写法,其实我们都可以用绑定式的思想去简化代码量。
在上面的代码中加上,加上如下代码:
(function ($) {
$.fn.selectPlus = function (option) {
//.........可以参考上面的selectPlus.......
}
//----------很简单的关键代码-------------------
$(window).on('load', function () {
//取得元素上带data-tip="on"的元素
$('[data-select="on"]').each(function () {
$(this).selectPlus();
})
})
});
调用变成了这样:
<div class="order" data-select="on">
//..............
</div>
希望小伙伴们也都能领悟,吃饭了哦!
在寂寞的日子里沉淀自己,在程序的日子里找到自己,我为梦想而坚持!
分享到:
相关推荐
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery 插件开发 pdf
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jquery 插件jquery 插件jquery 插件jquery 插件
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jQuery插件开发全解析 可提高封装能力和js编程能力。
Jquery开发文档,为pdf格式,希望对你有所帮助。Jquery开发文档,为pdf格式,希望对你有所帮助。
目前唯一一本专门讲解Jquery开发的图书,也介绍了很多已经存在的插件的使用方法,该书是刚刚发行,第一手英文资料,BS开放者不可或缺的一本分床头资料。
通用 JQuery 插件开发,及相关示例
jquery 插件开发详解通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
NULL 博文链接:https://zhoucl.iteye.com/blog/1239737
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jQuery插件的开发流程
这里提供最基础的jquery插件编辑方法,为jquery插件学习者提供帮助。
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...