【MUI晋级】开发MUI自定义表单插件一，基础插件模板搭建（持续
2017-04-25 本文已影响3872人
三言gg
【MUI晋级】开发MUI自定义表单插件一，基础插件模板搭建
【MUI晋级】开发MUI自定义表单插件二，插件封装
本教程不适合MUI新手，针对的是对MUI框架和原生JS有一定了解，但对代码风格的统一和插件的封装迷惑的同学！
本文使用的编辑器是：HBuilder，本人英语不是太好，命名奇葩请见谅
第一步：新建一个移动APP - MUI项目
怎么新建的就不用说了吧，记得选择mui项目
新建项目
第二步：新建css/resetMUI.css和js/customForm.js文件
resetMUI.css 重置mui样式文件
customForm.js 核心js代码文件
新建完之后记得在index.html引用
修改HTML
第三步：创建示例表单
这一步在正式使用环境下是完全没必要的，但是为了演示如何重置mui的默认样式，这是必要的！
- body中创建header部分 按** mh **可以快速激活header提示，但是没有右侧的按钮
<header class="mui-bar mui-bar-nav">
<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>返回</button>
<h1 class="mui-title">新增客户</h1>
<span class="mui-pull-right">保存</span>
</header>
- header下面创建content部分 按** mf **可以激活表单提示
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>客户代码</label>
<input type="text" class="mui-input-clear" placeholder="请输入客户代码">
</div>
<div class="mui-input-row">
<label>客户名称</label>
<input type="text" class="mui-input-clear" placeholder="请输入客户名称">
</div>
<div class="mui-input-row">
<label>联系人姓名</label>
<input type="text" class="mui-input-clear" placeholder="请输入联系人姓名">
</div>
<div class="mui-input-row">
<label>联系人电话</label>
<input type="number" class="mui-input-clear" placeholder="请输入联系人电话">
</div>
<div class="mui-input-row">
<label>客户地址</label>
<input type="text" class="mui-input-clear" readonly placeholder="点击选择客户地址">
</div>
<div class="mui-input-row">
<label>客户级别</label>
<select name="">
<option value="1">A级</option>
<option value="2">B级</option>
<option value="3">C级</option>
</select>
</div>
<div class="mui-input-row">
<label>备注</label>
<textarea name="" placeholder="请输入备注信息"></textarea>
</div>
</form>
</div>
下面是在边改边看模式下的截图
效果截图
第四步：重置MUI样式
-
重置header样式
先给header添加一个类名 mui-newBar
<header class="mui-bar mui-bar-nav mui-newBar">
然后在 resetMUI.css 中添加如下代码
/*重新设置字体*/
body{font-family:Helvetica Neue,Roboto,microsoft yahei,Arial !important;}
input,textarea,select{ font-family:Helvetica Neue,Roboto,microsoft yahei,Arial !important;}
/*重置header样式*/
.mui-newBar{background-color: #00C3F2;box-shadow: none;}
.mui-newBar .mui-btn-link{color:#fff;}
.mui-newBar .mui-title{color:#fff; font-size: 18px;left: 60px;right: 60px;}
.mui-newBar .mui-pull-right{line-height: 44px;color:#fff;}
效果为
header
- 重置表单样式
/*重置表单样式*/
.mui-input-group:before{background: none;}
.mui-input-group:after{background: none;}
.mui-input-group .mui-input-row{height: auto;}
.mui-input-row label{line-height: 46px;padding: 0;text-align: left;width: 30%;padding-left: 10px;color:#1E1E1E;font-size: 15px !important;}
.mui-input-group .mui-input-row:after{background-color: #eee;}
.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{width: 70%;min-height: 46px;text-align: right; font-size: 15px;border-radius: 0;}
.mui-input-row .mui-input-clear~.mui-icon-clear, .mui-input-row .mui-input-password~.mui-icon-eye, .mui-input-row .mui-input-speech~.mui-icon-speech{left:35%;top: 50%;width: 20px;height: 20px;margin-top:-10px;}
.mui-input-row select{font-size: 14px;width: auto !important;padding-right: 10px;}
.mui-input-row select option{text-align: right;}
.mui-input-row textarea{padding: 10px;height: 62px;}
.mui-input-row input[readonly],.mui-input-row input[disabled]{color:#666;background-color:rgb(240,240,240);background: -webkit-linear-gradient(left, #fff, rgb(240,240,240)) !important; }
.mui-input-row input:focus,.mui-input-row textarea:focus{background-color:rgb(245,253,254);background: -webkit-linear-gradient(left, #fff, rgb(245,253,254));}
效果为
重置样式后的样子
- -webkit-linear-gradient为设置渐变色的，不想要的可以去掉
- 清除按钮被移动到了这里，如果不想要可以在input节点里去掉mui-input-clear样式
清除按钮
- select 如果在设置宽度的情况下 text-align 属性是无效的， width:auto 才能生效
第五步：JS部分
- 在customForm.js里面添加如下代码
/* 自定义表单插件
* ----------------------
* 时间：2017年4月25日16:05:55
* 人员：三言
*/
;(function($,win,dom,undefined){
//默认参数
var defaultConfig = {
};
//插件核心方法
var CustomForm = {
/** 实例化调用函数
* -------------------------
* @param {Object} arg 插件配置参数
*/
init:function(arg){
var self = this;
if(arg) {
} else {
self._logError("初始化参数不存在");
}
return slef;
},
/** 内部方法，输出错误信息
* -----------------------------
* @param {String} errorMsg 错误信息字符串
* @param {Boolean} isTypeEr 是否类型错误
*/
_logError: function(errorMsg, isTypeEr) {
var self = this;
if(self.config.Debug) {
if(isTypeEr) {
throw new TypeError(errorMsg);
} else {
throw new Error(errorMsg);
}
} else {
return;
}
return self;
}
};
//注册插件
$.customForm = $.Class.extend(CustomForm);
})(mui,window,document);
上面的代码就是MUI插件的模板，以后写插件就可以在此基础上扩展，当然还有其他的插件模板，比如 mui("#test").testFn(); 这样插件的模板，以后会有相关的教程；
;(function($,win,dom,undefined){...})(mui,window,document);
这段代码的意思是创建了一个匿名函数，并通过闭包调用，主要作用是创建独立的命名空间，不会污染到全局，后面括号内的值是对应到function的参数的，至于为什么多了一个undefined， 同学们可以自行百度。开头和结尾的 ; 是为了在合并和压缩的时候不会报错！
- 在文件的开头写上插件的作用和开发时间和人员是很重要的一部分，尤其在团队协作中
- 鼠标放到 function 上面然后按 ALT+SHIFT+J 可以快速生成注释，具体可以参阅 JSDoc+
- 如果没有特定的返回值，建议每个方法都返回对象自身，这样可以做到像jquery一样的 链式调用
- 内部方法要以 _ 开头
-
$.customForm = $.Class.extend(CustomForm);
这句话的意思给mui扩展方法并调用该对象的 init 函数
今天先写到这里，晚上或者明天会继续更新，把分享当成生活的一部分也是一种乐趣~
