Skip to content

Latest commit

 

History

History
110 lines (93 loc) · 3.12 KB

分享.md

File metadata and controls

110 lines (93 loc) · 3.12 KB
Raw

开发/填坑小技巧

author:jf_ou

date:2017-04-14

1:MTHCrmGridView表格使用盘源查询的分页控件

添加引用

先引用相关CSS：
<link type="text/css" rel="Stylesheet" href="../Include/Styles/LJGreen.css" />
再引用已封装好的相关脚本：
<script type="text/javascript" src="../Include/Scripts/LJPagingBar.js"></script>

效果图

2:常用的几个CSS类

text-ellipsis: 文本溢出展示省略号,需先定义好宽度。

  • 核心代码
.text-ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
  • 效果图

test-justify: 调整文本的间隔使到文本两边对齐。

  • 核心代码
.text-justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
  • 效果图

3:Textarea限制字数解决方案

HTML

<textarea  maxlength="300" ></textarea>

Javascript

//备注字数限制
$("textarea[maxlength]").bind('blur keyup', function (e) {
    var text = $.trim($(this).val());
    var limitLength = parseInt($(this).attr("maxlength"));
    if (text.length > limitLength) {
        /*这里是为了兼容部分浏览器在字数到达极限值之后再输入中文会清空输入框的内容*/
        $(this).hide().show().focus();

        $(this).val(text.substr(0, limitLength));
    }
    /*建议阻止事件冒泡 */
    e.stopPropagation();
});

4:纯Javascript版日期控件

添加引用

<link type="text/css" rel="Stylesheet" href="../Include/Styles/MTHUI_PC_Date.css" />
<script src="../Include/js/MTH_Base_3.x.js" type="text/javascript"></script>
<script src="../Include/js/MTH_Date.js" type="text/javascript"></script>

HTML

<input type="text" data-datetype="Date" autocomplete="off" value=""/>
/*
data-datetype的取值及意义：
Year:年
Month:年月
Date:年月日
DateTime:年月日时分秒

添加Autocomplete属性目的是为了防止输入框的自动填充功能与时间控件有冲突。
*/

Javascript

$(function(){
    mth.Control();
    mth.Date({
        btnCls: "btn-success",
        todayCls: "btn-success",
        btnPreMon: "<span class='glyphicon glyphicon-arrow-left'></span>",
        btnNextMon: "<span class='glyphicon glyphicon-arrow-right'></span>"
    });
})

5:安利一个模板引擎控件art-template.js

注意事项

最新版本只支持IE9+以及主流的浏览器；推荐用3.0版本，支持IE7，CRM很多个页面已经run起来了，暂时没发现坑，api接口调用简单。

3.0版本