富文本域、树状图、TIME 文本框时间

最新推荐文章于 2022-12-27 10:16:05 发布

菜单罗

最新推荐文章于 2022-12-27 10:16:05 发布

阅读量257

点赞数 2

本文链接：https://blog.csdn.net/Bubu_Niao/article/details/103023269

版权

富文本域

参考

https://summernote.org/

简要代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Summernote</title>
<!--网络连接-->
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
 <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
 <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Word</p></div>
<script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
</script>
</body>
</html>

树状图

bootstrap-treeview网址

简要代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 兼容IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap-treeview</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h2>默认</h2>
            <div id="treeview" class="">
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
    $(function() {
        // 设置树的相关属性并构造树
        $('#treeview').treeview({
            backColor: "#FFFFFF",
            color: "#428bca",
            enableLinks: true,
            data: getTree()
        });
        //定义树里的数据来源
        function getTree(){
            var data = [
                {
                    text: 'Parent 1',
                    href: '#parent1',
                    tags: ['4'],
                    nodes: [
                        {
                            text: 'Child 1',
                            href: '#child1',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: 'Grandchild 1',
                                    href: '#grandchild1',
                                    tags: ['0']
                                },
                                {
                                    text: 'Grandchild 2',
                                    href: '#grandchild2',
                                    tags: ['0']
                                }
                            ]
                        },
                        {
                            text: 'Child 2',
                            href: '#child2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    text: 'Parent 2',
                    href: '#parent2',
                    tags: ['0']
                },
                {
                    text: 'Parent 3',
                    href: '#parent3',
                    tags: ['0']
                },
                {
                    text: 'Parent 4',
                    href: '#parent4',
                    tags: ['0']
                },
                {
                    text: 'Parent 5',
                    href: '#parent5'  ,
                    tags: ['0']
                }
            ];
            return data;
        }
    });
</script>
</body>
</html>

时间TIME

bootstrap-datetimepicker中文版官网

bootstrap-datetimepicker < zip > https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip

简要代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>time</title>
    <!--图标样式-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="row">
    <div class='col-sm-3'>
        <div class="form-group">
            <label>选择日期：</label>
            <!--指定 date标记-->
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-sm-3'>
        <div class="form-group">
            <label>选择日期+时间：</label>
            <!--指定 date标记-->
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD hh:mm',
            locale: moment.locale('zh-cn')
        });
        $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD hh:mm',
            locale: moment.locale('zh-cn'),
            showClose:true,	//是否显示关闭 按钮
            viewMode: 'days',//天数模块展示，months则为以月展示,years则以年显示
            //daysOfWeekDisabled: false,//星期几 禁止选择,参数 [num],多个逗号隔开
            calendarWeeks: true,	//显示 周 是 今年第几周
            toolbarPlacement:'default', //工具摆放的位置，top 则为上，默认为底
            showTodayButton:true,	//是否工具栏 显示 直达今天天数的 按钮，默认false
            showClear:true//是否 工具栏显示  清空 输入框  的按钮。默认false
        });
    });
</script>
</body>
</html>

菜单罗

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
富文本域、树状图、TIME 文本框时间

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Summernote</title> <link rel="stylesheet" href="css/bootstrap.css"> &...
复制链接

扫一扫