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. Apress 出版社电子书

    http://www.apress.com/ 国外收费电子书网站,电子书权威,比国内的还便宜

  2. 《Java多线程编程核心技术》读后感(六)

    多线程的死锁 package Second; public class DealThread implements Runnable { public String username; public ...

  3. 《Java多线程编程核心技术》读后感(二)

    方法内的变量为线程安全 package Second; public class HasSelfPrivateNum { public void addI(String username) { try ...

  4. 【转】ssm整合

    http://m.blog.csdn.net/article/details?id=44455235 SSM框架——详细整合教程(Spring+SpringMVC+MyBatis) 发表于2015/3 ...

  5. Working Experience - MoveWindow API 失败/无效

    写在前面 当然过程不可能这么顺风顺水,毕竟对 Win32 API 不熟悉,并且国内搜索引擎和博客质量较低(不误导你就算好了),最后还是通过 Google -> StackOverflow 找到答 ...

  6. c++弱引用与强引用

    https://www.zhihu.com/question/26851369 智能指针一个很重要的概念是"所有权",所有权意味着当这个智能指针被销毁的时候,它指向的内存(或其它资 ...

  7. ajax连接服务器框架

    ajax.js function ajax(url, fnSucc, fnFaild) { //1.创建Ajax对象 if(window.XMLHttpRequest) { var oAjax=new ...

  8. python——类与对象

    __init__ 方法: 1.Init  初始化方法的返回值必须是None. 3.类没有定义阶段,函数有定义阶段(不调用不执行). 实例化时触发__init__方法执行,为对象添加属性.[t1=stu ...

  9. day9函数作业详解

    1.day9题目 1,整理函数相关知识点,写博客. 2,写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. 3,写函数,判断用户传入的对象(字符串.列表.元组 ...

  10. 74cms漏洞分析

    很早以前的一个洞,看到很有意思就拿来看看 这是雨曾经审过的一个洞,因为读取方式很特别复现了一下 upload\plus\weixin.php public function responseMsg() ...