Simple上网导航--静态版
现在的网址导航显然是一个针对小白用户的网页大全，新闻、笑话、视频、黄段子要什么有什么，一个网址导航竟然也要滑动好多页。其实80%的功能我都用不到，但是它们却时刻展现在我的眼前。所以我决定做一个简洁清晰的网址导航，我的目标是牺牲20%的功能，提升80%的体验。本来是想给自己用的，用了一段时间感觉还不错，再让我回头用hao123会觉得特不清晰，干脆直接挂出来吧，反正也花不了几个钱，说不准还会有人喜欢。先看东西吧：Simple 最简洁的上网导航。可以随意拖动网址排序，删除或添加网址。Simple面向的用户是追求简洁实用的小众群体，并不针对小白用户，我觉得可能白领居多，不知是否合您的口味。跟大家简单分享一下纯静态版的实现，以及我的一些想法，本菜并不擅长做前端，如果出现低级错误，可不要贱笑啊。代码与最新的代码可能有所差别，可以直接查看源代码，注释比较详细。
一. 页面布局
<!doctype html>//省略了若干js,css引用,省略了不重要的页面元素
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Simple 最简洁的上网导航</title>
<link rel="shortcut icon" type="image/ico" href="img/favicon.ico" />
</head>
<body>
<div>
<div id="head">
<a href="#" onclick="showAbout()">帮助</a> <a href="#" onclick="reset()">重置</a>
</div>
<div id="logo">Simple</div>
<div id="trashContainer">
<img id="trash" src="img/trash.png"/><img id="trash_tip" src="img/trash_tip.png" style="display:none"/>
</div>
<div id="searchContainer">
<form id="searchForm" action="http://www.baidu.com/s" target="_blank">
<input id="search" type="text" name="wd" baiduSug="2" />
</form>
</div>
<div style="margin-top: 50px">
<ul id="sortable">
<li no="1"><a href="http://www.baidu.com" target="_blank" style="background: url(img/defaultIcon.png) no-repeat 0px 0px">百 度</a></li>
<!--省略无数网址-->
</ul>
</div>
</div>
<div id="about">
<ol>
<li>按空格键，可将焦点置于搜索框内; 按 Ctrl+<- 键，可清空搜索框</li>
<li>默认搜索为百度，关键词前空一格则使用google搜索</li>
<li>网址可拖动调换位置并随意删除</li>
<li>点击重置可恢复到最最原始的页面</li>
<li>看在我们连logo都省了的份上，推荐给身边的朋友吧</li>
</ol>
<a style="float: right; text-decoration: none;" href="#"
onclick="$('#about').hide('fast');">关闭</a>
</div>
</body>
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
</html>
先说说功能系数，功能系数是指模块功能所占整个页面功能的百分比。我要使页面布局符合每个模块的功能系数。也就是说某模块的功能系数越高，那么它的位置就越显眼，在用户视野范围内的时间就越长。
页面主要是三个部分：Logo文字、搜索框、网址列表。其中Logo文字以显示一秒随后隐藏的方式来展现，我觉得以这种方式来展现Logo显得页面不那么呆板，最终隐藏掉Logo显得整个页面又不乏稳重，同时还保持了页面的简洁。最有用的当然是搜索框和下边的网址导航了，搜索框没有搜索按钮，因为我觉得搜索按钮的功能系数也是非常的低，Simple针对的用户不是小白用户，所以直接省略掉搜索按钮。网址列表仍然没有达到我理想的效果，后续还会慢慢改善。如何保持网站列表清晰又不花哨是一个值得探讨的问题，相信会有一个比较好的方案。
还有一个删除网址的垃圾桶，Simple没有在周围添加一个设置图标按钮，点击后在网址边上显示删除符号。而是直接在拖动的过程中，显示垃圾桶提示用户可以删除，保持了页面的简洁。
帮助、重置、添加是这里最不常用的功能，所以让它靠在了右上方不起眼的地方，以与它们的功能系数匹配。
二. 搜索框功能
点开帮助看一下，会看到有几个关于搜索框的功能点。js库使用的是jquery和jquery.cookie。
平时用搜索的时候有两点稍有不便，一个是焦点问题。我们的页面加载完成就将焦点放在了搜索框中，直接输入即可。另外按下空格键就可以将焦点放到搜索框中，如果按了空格键并且搜索框没有焦点，则使它获得焦点。这里采用的是keyup事件，如果用keydown事件的话，等文本框获得焦点之后，空格字符仍然会输入到文本框中。
$(document).keyup(function(e) {
if (e.keyCode == 32 && document.activeElement.id != "search") {
$("#search").focus();
}
});
另一个是删除关键字问题，如果想删除关键字直接按ctrl+backspace即可，比ctrl+a再删除还方便，整个过程不需要鼠标的参与。是不是很爽啊，什么？你还是习惯咔咔咔咔摁删除？哎，习惯问题，我刚开始也是咔咔咔咔摁删除，但这是无意识的操作，如果有意识地用几次ctrl+backspace就会觉得由衷的爽。代码如下：
$("#search").keydown(
function(e) {
if (e.ctrlKey == 1 && e.keyCode == 8) {
$("#search").val("");
}
});
默认情况下按回车键调用百度搜索，搜索内容前置一个空格将调用google搜索，最近封网越加严重，google基本上不了了，裆中央看来是不想让同志们愉快地玩耍了。看代码吧，当看到有空格时就改变相应的属性，然后提交表单。这里为什么用表单而不用window.open呢？window.open兼容性有问题，至少在我的手机上点回车是不响应的。
$("#search").keydown(
function(e) {if (e.keyCode == 13) {
var keyword = $("#search").val();
if (keyword.length > 0 && keyword.charAt(0) == ' ') {
$("#searchForm").attr("action","https://www.google.com.hk/search");
$("#search").attr("name","q");
} else {
$("#searchForm").attr("action","http://www.baidu.com/s");
$("#search").attr("name","wd");
}
$("#searchForm").submit();
return false;
}
});
当你输入关键字时，会得到提示，这里的提示来自百度，在搜索框上加baiduSug属性，再引入下边的opensug.js即可，baiduSug等于1时，用鼠标点击提示项会自动提交表单，等于2时不会自动提交表单。提示框最下边的“百度搜索框提示”稍微有点别扭，可以把js下载下来将提示删除。我刚开始是这么干的，后来想了想又直接用了原版，万一百度找上门来让我赔钱就麻烦了。
<script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script>
三. Logo显示
logo显示有啥好说的？logo的颜色是会变的奥，不信明天再刷一下看看，我们让logo一周七个颜色，每天都不一样，每天带给大家不一样的心情。代码使logo透明度用一秒的时间从0变到1，停留一秒，再用一秒的时间从1变到0。
function loadLogo() {
var colorArray = [ "#45b97c", "green", "violet", "#faa755", "#6950a1",
"#4c4c4c", "#ef5b9c" ];
$("#logo").css("color", colorArray[new Date().getDay()]);
$("#logo").fadeTo(1000, 1, function() {
setTimeout(function() {
$("#logo").fadeTo(1000, 0);
}, 1000);
});
}
四. 网址添加
点击右上角的添加即可弹出网址添加框，输入网址或网站名会有提示，选择并回车即可。网址提示框的实现可以看我的另一篇博客《贡献个网址搜索提示框》，就不再重复介绍了。这里只看一下添加网址的逻辑。先是大概的判断一下输入，校验一下网址，校验逻辑不是很严格。然后将网址名字、网址、编号保存到cookie中，过期时间设为1000天，如果不设的话，默认关闭浏览器cookie就没了。中间省略部分函数的代码，太多了就不贴了，看名字应该知道是什么意思。
function add() {
var name = $("#mysite-name-add").val().trim();
var url = $("#mysite-url-add").val().trim();
if (name == '' || url == '') {
addtip("添加内容不能为空", "red");
return;
}
url = url.replace(/^(http|https):\/\//, '');
if (!isURL(url)) {
addtip("网址不规范", "red");
return;
}
if (name.length == 2)//网站名两个字时中间加一个空格
name = name[0] + ' ' + name[1];
var customArray;
var custom = $.cookie('custom');
if (custom == undefined)
customArray = [];
else
customArray = $.parseJSON(custom);
var currentNo = getCustomMaxNo() + 1;
customArray.push({
"name" : name,
"url" : url,
no : currentNo
});
//save to cookie
$.cookie('custom', JSON.stringify(customArray), {
expires : 1000
});
appendSite(currentNo, name, url);//添加网址
changeOrder();//保存网址顺序
$("#mysite-name-add").val('');
$("#mysite-url-add").val('');
$("#btn-site-back").focus();
addtip(name + " 添加成功", "green");
}
五. 网址拖动
每个人常用的网址都不一样，每个网址的使用频率也不一样，所以我们的网址可以直接拖动变换位置。拖动用到了jquery.ui库的sortable，可以任意拖动对象排序，并设置排序的一系列回调函数，changeOrder就是排序完毕并发生改变时的回调函数。每个网址都有一个编号，当位置变动时，将编号依次纪录到cookie中。
function changeOrder(){
var order=[];
$("#sortable li").each(function(){
order.push($(this).attr("no"));
});
$.cookie('order',JSON.stringify(order),{expires:1000});
}
六. 网址删除
网址拖动的过程中，搜索框上方会出现一个垃圾桶的图标，当网址覆盖垃圾桶时，垃圾桶的颜色会变成红色，这时候松开鼠标，网址就被删掉了。这里使用了jquery.ui库的droppable，它允许其他对象拖放到它上面，并提供了一系列的监听事件，例如覆盖、移除、放下等。垃圾桶是使用了两个不同的img，默认显示绿色的隐藏红色的。监听到开始拖放网址时(这个是sortable的事件)显示垃圾桶，网址覆盖到垃圾桶时隐藏绿色img显示红色img。如果松开鼠标直接将网址删除，并隐藏垃圾桶。这里为什么要选取两个img，而不是用一个img，监听到事件改变它的src属性呢？如果这样的话，每次改变src属性，浏览器都会重新请求资源，所以图片切换会跟不上。就算可以解决重新请求资源的问题，第一次改变src还是要请求的，这样会使第一次图片切换跟不上。所以直接用两个img，页面加载完成就开始请求图片，再切换时就不会因为请求资源带来延时了。看代码吧。
$("#trashContainer").droppable({
drop : function(event, ui) {
$(ui.draggable).remove();
deleteCustom($(ui.draggable).attr("no"));//如果网址是用户添加的，将在cookie中将添加的网址删除
$("#trash_tip").css("display", "none");
$("#trash").css("display", "block");
},
out : function(event, ui) {
$("#trash_tip").css("display", "none");
$("#trash").css("display", "block");
},
over : function(event, ui) {
$("#trash").css("display", "none");
$("#trash_tip").css("display", "block");
}
});
七. 网址加载
说一下我们的网址加载策略吧，像这些导航类的网站，默认网址列表可能会发生变化，比如我在后台删除或者添加了网址。为了最大化的提高用户体验，针对自定义过的用户，我们不让他受任何影响，没有自定义过的就按照后台定义的最新网址来。如果时间长了，后台变换的网址多了，想重新整理网址让所有用户都变为最新的网址列表，就变换网址版本，如果网址版本出现变化，不管有没有自定义都重新来过。如何实现呢，对于后台删除的网址，在网址对应的li上加个type="delete"属性，添加的网址直接添加即可。打开网站时，读取cookie，判断是否有版本变更，判断用户是否自定义过。如果没有自定义过将带有type="delete"属性的网址删除。如果自定义过，先把用户添加的网址追加到网址列表，再按保存的顺序把相应编号的网址移动到最后，可能还剩几个网址没有在order里出现，这些网址就是被用户删除掉的，算一下有几个，再把前边的几个删掉就ok了。
function loadWebSites() {
//判断版本变更
if ($.cookie('ver') != '0.9') {
$.removeCookie("order");
$.removeCookie("custom");
$.cookie('ver', '0.9', {
expires : 1000
});
}
//判断是否已经自定义过
var order = $.cookie('order');
if (order != undefined) {
var custom = $.cookie('custom');
if (custom != undefined) {
//add custom
$($.parseJSON(custom)).each(function() {
appendSite(this.no, this.name, this.url);
});
}
//change order
var orderObject = $.parseJSON(order)
$(orderObject).each(function() {
$("#sortable li[no='" + this + "']").appendTo($("#sortable"));
});
//remove deleted item
var deletedCount = $("#sortable li").length - orderObject.length;
$("#sortable li:lt(" + deletedCount + ")").remove();
} else {
$("#sortable li[type=delete]").remove();
}
}
今天是网站正式上线的第一天，后续还会不断地完善更新，欢迎大家提出任何建议。感兴趣的朋友请关注Simple上网导航的官方微博（左上角公告里有新浪微博关注按钮），我们会进行更多的互动。如果能分享给身边的朋友那更是感激不尽，先谢过了。其实文章和代码已经写好很久了，今天才上线是因为走了些弯路，以后再跟大家聊一下这些非技术方面的问题吧。
Simple上网导航--静态版的更多相关文章
- 金山注入浏览器默认开启上网导航 www.uu114.cn
金山注入浏览器默认开启上网导航 www.uu114.cn 今天突然发现我的电脑所有浏览器打开后,都会默认打开一个www.uu114.cn网站,chrome.firefox和IE都中招了.经过排查,发现 ...
- 详解Qt，并举例说明动态编译（shared）和静态编译（static）以及debug and release 编译版本区别（可产生静态版的Debug版本，需要把-release 改为 –debug-and-release）
作为初入Qt学习的新人,花了整整一两天时间,对Qt编译版本等问题进行了一步步探索,首先感谢网站博客中文章,开始也不是很明白一些几个问题: 1.Qt版本问题 作为初学者,可能下载时这么多版本,如何选择呢 ...
- linux虚拟机配置上网（静态IP）和配置tomcat服务环境
常用命令:vi或者vim编辑 ,按i编辑模式,按ecs进入基本模式,按 :w 保存:按 :wq 退出并保存:mv移动::q退出 :ln -sv apache-tomcat-8.0.24 tomca ...
- simple水平导航条
话不多说,看代码: html部分 <body> <ul> <li><a href="#">Home</a></li ...
- .NET Core微服务系列基础文章索引（目录导航Final版）
一.为啥要总结和收集这个系列? 今年从原来的Team里面被抽出来加入了新的Team,开始做Java微服务的开发工作,接触了Spring Boot, Spring Cloud等技术栈,对微服务这种架构有 ...
- .NET Core微服务系列基础文章索引（目录导航Draft版）
一.为啥要写这个系列? 今年从原来的Team里面被抽出来加入了新的Team,开始做Java微服务的开发工作,接触了Spring Boot, Spring Cloud等技术栈,对微服务这种架构有了一个感 ...
- 谷歌chrome浏览器被毒霸上网导航www.uu114.cn劫持 chrome://version命令行被篡改
问题描述 win10系统更新, 谷歌chrome浏览器打开后自动跳转到被劫持的网站.我的被hao123劫持, 瞬间对hao123的好感度下降浏览器输入chrome://version 可以看到“命令行 ...
- 解决Win8不能上网攻略第二版！三步秒杀原驱动
关于Win8消费者预览版的网卡驱动确实是令人头疼的事情,不少用户都抱怨无法联网而且驱动卸载十分麻烦.IT之家社区luoyousi 此前分享<图文教程:解决Win8消费者预览版不能上网问题> ...
- 网站导航不止有hao123！
网址导航对于我们上网而言非常的重要,在一定程度上决定了我们每天都在接触一些什么样的网络信息.我个人一直用的是hao123,总体感觉这个网址导航是非常的不错的,不过网址导航不只只有这一个好的更不只有这一 ...
随机推荐
- 20155337 《Java程序设计》实验三（敏捷开发与XP实践）实验报告
20155337 <Java程序设计>实验三(敏捷开发与XP实践)实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基 ...
- 20155339《java程序设计》第十二周课堂实践总结
Arrays和String单元测试 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arrays类 s ...
- 【转载】GC基本算法及C++GC机制
原文: GC基本算法及C++GC机制 阅读目录 前言 基本概念 有向可达图与根集 三种基本的垃圾收集算法及其改进算法 1.引用计数算法 2. Mark & Sweep 算法 3. 节点复制算法 ...
- Zabbix学习之路（二）之添加主机监控及自定义item监控
1.zabbix_get命令详解 安装zabbix-get命令 [root@linux-node1 ~]# yum install -y zabbix_get 参数说明: -s --host: 指定客 ...
- svn 安装 配置及同步
1.环境centos 2.安装svn #yum -y install subversion 3 查看版本 #svnserve --version 4 建立版本库目录 #mkdir /data/svnd ...
- 【JUC源码解析】CyclicBarrier
简介 CyclicBarrier,一个同步器,允许多个线程相互等待,直到达到一个公共屏障点. 概述 CyclicBarrier支持一个可选的 Runnable 命令,在一组线程中的最后一个线程到达之后 ...
- 了解ASP.NET Core 依赖注入，看这篇就够了
DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET Core的DI实现以及对实例 ...
- ES6的新特性（20）—— Module 的加载实现
Module 的加载实现 上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 浏览器加载 传统方法 HTML 网页中, ...
- 字符串拆分和拼接（含list拼接）---基于python
最近得一超长字符串如下: l=“5245474953544552207369703a3137322e3136312e31302e323232205349502f322e300d0a5669613a20 ...
- Table Tennis Game 2(找规律)
Description Misha and Vanya have played several table tennis sets. Each set consists of several serv ...