搜索到
103
篇与
的结果
-
css实现文字两端对齐 以前做C/S开发的时候，经常使用填充空格的方式实现文字的两端对齐。但是有些时候，填充空格的方式，我们常常无法确认需要具体填充几个空格。通过text-align: justify，其实现的效果就是可以让一行文字两端对齐显示（文字内容要超过一行）。但是只有这个属性还是不行的，要使文字两端对齐，我们还得使用一个行内空标签来助阵，比如、等。小的Demo@section Style { <style rel="stylesheet" type="text/css">.div { width: 500px; border: 1px solid red; text-align: justify; margin-top: 15px; } div li { display: inline-block; width: 100%; } </style> } -
解决火狐浏览器英文+中文组合下载文件名不全的问题 今天在处理文件下载的时候，在IE下面没问题，但是火狐下面只显示文件名的的英文部分，丢失了中文部分以及文件扩展名。其实解决办法是很简单的，配置Content-disposition时采用下面的方法。response.setHeader("Content-disposition","attachment;filename=\"" + fileName + "\"");温馨提示设置response的Content-disposition项时，filename的值要加上双引号，如果不加双引号，在Firefox下载文件时，如果文件名是英文+中文的组合，比如：YXLM英雄联盟.docx,这个文件在Firefox下载时，下载下来的文件名只有YXLM了。只有加了双引号后，文件名才和代码设置的文件名一致。因为这个双引号是在字符串里，所需需要加反斜杠\来进行转义。
-
-
JS获取文本框选中的值 最近项目上有一个需求，是获取文本框选择的内容的值。这个功能用JS实现其实还是比较简单的，绑定事件，获取对应的文本框值就可以了。绑定事件我们在窗体加载完成后，绑定一个事件mouseup事件$(document).bind("mouseup", function(){ var text = GetSelectedText(); if (!(text == "" || text.indexOf(',') > -1 || text.length != 13)) { alert(text); } });使用function GetSelectedText() { var selText = ""; if (window.getSelection) { // all browsers, except IE before version 9 var sel = document.activeElement; if (sel.id =="BUSSINESSAPP-L-KT" && sel && (sel.tagName.toLowerCase() == "textarea" || (sel.tagName.toLowerCase() == "input" && sel.getAttribute("type").toLowerCase() == "text"))) { var text = sel.value; selText = text.substring( sel.selectionStart, sel.selectionEnd ); } else { var selRange = window.getSelection(); selText = selRange.toString(); } } else { if (document.getSelection) { // all browsers, except IE before version 9 range = document.getSelection(); selText = range.toString(); } else if (document.selection.createRange) { // IE below version 9 var range = document.selection.createRange(); selText = range.text; } } return selText; }
-
jquery.validate简单使用 jquery.validate插件可是使我们实现功能各种复杂功能的验证，而且jquery.validate插件使用非常简单插件安装<script src="js/jQuery/jquery-3.2.1.js" type="text/javascript"></script> <script src="js/jQuery/jquery.validate.js" type="text/javascript"></script> <script src="js/jQuery/messages_zh.js" type="text/javascript"></script>使用自带的验证规则jquery.validate自带了很多验证规则，包括是否数字，最大、最小字符长度，以及长度范围、是否邮箱、两个控件值是否相等等等。我们在项目上一般是习惯把验证放到js代码块中，如下是一个简单的用户注册页面的验证规则$(function(){ $("#singnUp").validate({ debug:true,//只验证 不提交表单 rules:{ firstName:{ required:true, minlength:2 }, lastName:{ required:true, maxlength:8 }, userName:{ required:true, minlength:5, maxlength:10 }, pwd:{ required:true, minlength:8, maxlength:20 }, pwd2:{ required:true, minlength:8, equtalTo:"#pwd" }, email:{ required:true, email:true }, zipCode:{ isZipCode:true } }, messages:{ firstName:{ required:"请输入用户姓", minlength:"用户名不能小于两位字符" } } }); }); </script> <style> .error{ color:red; } </style> <form action="" method="get" class="panel-body" id="singnUp"> <fieldset> <legend>用户注册</legend> <p> <label for="firstName">姓</label> <input type="text" id="firstName" name="firstName"/> </p> <p> <label for="lastName">名</label> <input type="text" id="lastName" name="lastName" /> </p> <p> <label for="userName">用户名</label> <input type="text" id="userName" name="userName" /> </p> <p> <label for="password">密码</label> <input type="password" id="pwd" name="pwd" /> </p> <p> <label for="pwd2">重复密码</label> <input type="password" id="pwd2" name="pwd2" /> </p> <p> <label for="email">邮箱</label> <input type="email" id="email" name="email" /> </p> <p> <label for="zipCode">邮政编码</label> <input type="text" id="zipCode" name="zipCode" /> </p> <button type="submit">提交</button> </fieldset> </form>添加自定义验证方法对于不能满足条件的验证，我们还可以添加自己的验证方法，如下：jQuery.validator.addMethod("isZipCode",function(value,element,param){ var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)) },'请输入正确的邮政编码'); 然后在验证规则中调用isZipCode:true就可以了其他一些属性在我们调试的过程中，常常是希望只触发验证条件，但是不提交表单，那么我们可以设置isDebug:true就可以了未完待续。。。。。。
-
javascript中undefined与null一些容易出错的地方 javascript中我们经常会用到undefined以及null，这两种类型还是存在区别的。之前因为在项目中一些特殊的地方涉及到判断是undefined还是null，结果就出现了一些问题。基础概念Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。使用区别我们使用if判断null与undefined是否相等时，if语句返回true，如果我们必须区分两种类型，可以使用===进行比较，或者通过typeof获取到数据类型，然后用==进行判断。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>首页</title> <!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：引入js --> <script src="js/jQuery/jquery-3.2.1.js" type="text/javascript"></script> <script src="js/bootstrap/bootstrap.js" type="text/javascript"></script> <script src="js/bootstrap-select/bootstrap-select.js" type="text/javascript"></script> <script src="js/bootstrap-select/defaults-zh_CN.js" type="text/javascript"></script> <!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：引入css --> <link href="css/bootstrap/bootstrap.css" rel="stylesheet" /> <link href="css/bootstrap/bootstrap-theme.min.css" rel="stylesheet" /> <link href="css/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" /> <!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：自定义js --> <script type="text/javascript"> $(function() { $("#btn1").click(function(event) { /* Act on the event */ alert(null==undefined);//true }); $("#btn2").click(function(event) { /* Act on the event */ alert(null===undefined);//false }); $("#btn3").click(function(event) { /* Act on the event */ alert(typeof(null) == typeof(undefined));//false alert(typeof(null));//object alert(typeof(undefined));//undefined }); }); </script> </head> <body> <div class="panel-body"> <button type="button" class="btn btn-success" id="btn1" style="margin-top:10px">使用==判断是否相等</button> <br/> <button type="button" class="btn btn-danger" id="btn2" style="margin-top:10px">使用===判断是否相等</button> <br/> <button type="button" class="btn btn-info" id="btn3" style="margin-top:10px">使用typeof判断</button> </div> </body> </html>
-
js实现浏览器全屏以及退出全屏 东西很简单，直接上代码/* * 全屏 */ function fullScreen(ele) { var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled; var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement; if (fullScreenEnabled === undefined || fullScreenEnabled) { if (isFullScreen === undefined) { if (ele.requestFullScreen) { ele.requestFullScreen(); } else if (ele.webkitRequestFullScreen) { ele.webkitRequestFullScreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.msRequestFullScreen) { ele.msRequestFullScreen(); } else { console.log('不存在进入全屏的方法！ => undefined'); } } else if (isFullScreen === null) { if (ele.requestFullScreen) { ele.requestFullScreen(); } else if (ele.webkitRequestFullScreen) { ele.webkitRequestFullScreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.msRequestFullScreen) { ele.msRequestFullScreen(); } else { console.log('不存在进入全屏的方法！ => null'); } } else { console.log('元素已经是全屏状态了！'); return true; } } else { console.log('不支持全屏模式！'); } } /* * 退出全屏 */ function exitFullScreen() { var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled; var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement; if (fullScreenEnabled === undefined || fullScreenEnabled) { if (isFullScreen === undefined) { if (document.exitFullScreen) { document.exitFullScreen(); } else if (document.webkitExitFullScreen) { document.webkitExitFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullScreen) { document.msExitFullScreen(); } else if (document.msCancelFullScreen) { document.msCancelFullScreen(); } else { console.log('不存在退出全屏的方法！ => undefined'); } } else if (isFullScreen !== null) { if (document.exitFullScreen) { document.exitFullScreen(); } else if (document.webkitExitFullScreen) { document.webkitExitFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullScreen) { document.msExitFullScreen(); } else if (document.msCancelFullScreen) { document.msCancelFullScreen(); } else { console.log('不存在退出全屏的方法！ => null'); } } else { console.log('元素已经是非全屏状态了！'); return true; } } else { console.log('不支持全屏模式！'); } }
-
解决IE8下window.open打开的窗体不是当前窗口的问题 项目中有一个功能是通过扫描枪，扫描条形码之后，打开单据的功能。此功能使用的方法是window.open()，今天客户反馈在IE8下面，打开窗体之后，打开的页面接着被最小化了。问题分析通过分析代码，确定了是window.open()方法导致的这个问题，但是当我仔细查看页面的输入框时，发现每次输入框会自动被清空，其实原因是因为keydown事件中回车之后，当前窗体被重新加载了。解决思路其实发现了问题，解决就比较容易了。既然是窗体重新刷新导致窗体又变成了当前的窗体，那么我们在window.open()方法之后，阻止其他事件就可以了上代码我们定义一个阻止事件继续走的方法function stopDefault(e) { //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault(); } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false; } return false; }在window.open()方法后面，调用定义的阻止事件的方法var flag = window.open("url"); if (flag == null) { alert("您的浏览器启用弹出窗口过滤功能！\n请暂时先关闭此功能！"); } stopDefault(e.event);
-
bootstrap-select样式设置 bootstrap-select支持各种样式设置，通过这些属性，我们可以自己定制各式各样的显示格式。下面的代码只是一些简单的演示，有兴趣的，可以自己尝试一下<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">只显示默认title</span> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-style="btn-success"> <option value="0" class="special">橘子</option> <option value="1" style="color: #008000;">苹果</option> <option value="2" data-icon="glyphicon-heart">香蕉</option> <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option> </select> </div> </div>
-
bootstrap-select基本用法（下篇） 设置选中值的格式通过count属性，设置显示内容为选中项的数目<!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：设置选中内容展示格式 --> <div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">显示选中数目</span> <!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：如果选中了一条，显示选中的内容，如果选中多条，显示选中条数 --> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-selected-text-format="count"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </select> </div> </div>设置显示内容为选中项的内容<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">显示选中项的内容</span> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-selected-text-format="value"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </select> </div> </div>设置由显示选中项的值到显示条数到改变<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">count > x</span> <!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：当选中条数大于设置的x值时，由显示选中项的内容，变为显示条数 --> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-selected-text-format="count>3"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> <option value="3">芒果</option> </select> </div> </div>设置显示静态内容<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">只显示默认title</span> <!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：内容不跟随选中项发生改变 --> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-selected-text-format="static" title="我不会改变"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> <option value="3">芒果</option> </select> </div> </div>设置全选/全不选按钮<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">只显示默认title</span> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true"> <option value="0" class="special">橘子</option> <option value="1" style="color: #008000;">苹果</option> <option value="2" data-icon="glyphicon-heart">香蕉</option> <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option> </select> </div> </div>设置分割线<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">设置分割线</span> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true"> <option value="0" class="special">橘子</option> <option value="1" style="color: #008000;">苹果</option> <option data-divider="true"></option> <option value="2" data-icon="glyphicon-heart">香蕉</option> <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option> </select> </div> </div>设置选择项不可用<div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">设置选择项是否可用</span> </div> <div class="panel-body"> <select class="selectpicker" multiple="true" data-style="btn-success" data-actions-box="true"> <option value="0" class="special" disabled>橘子</option> <option value="1" style="color: #008000;">苹果</option> <option data-divider="true"></option> <option value="2" data-icon="glyphicon-heart">香蕉</option> <option value="3" data-content="<span class='label label-success'>芒果</span>">芒果</option> </select> </div> </div>
-
bootstrap-select基本用法（上篇） bootstrap-select是结合bootstrap使用的一款功能十分强大的下拉框选择插件。可以实现单选、多选、查询、分组以及限制选择个数等多种功能。单选功能<!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：基本选择 --> <div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">基本选择</span> </div> <div class="panel-body"> <select class="selectpicker" id="singleSelect"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </select> </div> </div>分组<!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：多选 --> <div class="form-group"> <div class="panel-heading"> <span class="glyphicon glyphicon-search">分组</span> </div> <div class="panel-body"> <select class="selectpicker" id="singleGroupSelect"> <optgroup label="水果"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </optgroup> <optgroup label="蔬菜"> <option value="3">土豆</option> <option value="4">芹菜</option> </optgroup> </select> </div> </div>多选<!-- 作者：iamlisen@163.com 时间：2017-07-25 描述：多选 --> <div class="panel-heading"> <span class="glyphicon glyphicon-search">多选</span> </div> <div class="panel-body"> <select class="selectpicker" id="multipleGroupSelect" multiple="true"> <optgroup label="水果"> <option value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </optgroup> <optgroup label="蔬菜"> <option value="3">土豆</option> <option value="4">芹菜</option> </optgroup> </select> </div> </div>获取选中的值//多选 $("#multipleGroupSelect").change(function(){ alert($("#multipleGroupSelect").val()); });返回值是以,分隔的字符串查询<!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：data-tokens设置查询关键字，例如下面的查询橘子，通过查询条件“查询橘子”可以查询到橘子 --> <div class="panel-heading"> <span class="glyphicon glyphicon-search">查询</span> </div> <div class="panel-body"> <select class="selectpicker" id="multipleGroupSelect" data-live-search="true" multiple="true"> <optgroup label="水果"> <option data-tokens="查询橘子" value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </optgroup> <optgroup label="蔬菜"> <option value="3">土豆</option> <option value="4">芹菜</option> </optgroup> </select> </div> </div>设置最大选中数目<!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：设置最大选中条数 --> <div class="panel-heading"> <span class="glyphicon glyphicon-search">设置最大选中条数</span> </div> <div class="panel-body"> <select class="selectpicker" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true"> <optgroup label="水果"> <option data-tokens="查询橘子" value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </optgroup> <optgroup label="蔬菜"> <option value="3">土豆</option> <option value="4">芹菜</option> </optgroup> </select> </div> </div>设置没有选中的显示内容<!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：设置没有选中项的默认值 --> <div class="panel-heading"> <span class="glyphicon glyphicon-search">设置没有选中项的默认值</span> </div> <div class="panel-body"> <select class="selectpicker" title="===请选择===" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true"> <optgroup label="水果"> <option data-tokens="查询橘子" value="0">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </optgroup> <optgroup label="蔬菜"> <option value="3">土豆</option> <option value="4">芹菜</option> </optgroup> </select> </div> </div>设置每一项的查询关键字<!-- 作者：iamlisen@163.com 时间：2017-07-26 描述：通过设置option的title，设置每一个选中项选中后显示的内容 --> <div class="panel-heading"> <span class="glyphicon glyphicon-search">设置没有选中项的默认值</span> </div> <div class="panel-body"> <select class="selectpicker" title="===请选择===" id="multipleGroupSelect" data-live-search="true" data-max-options="2" multiple="true"> <optgroup label="水果"> <option data-tokens="查询橘子" value="0" title="你选择了橘子">橘子</option> <option value="1">苹果</option> <option value="2">香蕉</option> </optgroup> <optgroup label="蔬菜"> <option value="3">土豆</option> <option value="4">芹菜</option> </optgroup> </select> </div> </div>
-
Bootstrap-select多选下拉框插件 这个下拉框支持多选，而且是bootstrap风格，做出来的东西也比较美观。大家可以先看一下下面的演示图片。个人感觉还是很美的。近期抽时间回多多学习一下这个插件的使用。使用方法先附上一个官网的地址，感兴趣的可以去看一下http://silviomoreto.github.io/bootstrap-select/需要引入的js以及css<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <!-- (Optional) Latest compiled and minified JavaScript translation files --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>简单的使用<select id="selectpicker1" class="selectpicker form-control" multiple data-live-search="false"> <option value="0">苹果</option> <option value="0">菠萝</option> <option value="0">香蕉</option> <option value="0">哈密瓜</option> </select>获取值$("#XXX").val()设置值$("#selectpicker1").selectpicker({ 'selectText':'苹果' });其他操作var str='3,4,5,6'; var arr=str.split(','); $('#usertype').selectpicker('val', arr);
