Smarttang.BootStrap.js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Smarttang.BootStrap.js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Smarttang.BootStrap.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Smarttang.BootStrap.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Smarttang.BootStrap.js 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开发厂商
地区 国产
提 交 者 XiaoCon
适用人群 未知
收录时间 2016-05-18

软件简介

BootStrap 下使用的特殊前端功能。

简介

这个js插件汇聚了我还有之前37游戏的一个前端同事(已离职)做的一些前端功能,因为自己经常都要使用,所以封装了下,方便自己加载使用。google了下,做这样功能的人挺多的,但是貌似都没有做成一个独立的插件,so,这个东西就诞生了,我会持续维护,因为当前我兼任前端、后端、底层的开发。前端交互会用到的功能我都会封装起来,希望给有需要的朋友带来帮助。:)

配置

在使用前,请关注下是否加载的jquery还有bootstrap。

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

在确定都加载了之后,加载这个插件。

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

要注意:先后顺序!!

用法

加载完成后,可以在console里面输入两个变量,可以看到具体的一些方法。

-> huineng
    Object {}
        getFormData: function:(...)
        queryStr2Object: function:(...)
 -> smarttang
    Object {}
        modal: function(...)
        tables: function(...)

    在页面里面如何调用?

smarttang.modal(...)
  smarttang.tables_init(...)
  smarttang.tables_reload(...)

有些函数是有返回值的,比如tables返回的是一个对象,方便reload,这个根据自己的需求使用就好。 当然,你也可以改动一些配置来达到自己的目的,可以自己随意修改。:)

Demo

datatables 使用.

// 初始化
    var department_tables = smarttang.tables_init(
        '.department-manager',
        {
            url: OBJECT_DEPARTMENT,
            type: 'POST',
            data: {
                'obj':'list'
            }
        },
        [
            {
                data: 'department',
                width:'30%'
            },
            {
                data: 'department_manager',
                width:'15%',
            },
            {
                data: 'department_count',
                width:'20%',
                render: function (data, type, row, meta) {
                    return '<span class="badge">'+ data + '</span>';
                }
            }
        ],
        ''
    );

    // 修改、删除、添加完成后,reload表格。
    smarttang.tables_reload(department_tables);

SmartAjax 使用.(无返回)

function add()
    {
        var form_json = huineng.getFormData($('#department_add_form'));
        smarttang.SmartAjax(
            OBJECT_DEPARTMENT,
            huineng.mergeData(form_json,{'obj':'add'}),
            function(){
                $('#myModal-min').modal('hide');
                smarttang.tables_reload(department_tables);
            }
        );
    }

SmartAjax 使用.(有返回)

function read(_id)
    {
        var info_id = filterXSS_id);
        smarttang.SmartAjax(
            OBJECT_DEPARTMENT,
            {'obj':'read','id':info_id},
            function(msg){
                var _html = '<具体的html内容>';
                var _button = '<button data-bb-handler="success" type="button" class="btn btn-sm btn-info" data-dismiss="modal">关闭</button>';
                smarttang.modal('modal视图的标题',_html,_button);
            }
        );
    }

记录

  • [2016.5.16] 增加 wangEditor 支持。

  • [2016.5.16] 增加 datatables 支持(ajax初始化/ajax reload)

  • [2016.5.17] 增加 SmartAjax 支持(定制化ajax请求)

  • [2016.5.17] 增加 mergeData 支持(Object对象合并)

  • [2016.5.17] 增加 button_status 支持(还原 Bootstrap v3 版本之前的按钮loading特效)

  • [2016.5.18] 删除 delete 功能,增加 SmartAjax 返回值功能,用于处理。

  • 等待增加...

说明

  1. 有任何bug问题请直接提issue, 我会看的,看到会处理,3天内提问者没回复默认关闭。

  2. 有好的建议也可以发issue。采纳建议后,会把你的贡献加入到作者著名里面。

  3. 长期维护该插件,只要用到的前端功能都会汇聚到这个插件里面。

相关链接

  • 版权声明 (MIT协议,可以随意修改但是最好留下作者名字表示尊重)

  • wangEditor (这是我用过最好的在线编辑器,虽然坑很多....)

  • datatables (这是我最喜欢的插件,没有之一...)

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
bootstrap后端模板 cn.inspinia.cn
2018/10/11 12:51
回复
举报
更多评论
暂无内容
发表于大前端专区
2015/04/30 10:47

js bootstrap 事件

有个朋友问 :“请问bootstrap中on("shown.bs.modal")这样的事件 是怎么来的。貌似资料很少” 我进行一下回答

0
0
发表了博客
2014/02/13 10:04

JS版本 Bootstrap Modal

Bootstrap Modal打开远程数据。JS的版本。。 function remoteUrl(u){ u += '&t=' + Math.random(1000) $.get(u, '', function(data){ $('#remoteModal .modal-body').html(data) }) $('#remoteModal').modal({show:true,backdrop:false}) }...

0
0
发表于大前端专区
2013/05/26 17:13

Bootstrap js插件使用大全

Bootstrap分页插件--Bootstrap Paginator Bootstrap JS扩展插件使用实例(9)-datepicker Bootstrap JS插件使用实例(8)-按钮 Bootstrap JS插件使用实例(7)-通知消息 Bootstrap JS插件使用实例(6)-折叠(手风琴效果) Bootstrap JS插件使用实例(5)-标签页 Bootstrap JS插件使用实例(4)-滚动侦测 Bootstrap JS插件使用实例(3)...

1
10
发表了博客
2019/04/14 22:25

js插件---bootstrap-datepicker.js是什么

js插件---bootstrap-datepicker.js是什么 一、总结 一句话总结:选择时间的插件 时间选择插件 1、datepicker如何默认选择当前天? 直接给datepicker对应的input设置value 可以直接给datepicker对应的input设置value, <input type="text" class="form-control" value="2018-04-02"> 或者js代码如下 1 //获取当前时间,格...

0
0
发表了博客
2019/01/04 08:06

js插件---Bootstrap 树控件

js插件---Bootstrap 树控件 一、总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二、JS组件系列——Bootstrap 树控件使用经验分享 前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地...

0
0
发表了博客
2018/05/03 15:31

Bootstrap在线引用css和js

百度在线调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 使用 Bootstrap 中文网提供的免费 CDN 加速服务 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href...

0
0
发表了博客
2019/08/21 21:06

bootstrap和JS实现下拉菜单

// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#...

0
0
发表了博客
2019/09/18 15:40

bootstrap-全局CSS&js插件

一、全局CSS 1、概述 1. 全局CSS样式: * 按钮:class="btn btn-default" * 图片: * class="img-responsive":图片在任意尺寸都占100% * 图片形状 * <img src="..." alt="..." class="img-rounded">:方形 * <img src="..." alt="..." class="img-circle"> : 圆形...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
4 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部