常用css和js组件

1 . input框中插入图标

 <div class="col-sm-12 col-xs-12 setLineHeight">
       <div class="col-sm-4 col-xs-4 textRight"><span>用户名:</span>
       </div>
       <div class="col-sm-6 col-xs-6 " style="padding-right: 0">
        　　<input type="text" class="inputHeight form-control" style="padding-right: 30px; width: 90%">
           <span class="glyphicon glyphicon-folder-open" style="position: absolute;right: 24px;vertical-align: middle;margin-top: 8px;"></span>
       </div>
  </div>

效果图：

 

2 . radio和文字在同一行显示

  <div class="col-sm-12 col-xs-12 setLineHeight">
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" style="
    vertical-align: middle;
    margin-top: 9px;
"> 2
                    </label>
                </div>

 

3.JavaScript长按事件

<div style="width:100%; height:100px; background-color:#CCC;" ontouchstart="gtouchstart()"
         ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我
    </div>

var timeOutEvent = 0;//定时器
    //开始按
    function gtouchstart() {
        timeOutEvent = setTimeout("longPress()", 500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
        return false;
    }

    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    function gtouchend() {
        clearTimeout(timeOutEvent);//清除定时器
        if (timeOutEvent != 0) {
            //这里写要执行的内容（尤如onclick事件）
            alert("你这是点击，不是长按");
        }
        return false;
    };

    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    function gtouchmove() {
        clearTimeout(timeOutEvent);//清除定时器
        timeOutEvent = 0;

    };

    //真正长按后应该执行的内容
    function longPress() {
        timeOutEvent = 0;
        //执行长按要执行的内容，如弹出菜单
        alert("长按事件触发发");
    }