那些年用过的一些前端框架

二、Swiper框架

2.1、Swiper框架介绍

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

简单来说，Swiper就是实现了一个滑动切换图片或面板的效果。显然是针对移动端的。

一些新闻图片排本等等是十分适用的，另外在其基础上，博主还封装成如下效果哦：

上图就是博主在Swiper基础上做成的省市区三联动效果，因此Swiper对于移动端的滑动场景还是十分有用的。

关于Swiper猿友们可以直接查看其官网：，官网配有详细介绍和使用API以及Swiper的下载。

2.2、Swiper实例

下面是博主的一个实例，在官网即可下载Swiper插件，实例只需要导入如下两个文件：

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>

实例效果：

本工程源码下载（解压浏览器打开即可）：

上面的实例过于简单了一些，其实猿友们可以对Swiper封装一下，如下效果是博主封装的一联动、二联动、三联动选择：、

由于这是工作上分装的代码，不方便提供源码，请谅解。这里只是提醒各位猿友可在其基础上分装出适合自己场景的代码。

三、Bootstrap框架

3.1、Bootstrap框架介绍

可能很多猿友们已经对Bootstrap框架有了一定的了解。

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

另外，通过Less可以对Bootstrap中所有的CSS变量进行修改，并依据自己的需求裁剪代码。

另外一个重点是，Bootstrap是自适应的，可以支持PC和移动端页面，自动调整其样式宽度高度，做PC端和移动端的网页都可以使用它。当然，完全做到自适应是不可能的，但是Bootstrap基本适用大部分场景了。

其官网链接：，另外，博主推荐另外一个网站配有其详细实例：，当然对于入门，这两者都是十分不错的选择。

获取Bootstrap，可到其官网如下链接：，我们不采用定制版，因此下载这个就好了：

3.2、Bootstrap实例

上面我们获取到Bootstrap的一些css、js和一些字体文件之后，我们还需要去下载jquery，因为Bootstrap是依赖jquery的，这里博主下载的是jquery-1.9.1.min.js，因为我下载的Bootstrap必须要jquery-1.9.1以上版本。

实例只需要导入如下几个文件：

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

实例效果展示：

上图只是一个简单的表单例子，但是Bootstrap是很好看的，这里由于博主时间有限，因此例子比较粗糙，主要以介绍Bootstrap为主。

本工程源码下载（解压浏览器打开即可）：

四、通过请求json文件获取省市区联动下拉小例子

4.1、将省市区的数据放到json文件里面，address.json：

4.2、前端通过如下jquery代码获取数据：

var ADDRESS_DATA_SOURCE = [];
function initAddressDataSource(){
  $.ajax({
      type: 'GET',
      url: 'json/address.json',
      async: false,
      dataType: 'json',
      success: function(data) {
        ADDRESS_DATA_SOURCE = data;
      },
      error: function(err) { // 备用方案
        alert('获取省市区数据失败,使用网络备用方案...');
      }
  });
}

4.3、实例演示

4.4、实例源码下载：

4.5、chrome跨域访问问题解决

chrome通过$.ajax请求本地的json文件数据，会出现如下错误：XMLHttpRequest cannot load：

上图错误是因为跨域请求资源导致的，由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表：