Browse Source

新增示例(标签 & 提示)

RuoYi 4 years ago
parent
commit
de6fa42721

+ 37 - 27
ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoFormController.java

@@ -98,6 +98,15 @@ public class DemoFormController
         return prefix + "/invoice";
     }
 
+    /**
+     * 标签 & 提示
+     */
+    @GetMapping("/labels_tips")
+    public String labels_tips()
+    {
+        return prefix + "/labels_tips";
+    }
+
     /**
      * 选项卡 & 面板
      */
@@ -236,41 +245,42 @@ public class DemoFormController
     @GetMapping("/localrefresh")
     public String localRefresh(ModelMap mmap)
     {
-    	JSONArray list = new JSONArray();
-    	JSONObject item = new JSONObject();
-    	item.put("name", "这条任务数据是由ModelMap传递到页面的,点击添加按钮后会将这条数据替换为新数据");
-    	item.put("type", "默认");
-    	item.put("date", "2020.06.10");
-    	list.add(item);
-    	mmap.put("tasks",list);
-    	mmap.put("min",2);
-    	mmap.put("max",10);
+        JSONArray list = new JSONArray();
+        JSONObject item = new JSONObject();
+        item.put("name", "这条任务数据是由ModelMap传递到页面的,点击添加按钮后会将这条数据替换为新数据");
+        item.put("type", "默认");
+        item.put("date", "2020.06.10");
+        list.add(item);
+        mmap.put("tasks", list);
+        mmap.put("min", 2);
+        mmap.put("max", 10);
         return prefix + "/localrefresh";
     }
-    
+
     /**
      * 局部刷新-添加任务
-     * @param	fragment	页面中的模板名称
-     * @param	taskName	任务名称
+     * 
+     * @param fragment 页面中的模板名称
+     * @param taskName 任务名称
      */
     @PostMapping("/localrefresh/task")
-    public String localRefreshTask(String fragment,String taskName,ModelMap mmap)
-    {
-    	JSONArray list = new JSONArray();
-    	JSONObject item = new JSONObject();
-    	item.put("name", StringUtils.defaultIfBlank(taskName, "通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人"));
-    	item.put("type", "新增");
-    	item.put("date", "2018.06.10");
-    	list.add(item);
-    	item = new JSONObject();
-    	item.put("name", "提高自己电话营销技巧,灵活专业地与客户进行电话交流");
-    	item.put("type", "新增");
-    	item.put("date", "2018.06.12");
-    	list.add(item);
-    	mmap.put("tasks",list);
+    public String localRefreshTask(String fragment, String taskName, ModelMap mmap)
+    {
+        JSONArray list = new JSONArray();
+        JSONObject item = new JSONObject();
+        item.put("name", StringUtils.defaultIfBlank(taskName, "通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人"));
+        item.put("type", "新增");
+        item.put("date", "2018.06.10");
+        list.add(item);
+        item = new JSONObject();
+        item.put("name", "提高自己电话营销技巧,灵活专业地与客户进行电话交流");
+        item.put("type", "新增");
+        item.put("date", "2018.06.12");
+        list.add(item);
+        mmap.put("tasks", list);
         return prefix + "/localrefresh::" + fragment;
     }
-    
+
     /**
      * 模拟数据
      */

+ 237 - 0
ruoyi-admin/src/main/resources/templates/demo/form/labels_tips.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+	<th:block th:include="include :: header('标签 & 提示')" />
+</head>
+<body class="gray-bg">
+    <div class="wrapper wrapper-content animated fadeIn">
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>徽章 (Badges)</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <p>
+                            要添加徽章,只需要在元素上添加<code>.badge</code>即可,改变徽章的颜色可使用如下class,如<code>.badge-primary</code>。
+                        </p>
+                        <p><span class="badge">空</span>
+                        </p>
+                        <p><span class="badge badge-primary">badge-primary</span>
+                        </p>
+                        <p><span class="badge badge-info">badge-info</span>
+                        </p>
+                        <p><span class="badge badge-success">badge-success</span>
+                        </p>
+                        <p><span class="badge badge-warning">badge-warning</span>
+                        </p>
+                        <p><span class="badge badge-danger">badge-danger</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>标签 (Labels)</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <p>
+                            要添加徽章,只需要在元素上添加class<code>.label</code>即可,如果需要修改颜色,添加如下class,如<code>.label-primary</code>
+                        </p>
+                        <p><span class="label">空</span>
+                        </p>
+                        <p><span class="label label-primary">label-primary</span>
+                        </p>
+                        <p><span class="label label-info">label-info</span>
+                        </p>
+                        <p><span class="label label-success">label-success</span>
+                        </p>
+                        <p><span class="label label-warning">label-warning</span>
+                        </p>
+                        <p><span class="label label-danger">label-danger</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>通知样式</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="alert alert-success">
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                        <div class="alert alert-info">
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                        <div class="alert alert-warning">
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                        <div class="alert alert-danger">
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-6">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>带关闭按钮的通知样式</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="ibox-content">
+                        <div class="alert alert-success alert-dismissable">
+                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                        <div class="alert alert-info alert-dismissable">
+                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                        <div class="alert alert-warning alert-dismissable">
+                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                        <div class="alert alert-danger alert-dismissable">
+                            <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
+                            RuoYi是一个很棒的后台UI框架 <a class="alert-link" href="#">了解更多</a>.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="ibox float-e-margins">
+                    <div class="ibox-title">
+                        <h5>工具提示</h5>
+                        <div class="ibox-tools">
+                            <a class="collapse-link">
+                                <i class="fa fa-chevron-up"></i>
+                            </a>
+                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                <i class="fa fa-wrench"></i>
+                            </a>
+                            <ul class="dropdown-menu dropdown-user">
+                                <li><a href="#">选项1</a>
+                                </li>
+                                <li><a href="#">选项2</a>
+                                </li>
+                            </ul>
+                            <a class="close-link">
+                                <i class="fa fa-times"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <h4>工具提示示例 <small>深色背景</small></h4>
+                        <div>
+                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="这里是提示内容">左侧提示</button>
+                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="这里是提示内容">顶部提示</button>
+                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="这里是提示内容">底部提示</button>
+                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="这里是提示内容">右侧提示</button>
+                        </div>
+                        <br>
+                        <h4>工具提示 - 单击提示</h4>
+                        <div class="text-center" >
+                            <button type="button" class="btn btn-primary"  data-toggle="popover" data-placement="auto left" data-content="气泡提示">
+                                气泡提示左
+                            </button>
+                            <button type="button" class="btn btn-primary"  data-toggle="popover" data-placement="auto top" data-content="气泡提示">
+                                气泡提示顶部
+                            </button>
+                            <button type="button" class="btn btn-primary"  data-toggle="popover" data-placement="auto bottom" data-content="气泡提示">
+                                气泡提示底部
+                            </button>
+                            <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="auto right" data-content="气泡提示">
+                                气泡提示右
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        
+    </div>
+    <th:block th:include="include :: footer" />
+    <script type="text/javascript">
+	    $("[data-toggle='tooltip']").tooltip();
+	    $("[data-toggle=popover]").popover();
+    </script>
+</body>
+</html>

+ 1 - 0
ruoyi-admin/src/main/resources/templates/index-topnav.html

@@ -103,6 +103,7 @@
 					<li><a class="menuItem" th:href="@{/demo/form/jasny}">功能扩展</a></li>
 					<li><a class="menuItem" th:href="@{/demo/form/sortable}">拖动排序</a></li>
 					<li><a class="menuItem" th:href="@{/demo/form/invoice}">单据打印</a></li>
+					<li><a class="menuItem" th:href="@{/demo/form/labels_tips}">标签 & 提示</a></li>
 					<li><a class="menuItem" th:href="@{/demo/form/tabs_panels}">选项卡 & 面板</a></li>
 					<li><a class="menuItem" th:href="@{/demo/form/validate}">表单校验</a></li>
 					<li><a class="menuItem" th:href="@{/demo/form/wizard}">表单向导</a></li>

+ 1 - 0
ruoyi-admin/src/main/resources/templates/index.html

@@ -85,6 +85,7 @@
 								<li><a class="menuItem" th:href="@{/demo/form/jasny}">功能扩展</a></li>
 								<li><a class="menuItem" th:href="@{/demo/form/sortable}">拖动排序</a></li>
 								<li><a class="menuItem" th:href="@{/demo/form/invoice}">单据打印</a></li>
+								<li><a class="menuItem" th:href="@{/demo/form/labels_tips}">标签 & 提示</a></li>
 								<li><a class="menuItem" th:href="@{/demo/form/tabs_panels}">选项卡 & 面板</a></li>
 								<li><a class="menuItem" th:href="@{/demo/form/validate}">表单校验</a></li>
 								<li><a class="menuItem" th:href="@{/demo/form/wizard}">表单向导</a></li>