前端技术博客
2017-05-04 10:24
309 查看
- 一、有关“记住我”功能
“记住我”功能有许多种方式，本部分介绍两种1. cookie
引用jQuery.cookie.js可以用cookie在浏览器端记录。
2. localsession
在服务器端记录用户信息（这个不太确定），是HTML5的本地存储，使用localStorage对象将WEB数据持久化在本地。但这种存储方式会带来新的安全问题。先贴一段代码如下：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
if (localStorage.chkbx && localStorage.chkbx != '') {
$('#remember_me').attr('checked', 'checked');
$('#username').val(localStorage.usrname);
$('#pass').val(localStorage.pass);
} else {
$('#remember_me').removeAttr('checked');
$('#username').val('');
$('#pass').val('');
}
$('#remember_me').click(function() {
if ($('#remember_me').is(':checked')) {
// save username and password
localStorage.usrname = $('#username').val();
localStorage.pass = $('#pass').val();
localStorage.chkbx = $('#remember_me').val();
} else {
localStorage.usrname = '';
localStorage.pass = '';
localStorage.chkbx = '';
}
});
});
</script>
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email address" id='username'>
<input type="password" class="input-block-level" placeholder="Password" id="pass">
<label class="checkbox">
<input type="checkbox" value="remember-me" id="remember_me"> Remember me
</label>
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>
</div>测试可用，后期有更好更安全的解决方式，再陆续更新
二、页面跳转
直接贴代码：function onclick(){
window.location.href = "http://www.baidu.com";
}三、搜索提示功能
纠结了半天，解决了下拉框的问题，除了样式太丑，其他都搞定了，但代码移植之后不成功，所以后半天还得继续纠结，先记录下来这个搜索提示的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索</title>
<meta name="description" content=" 内容介绍不超过100个中文">
<meta name="keywords" content=" 内容相关关键词3-5个">
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="gover_search">
<div class="gover_search_form clearfix">
<span class="search_t">关键词匹配搜索</span>
<input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" />
<button type="submit" class="search_btn">搜索</button>
<div class="search_suggest" id="gov_search_suggest">
<ul>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//实现搜索输入框的输入提示js类
function oSearchSuggest(searchFuc){
var input = $('#gover_search_key');
var suggestWrap = $('#gov_search_suggest');
var key = "";
var init = function(){
input.bind('keyup',sendKeyWord);
input.bind('blur',function(){setTimeout(hideSuggest,100);})
}
var hideSuggest = function(){
suggestWrap.hide();
}
//发送请求，根据关键字到后台查询
var sendKeyWord = function(event){
//键盘选择下拉项
if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40){
var current = suggestWrap.find('li.hover');
if(event.keyCode == 38){
if(current.length>0){
var prevLi = current.removeClass('hover').prev();
if(prevLi.length>0){
prevLi.addClass('hover');
input.val(prevLi.html());
}
}else{
var last = suggestWrap.find('li:last');
last.addClass('hover');
input.val(last.html());
}
}else if(event.keyCode == 40){
if(current.length>0){
var nextLi = current.removeClass('hover').next();
if(nextLi.length>0){
nextLi.addClass('hover');
input.val(nextLi.html());
}
}else{
var first = suggestWrap.find('li:first');
first.addClass('hover');
input.val(first.html());
}
}
//输入字符
}else{
var valText = $.trim(input.val());
if(valText ==''||valText==key){
return;
}
searchFuc(valText);
key = valText;
}
}
//请求返回后，执行数据展示
this.dataDisplay = function(data){
if(data.length<=0){
suggestWrap.hide();
return;
}
//往搜索框下拉建议显示栏中添加条目并显示
var li;
var tmpFrag = document.createDocumentFragment();
suggestWrap.find('ul').html('');
for(var i=0; i<data.length; i++){
li = document.createElement('LI');
li.innerHTML = data[i];
tmpFrag.appendChild(li);
}
suggestWrap.find('ul').append(tmpFrag);
suggestWrap.show();
//为下拉选项绑定鼠标事件
suggestWrap.find('li').hover(function(){
suggestWrap.find('li').removeClass('hover');
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
}).bind('click',function(){
input.val(this.innerHTML);
suggestWrap.hide();
});
}
init();
};
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名
var searchSuggest = new oSearchSuggest(sendKeyWordToBack);
//这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求
//参数为一个字符串，是搜索输入框中当前的内容
function sendKeyWordToBack(keyword){
/* var obj = {
"keyword" : keyword
};
$.ajax({
type: "POST",
url: "${ctx}/front/suqiu2/search/prompt-keyword.action",
async:false,
data: obj,
dataType: "json",
success: function(data){
//var json = eval("("+data+")");
var key=data.split(",");
var aData = [];
for(var i=0;i<key.length;i++){
//以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回
if(key[i]!=""){
aData.push(key[i]);
}
}
//将返回的数据传递给实现搜索输入框的输入提示js类
searchSuggest.dataDisplay(aData);
}
}); */
//以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回
var aData = [];
aData.push(keyword+'接口1');
aData.push(keyword+'接口2');
aData.push(keyword+'接口3');
aData.push(keyword+'接口4');
aData.push(keyword+'接口5');
aData.push(keyword+'接口3');
//将返回的数据传递给实现搜索输入框的输入提示js类
searchSuggest.dataDisplay(aData);
}
</script>
</body>
</html>四、url中有变量的问题
url: "search/searchHint?data="+keyword +"",
其中keyword是变量，前后用“+”拼接字符串
五、echarts 添加标签“全选”
echarts功能不太完善，一直有很多bug，比如下面：1.
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param){这个LENGEND_SELECTED，移植到自己做的项目中居然不work，但在http://echarts.baidu.com:8897/echarts2/doc/example/legend.html 的demo中是可行的,这是其一；
2. 其二是直接在legend的data中加名称“测试”，如下：
legend: {
data: [
'降水量','最高气温', '最低气温','测试'
]
},但移植出来就不可用，除非series也加入“测试”相关的内容。
3.研究了很久之后，不，应该说查了很多资料之后，终于找到了一个可行的demo，直接把网站贴出来吧：http://gallery.echartsjs.com/editor.html?c=xSJ3fpfG6
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎','全选']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'全选',
type:'line'
},
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
};
//全选处理逻辑
var selAll = '全选';
var selFlag = false;
myChart.on('legendselectchanged', function (params) {
//legend 全选操作
if(params.name == selAll){
selFlag = !selFlag;//全选，全不选切换
var dynamicSelected = {};
//设置全选
for(var index in params.selected){
dynamicSelected[index] = selFlag;
}
//重绘echarts
myChart.setOption({legend:{
selected:dynamicSelected
}});
}
});亲测可用，感谢zjfromzero朋友，解决了一个大问题。
六、input取值
jQuery取input中的value值，直接用("p").value是取不到的，用(“p”)[0].value可得
七、table设置固定宽度
table{
min-width: 100%;
}
td{
min-width: 100px;
}
.table-container{
overflow:auto;
display: block;
}八、ajax请求不携带session导致重定向
由login页面登录进去之后，以后的每次ajax请求都需要带上sessionid值，意思就是带上许可证，才能获得服务器端的数据。简单的ajax请求如下：$.ajax({
type: 'GET',
url: this.path+'console/statusInfo',
success:function(data) {
console.log("请求用户信息：----"+JSON.stringify(data));
}
})这种ajax请求没有设置cookie，不携带sessionid，会导致302重定向，循环login请求。但具体cookie和session什么关系，只知道cookie是浏览器端，session是服务器端生成的，具体的回头还得再研究研究。
总之，ajax请求里面加上一句如下，就可以了
$.ajax({
type: 'GET',
xhrFields: {
withCredentials: true
},
url: this.path+'console/statusInfo',
success:function(data) {
console.log("请求用户信息：----"+JSON.stringify(data));
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web前端开发技术网站及博客网址汇总
- 前端技术博客
- jQuery-1.2.6新特性及主要改变. - (前端技术)--读者的进步速度远大于博客的进步速度。
- 前端技术博客 推荐网站
- 欢迎来的我的前端技术博客
- [Web前端技术教学]实现文字阴影-博客指定作业
- [Web前端技术教学]利用行内CSS技术对CSDN博客的细致美化
- 国内技术团队博客（全都是前端！）
- nodejs的npm安装模块时候报错：npm ERR! Error: CERT_NOT_YET_VALID的解决方法 - 包子博客 _ 关注互联网前端、开发、SEO、移动互联网应用技术
- 前端技术博客
- it类技术博客网址小计----前端相关
- 前端方向值得关注的技术博客
- 前端技术博客&文章记录
- 专注前端技术的博客，CSSRAIN.CN
- 【同行说技术】前端看过来-教你玩重构、搭博客、学开发自动化
- 国内技术团队博客盘点（不只是前端！）
- 国内技术团队博客（全都是前端！）
- 前端技术博客学习
- 自己的技术博客开张了，呵呵，就当是个技术资料备份吧
- 庆祝我的技术博客开张