“记住我”功能有许多种方式,本部分介绍两种
cookie 引用jQuery.cookie.js可以用cookie在浏览器端记录。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>其中keyword是变量,前后用“+”拼接字符串
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朋友,解决了一个大问题。
jQuery取input中的value值,直接用 ( " p " ) . v a l u e 是 取 不 到 的 , 用 ("p").value是取不到的,用 ("p").value是取不到的,用(“p”)[0].value可得
由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)); } });