您的位置：首页 > Web前端 > JQuery

jquery插件select2源码解读(一) 概述

2017-06-23 16:48 435 查看

jquery插件select2源码解读(一)   概述

在使用select2插件之前，我们需熟悉相关的js框架，当然jquery必不可少。其中涉及部分框架比如：gruntfile，requirejs.当然在这里只用到了requirejs的部分功能。
先看一个简单的实例：从select2（当前版本4.0.3）官网下载源码，解压后，抽取相应的js和css文件。目录结构如下：



src文件夹可忽略（后面源码分析主要为了看代码方便分析），下面是index.html的内容：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="select2.css" type="text/css" />
</head>
<body>
select2测试：<select class="select2-container" name="test" id="test" style="width:180px;">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
<option value="test5">test5</option>
</select>
</body>
<script src="jquery-2.1.0.js" type="text/javascript"></script>
<script src="select2.full.js" type="text/javascript"></script>
<script type="text/javascript">
$('#test').select2();
</script>
</html>
测试界面展示：



当然这里只是做了简单的展示，其他功能在官网都可以看到。
接下来主要分析插件源码，其中包括：
         1：select2整个生成及运行的流程。
2：理解观察者模式的运用。
3：javascript原型方法的运用。
4：整个插件的设计的思考和总结。

4000
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航