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("长按事件触发发");
}

常用css和js组件的更多相关文章

  1. 常用css和js内容

    1.让一个200x200的div在不同分辨率屏幕上下左右居中. <div class="box"></div> <style type="t ...

  2. 前端常用框架和js插件 UI组件等

    前言:写这个随笔,是记录一下工作以来用到的各种框架.以免日后忘记: JS库: 1. jquery.js 2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是 ...

  3. amazeui中css组件、js组件、web组件的区别

    amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...

  4. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

  5. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  6. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

  7. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  8. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  9. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. Linux中的nc测试端口是否开放

    nc测试端口是否开放 在Linux中有一个级强大的网络工具netcat,在默认情况下面都是没有安装的,现在介绍一下安装过程 其实安装很简单 一.安装使用 1.只需输入命令yum安装: [root@SZ ...

  2. POJ-3616

    Milking Time Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10434   Accepted: 4378 Des ...

  3. 面试题: 数据库 sql优化 sql练习题 有用 学生表,课程表,成绩表,教师表 练习

    什么是存储过程?有哪些优缺点? 什么是存储过程?有哪些优缺点? 存储过程就像我们编程语言中的函数一样,封装了我们的代码(PLSQL.T-SQL). 存储过程的优点: 能够将代码封装起来 保存在数据库之 ...

  4. Apache2.2安装图解

    Apache2.2安装图解 2010-12-14 15:32:44|  分类: 不学无术之杂 |  标签:安装  端口  httpd  apache2.2  服务器   |字号 订阅 Apache音译 ...

  5. sql中的begin....end

    Begin...End之间的是一个语句块,一般Begin...End用在  ( 相当于  {})whileif等语句中在T_SQL中,if/while后只能紧跟一条sql语句,如果有多条则应该用Beg ...

  6. js中match的用法

    match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本.这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g. 一.如果 regexp 没 ...

  7. Socket()与WSASocket()的区别

    socket()   创建一个通讯端点并返回一个套接口.但是在socket库中例程在应用于阻塞套接口时会阻塞.     WSASocket()的发送操作和接收操作都可以被重叠使用.接收函数可以被多次调 ...

  8. GridView.SelectedIndex

    获取或设置 GridView 控件中的选中行的索引. C#复制 [System.ComponentModel.Bindable(true)] public virtual int SelectedIn ...

  9. CentOS 下部署Nginx+Gunicorn+Supervisor部署Flask项目

    原本之前有一部分东西是在Windows Server,但是由于Gunicorn不支持Windows部署起来颇为麻烦.最近转战CentOS,折腾一段时间,终于简单部署成功.CentOS新手,作为一个总结 ...

  10. MATLAB实现回归分析

    下面是一道例题