文档章节

一个简单的全站记忆功能

haidywei
 haidywei
发布于 2016/06/13 14:13
字数 675
阅读 5
收藏 0

        对于很多网站来说,能够记住用户的点击选项是有必要的,比如页面上的单选项、复选项、下拉框等,可是网站上可能有很多这种选项,如何能快速地、方便地实现这个功能呢?

        我的想法是,针对每一个选项进行JS代码编写太繁琐,最好能写一个通用的代码,然后在每个需要记忆的地方加个标识即可。

        一般来说,每个网站都会有一个公用的类似叫globle.js的一个文件,每个页面都会引用这个文件,那么不如就在这个文件中动点手脚吧,以下是我加在globle.js文件中的代码:

/* 
 * 缓存全站的复选框、单选框、下拉框值,再次打开时会默认上次的选项.默认在页面加载500毫秒后触发。
 * 也可以手动触发只对一个DIV操作,如有些页面需要某个动作触发时才会初始化,之后再加载cookie记忆
*/
cookiememory = function(div){
    var pre = (div==null ? '' : ('#' + div + ' ')),
        inputArr = $(pre + 'input[data-memory]'),
        selectArr = $(pre + "select[data-memory]");
    
    inputArr.each(function(idx,ele){
        var    eleType = $(ele).attr('type');
        
        if(eleType == 'checkbox'){//针对checkbox的处理
            memory4checkbox(ele);
        }else if(eleType == 'radio'){//针对radio的处理
            memory4radio(ele);
        }
    });
    
    selectArr.each(function(idx,ele){//针对下拉框的处理
        memory4selector(ele);
    });
};var memoryTimer = setTimeout("cookiememory()", 500);

function memory4radio(ele){
    var cookieName = $.cookie("userId") + '_' + $(ele).attr('data-memory'),//用户级别的cookie所以需要加上userid
        cookieVal = $.cookie(cookieName),
        radioName = $(ele).attr('name');
    
    //cookie值不为空时相应的radio为点选状态,否则第一个元素为点选状态
    if(!isNull(cookieVal)){
        $("input[name='" + radioName + "'][value=" + cookieVal +"]").prop("checked",true);
    }else{
        $("input[name='" + radioName + "']:first").prop("checked",true);
    }
    $(ele).trigger('change');
    
    //事件只需要绑定一次
    if($(ele).attr('bebound')){
        return;
    }else{
        $("input[name='" + radioName + "']").change(function(){
            $.cookie(cookieName,$("input[name='" + radioName + "']:checked").val());
        });
        $(ele).attr('bebound',true);
    }
        
}

function memory4checkbox(ele){
    var cookieName = $.cookie("userId") + '_' + $(ele).attr('data-memory'),//用户级别的cookie所以需要加上userid
        cookieVal = $.cookie(cookieName);
    
    if(cookieVal != undefined && cookieVal == 'false'){
        $(ele).prop('checked',false);
    }else{
        $(ele).prop('checked',true);
    }
    
    //事件只需要绑定一次
    if($(ele).attr('bebound')){
        return;
    }else{
        $(ele).on('click',function(){
            $.cookie(cookieName,$(ele).prop('checked'));
        });
        $(ele).attr('bebound',true);
    }
}

function memory4selector(ele){
    var cookieName = $.cookie("userId") + '_' + $(ele).attr('data-memory'),//用户级别的cookie所以需要加上userid
        cookieVal = $.cookie(cookieName);
    
    //事件只需要绑定一次
    if(!$(ele).attr('bebound')){
        $(ele).on('change',function(){
            if(isNull($(ele).val())){return}
            $.cookie(cookieName,$(ele).val());
        });
        $(ele).attr('bebound',true);
    }
    
    if(isNull(cookieVal)){return}
    if($(ele).find('option[value=' + cookieVal + ']').length < 1){return;}//cookie的值不在select值范围之内

    $(ele).val(cookieVal);
    $(ele).trigger('change');
}

 

以上的代码显示,只要你在需要记忆的控件上加一个“data-memory=cookiekey”就可以了,当然这个“cookiekey”每个不同并且要唯一。并且在设置完cookie值之后还会触发相应的click或change事件。

© 著作权归作者所有

共有 人打赏支持
haidywei
粉丝 0
博文 1
码字总数 675
作品 0
卢湾
私信 提问
新功能:阿里云负载均衡SLB支持HTTP访问强制转换HTTPS

1. Greeting 很高兴的告诉大家,阿里云负载均衡SLB已经在澳大利亚(悉尼)、日本(东京)、阿联酋(迪拜)、美国 (弗吉尼亚)、美国(硅谷)、马来西亚(吉隆坡)、德国(法兰克福)、新加坡...

添毅
2018/04/13
0
0
Gitblog 2.0 发布, Markdown 博客系统

一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难,无法实时预览的缺点,一...

jockchou
2015/07/31
4.1K
26
Gitblog官方网站发布上线

Gitblog官方网站发布上线 一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难...

jockchou
2015/08/03
0
0
Markdown 博客系统--Gitblog

一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难,无法实时预览的缺点,一...

jockchou
2015/07/31
6.2K
1
Gitblog 官网更新,Markdown 博客系统

Markdown 博客系统 Gitblog 官网更新! Gitblog官网 Gitblog使用手册 官方截图 一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你...

jockchou
2015/08/03
798
2

没有更多内容

加载失败,请刷新页面

加载更多

jdk8-64

https://pan.baidu.com/s/1sunIF-dBeyDKjFEpuYFyTQ 密码:jhuj

默克鱼
33分钟前
2
0
CentOS 7 网络设置及静态IP配置

一、 CentOS 7 网络设置 使用 CentOS 7 NetInstall(最小安装盘)安装的CentOS默认是没有配置网络的,可以使用 ping 试一下,结果肯定是不能执行的,ping 指定ip不通是没有网络,ping域名不通是...

calmsnow
36分钟前
1
0
前端未来几年的路该怎么走?

在知乎上看到这么一个问题,觉得很有意思,以下是原提问者的见解 过去五年前端的发展过程基本上是一个工程化的过程,框架和工程化工具层出不穷。 近两年其实发展已经比较迟滞了。 框架方面:基...

前端攻城小牛
38分钟前
5
0
LIst的逆向遍历

public class list_demo { public static void main(String[] args) {// TODO Auto-generated method stub List list=new ArrayList<>(); list.add("a"); list.add("b");......

南桥北木
今天
3
0
MySQL插入性能优化

MySQL插入性能优化 标签: 博客 [TOC] 可以从如下几个方面优化MySQL的插入性能。 代码优化 values 多个 即拼接成一个insert values sql, 例如 INSERT INTO MyTable ( Column1, Column2, Co...

蒋先生66
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部