[转]YUI 菜鸟学堂 如何实现 [雅虎路客] 页面上的 切换城市 模块
如果你是高手，就不用往下看了。
雅虎路客 上 切换城市 模块的实现。
1. Demo :
具体的Demo可以直接查看http://ditu.cn.yahoo.com/
2. 需求:
1. 对于比较热门的城市，直接在弹出的对话框中显示，并且提交到当前页面，后面添加一个.city的参数，后台可以获取.city，然后setcookie,同时按照这个城市来获取对应的数据。你可以看到不同的城市，显示的故事是不一样的。
2. 对于其他城市，需要点击 对话框 底部的 更多城市 到 更多城市的页面，并通过传递一个 .done的参数，在选择完成后还返回原先的页面。
3. 具体实现:
这个切换城市模块是使用 YUI来实现的，所以需要包含如下的几个YUI JS 文件:
<script type="text/javascript" src="http://cn.yimg.com/i/js/1_1_0/ycnlib.js"></script>
<script type="text/javascript" src="http://cn.yimg.com/i/yui/2_2_2/container.js"></script>
这里弹出框使用了container中的dialog,所以要包含container.js 而ycnlib.js则是一些基本的必需的库文件。
同时container上还有一个默认的css文件，需要包含进来。
<link rel="stylesheet" type='text/css' href='http://cn.yimg.com/i/yui/2_2_2/1/container.css'/>
之后，我们对于dialog进行了一下封装，使其用起来更简单:
<script type="text/javascript" src="http://ditu.cn.yahoo.com/js/YAHOO/CN/map/public/dialog.js"></script>
再下来就是我们对于切换城市这个模块的代码了:
<script type="text/javascript" src="http://ditu.cn.yahoo.com/js/YAHOO/CN/map/citys/citys.js"></script>
同时添加了一个css文件(当然这个css 你自己是可以修改的):
<link rel="stylesheet" type="text/css" href="http://ditu.cn.yahoo.com/css/citys.css" media="screen" />
之后，只需要在body上添加一个 id 是 shiftCity 的 a 标签 就可以了:
<a href="#" id='shiftCity' onclick="return false;">[切换城市]</a>
最后别忘了，还需要加上:
<script type="text/javascript">
YAHOO.util.Event.on(window,"load",function(){ YAHOO.CN.map.citys.init("http://ditu.cn.yahoo.com")});
</script>
这个为了让 程序在 页面加载完成后，才去初始化那个对话框，否则在IE下有问题。
4. 全部的代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{font-size:12px;}
</style>
<link rel="stylesheet" type='text/css' href='http://cn.yimg.com/i/yui/2_2_2/1/container.css'/>
<link rel="stylesheet" type="text/css" href="http://ditu.cn.yahoo.com/css/citys.css" media="screen" />
<script type="text/javascript" src="http://cn.yimg.com/i/js/1_1_0/ycnlib.js"></script>
<script type="text/javascript" src="http://cn.yimg.com/i/yui/2_2_2/container.js"></script>
<script type="text/javascript" src="http://ditu.cn.yahoo.com/js/YAHOO/CN/map/public/dialog.js"></script>
<script type="text/javascript" src="http://ditu.cn.yahoo.com/js/YAHOO/CN/map/citys/citys.js"></script>
</head>
<body>
<script type="text/javascript">
YAHOO.util.Event.on(window,"load",function(){ YAHOO.CN.map.citys.init("http://ditu.cn.yahoo.com")});
</script>
<a href="#" id='shiftCity' onclick="return false;">[切换城市]</a>
</body>
</html>
将上面的代码，保存在 一个文件中，打开试试看，是不是就可以了。