常用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("长按事件触发发");
}
常用css和js组件的更多相关文章
- 常用css和js内容
1.让一个200x200的div在不同分辨率屏幕上下左右居中. <div class="box"></div> <style type="t ...
- 前端常用框架和js插件 UI组件等
前言:写这个随笔,是记录一下工作以来用到的各种框架.以免日后忘记: JS库: 1. jquery.js 2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是 ...
- amazeui中css组件、js组件、web组件的区别
amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...
- vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期
目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- Apress 出版社电子书
http://www.apress.com/ 国外收费电子书网站,电子书权威,比国内的还便宜
- 《Java多线程编程核心技术》读后感(六)
多线程的死锁 package Second; public class DealThread implements Runnable { public String username; public ...
- 《Java多线程编程核心技术》读后感(二)
方法内的变量为线程安全 package Second; public class HasSelfPrivateNum { public void addI(String username) { try ...
- 【转】ssm整合
http://m.blog.csdn.net/article/details?id=44455235 SSM框架——详细整合教程(Spring+SpringMVC+MyBatis) 发表于2015/3 ...
- Working Experience - MoveWindow API 失败/无效
写在前面 当然过程不可能这么顺风顺水,毕竟对 Win32 API 不熟悉,并且国内搜索引擎和博客质量较低(不误导你就算好了),最后还是通过 Google -> StackOverflow 找到答 ...
- c++弱引用与强引用
https://www.zhihu.com/question/26851369 智能指针一个很重要的概念是"所有权",所有权意味着当这个智能指针被销毁的时候,它指向的内存(或其它资 ...
- ajax连接服务器框架
ajax.js function ajax(url, fnSucc, fnFaild) { //1.创建Ajax对象 if(window.XMLHttpRequest) { var oAjax=new ...
- python——类与对象
__init__ 方法: 1.Init 初始化方法的返回值必须是None. 3.类没有定义阶段,函数有定义阶段(不调用不执行). 实例化时触发__init__方法执行,为对象添加属性.[t1=stu ...
- day9函数作业详解
1.day9题目 1,整理函数相关知识点,写博客. 2,写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. 3,写函数,判断用户传入的对象(字符串.列表.元组 ...
- 74cms漏洞分析
很早以前的一个洞,看到很有意思就拿来看看 这是雨曾经审过的一个洞,因为读取方式很特别复现了一下 upload\plus\weixin.php public function responseMsg() ...