zoukankan      html  css  js  c++  java
  • 常用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; 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="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("长按事件触发发");
        }
  • 相关阅读:
    js 运动框架
    js 去掉字符中两边的空格
    js 去掉字符中所有空格
    vue移动端webview视频轻应用
    vue绑定v-modal布尔值到checkbox后异步,部分手机更新不及时问题
    使用原生js的scrollTop,刷新进入页面定位到某一个dom元素
    会议管理项目总结
    ionic1上拉刷新,下拉加载,安卓问题解决
    jquery $(document).ready() 与window.onload的区别
    vue2+express4图片上传
  • 原文地址:https://www.cnblogs.com/m-bianbian/p/7478056.html
Copyright © 2011-2022 走看看