Apr 3, 2012

bootstrap学习系列(1) 让modal支持ajax内容

zzjin

ajaxbootstrapmodal

web技术

1451 Words

2012-04-03 08:00 +0800

最近为了不让手生,写的一个vod系统,前台直接使用了bootstrap的框架.还是很快的.至少整体的风格就差不到哪去了= =嗯嗯

历来的闲话是少不了的..不过这次准备简单粗暴的直接说明实际情况.

bootstrap带了很多风格和他的界面很搭调的jquery插件..而且全部的11个插件+trans的底裤的min版也才21K…对于jquery本身来说好多了….与jquery-ui相比的话那更是小得多啊~

额.貌似不自觉的给bootstrap打了个广告…额………

好吧.,终于说到这个故事的主线了…bootstrap里面自带了看似很炫的modal窗口.也就是常说的模态对话框.引用官方的介绍:


一个精简但是灵活的采用传统JS形式的插件,带来最低需求的功能与智能默认值.

好吧.不用白不用却被精简给伤到的表示果然你丫的够精简啊……

首先只能模态…只有移动显示方式(就是从顶部飞下来,或者木有特效)…几乎没有配置选项(什么背景颜色啊对话框颜色啊大小啊…)….给了几个事件的cb但是几乎没用……

不过好处还是有的.只用写html的tag就能实现对话框,然后如果按照他的需求写div的格式化出来的对话框样子还是很不错的(这么小点点的强迫症很给力啊!)

这个时候问题来了= =没有对加载的内容的cb.,默认的目标显示位置是一个display:none的div….这个显得就很不给力了..在目前ajax这么火的时候不支持动态加载..这个…(其实你丫就是被jquery给惯坏了吧!(似乎在哪听过这句话?))

不过万能的Jqury主啊,在您的光辉之下,万事都成为了可能……

上帝说:要有动态,于是modal便有了dynamic load(喂!)

有了各种cb和handle之后,给modal加上动态ajx就像到小区门口收一个快点那么简单…

  1. 首先呢.考虑在html中有这个东西:
    <!-- 我是撑场面的注释条,没有的话wp显示单行过长的<a>;会出问题 -->;
<a class="btn-info" href="/path/to/ajax/info.php" data-toggle="modal" data-target="#infoModal">;给爷动态信息</a>;

    其实就是简单表示这是个modal按钮.用的是原始的bootstrap方式.不过加上了htrf的标签表示要加载内容的url.

  2. 然后还是标准的荣对应的容器来接纳要显示的信息:

    <!-- 是我,撑场面的注释条君 -->;
<div class="modal fade" id="infoModal">;</div>;

    注意这里的id编号要和上面的data-targe里面的相同,不过这个是bootstrap默认值的要求.(有些许的强迫真好!)

  3. 之前基本都是bootstrap的东西,是时候加入一小段额外的魔法js了:

    //是我是我还是我 这js太简单了就不详细解释了...
$("a[data-toggle=modal]").click(function(){
    var target = $(this).attr('data-target');
    var url = $(this).attr('href');
    $(target).load(url);
});

有了这些基础之后.下面就是见证奇迹的时刻!

对于场面上的任何一个bootstrap配置的modal对话框,全部的数据都是动态加载的了!全场都被hold住了!

以上三段.就是怎么简单高效的让bootstrap的modal支持动态加载~以上~

完整的例子这里就不提供下载了..如果按照这个说明使用有什么问题欢迎给我留言~

(我真心不是打广告的..但这套前端库确实很方便.学习周期也短,用来做练手的或者验证原型还是很值得推荐的…)

comments powered by Disqus