工作总结2017.06.07

1、发送验证码 用input标签。

2、一个模仿input placeholder效果的js.

因为placeholder在ie8下不能用，当时手机端还是建议用placeholder效果，因为方便。可以配合修改placeholder颜色的css。

::-webkit-input-placeholder { /* WebKit browsers */color:#CCCCCC;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#CCCCCC;}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:#CCCCCC;}
:-ms-input-placeholder { /* Internet Explorer 10+ */color:#CCCCCC;}

为了不使所有的input的placeholder都改变了默认颜色，可以加上上下级。

pc端模仿placeholder的js：

    var placehode_index;
    function foucsdo(obj,arr,that){
        placehode_index=$(obj).index($(that));
        if($(that).val()==arr[placehode_index]){
            $(that).val('').css('color','#333');
        };
    };
    function blurdo(obj,arr,that){
        placehode_index=$(obj).index($(that));
        if($(that).val()==''){
            $(that).val(arr[placehode_index]).css('color','#999');
        };
    };
    
    var arr=['真实姓名（必填）','身份证号（必填）','借记卡卡号（必填）'];
    $('._placehoder').bind('blur',function(){blurdo('._placehoder',arr,this)}).bind('focus',function(){foucsdo('._placehoder',arr,this)});

将需要的input的内容逐个加入到 自定义的arr中，arr名字自己起；

将需要的input加上同一个类名，类似'._placehoder'，模仿着绑定事件。

3、去掉前后空格

//    input和textarea去掉前后空格
    $('.nu_cg_conright input').bind('blur', function() {
        $(this).val($(this).val().replace(/^\s*/, ''));
        $(this).val($(this).val().replace(/\s*$/, ''));
    });

4、jq分页插件

jquery.z-pager.js

$(".cyz_pager")[0]&&$(".cyz_pager").zPager({
            totalData: 50,
            pageData: 4, //每页数据条数
            current: 1, //当前页码数
            pageStep: 6, //当前可见最多页码个数
            minPage: 4, //最小页码数，页码小于此数值则不显示上下分页按钮
            active: 'current', //当前页码样式
            prevBtn: 'pg-prev', //上一页按钮
            nextBtn: 'pg-next', //下一页按钮
            btnBool: true, //是否显示上一页下一页
            firstBtn: 'pg-first', //第一页按钮
            lastBtn: 'pg-last', //最后一页按钮
            btnShow: false, //是否显示第一页和最后一页按钮
            disabled: true, //按钮失效样式
            ajaxSetData: false, //是否使用ajax获取数据 此属性为真时需要url和htmlBox不为空
            url: '', //ajax路由
            htmlBox: '' //ajax数据写入容器
        });

$(".cyz_pager")[0]&&相当如 if 这个元素存在，再执行后面的分页。
引入

<script type="text/javascript" src="js/jquerypager.js"></script>

5、利用swf + js 实现文本复制

//利用swf + js 实现文本复制
if($('#share_url')[0]){
function fzinit() {
ZeroClipboard.setMoviePath("js/ZeroClipboard.swf")
var clip2 = new ZeroClipboard.Client();
clip2.setHandCursor(true);
clip2.setText($('#url_txt').text());
clip2.addEventListener( "mouseUp", function(client) {
alert("复制链接成功！");
});
clip2.glue("share_url");
$(window).resize(function(){
clip2.reposition();
}); 
};
fzinit();
};

<p class="wdzh_wdyq_wxrightinput url_txt" id="url_txt">https://www.rongtuojinrong.com/index/www.rongtuojinrong.com/index</p>
<div class="wdzh_wdyq_wxright_as clear">
                            <a class="wdzh_wdyq_wxright_wb" href="javascript:;">微博分享</a>
                            <a class="wdzh_wdyq_wxrightfz" id="share_url" href="javascript:;">复制邀请链接</a>
                        </div>

要复制的内容在 p 标签内；不能再单标签，如input中。加上id=“url_txt”

给点击事件 id=“shar_url”。

6、stop（）阻止

$('.wdzh_wdyqo_titspanhygxyj').bind('click',function(){
        $('.wdzh_wdyqo_hygxyj_rq').stop().toggle(500);
    });

7、弹窗 大div=遮罩的背景+中间的内部div（可以是多个）

背景P的 css样式

 position: fixed;
    width: 100%;
    background: #000;
    opacity: .6;
    filter: alpha(opacity=60);

定位都可以是绝对定位，宽高是100%，透明度要有兼容filter：alpha(opacity=60);

 

js控制点击时让一个显示，其他的兄弟都隐藏。

//    设置交易权限弹窗
    $('.wdzh_wdyq_jyqx_btn').bind('click',function(){
        $('.tanchuang_big_box').show();
        $('.tanyang_setjxqx').show().siblings('div').hide();
    });
    $('.tanyang_setjxqx_clobtn,.tanyang_setjxqx_okbtn').bind('click',function(){
        $('.tanchuang_big_box').hide();
    });

注意 半透明背景用的是p标签，只要不是div就可以，因为点击时让 某个显示，他的兄弟 div 都隐藏！