• 富文本前台接收 方法实例


    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@include file="../common/common.jsp"%>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
    <title>美丽乡村</title>
    <style type="text/css">
    #country {
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .countryItem {
        margin-bottom: 10px;
        color: #333;
    }
    
    .countryTexeCon {
        padding: 10px 15px;
        background-color: #ffffff;
    }
    
    .countryName {
        padding-bottom: 5px;
        color: #333;
    }
    
    .countryPro {
        color: #929292;
        font-size: 14px;
        height: auto;
        word-break: break-all;
    }
    
    .countryItem>img {
        width: calc(100% - 6px);
        height: 100%;
        border: 3px solid #f1f1f1;
    }
    
    .countryText {
        position: relative;
    }
    
    .countryTextTitle {
        padding: 15px 0px;
        position: absolute;
        top: 0px;
        left: 0px;
        border-bottom: 1px solid #cccccc;
        color: #333;
        width: 100%;
        text-align: center;
        font-size: 21px;
        background-color: #fbfbfb;
    }
    
    .countryTextTitle>img {
        position: absolute;
        top: 9px;
        left: 12px;
        width: 21px;
        padding: 10px;
    }
    
    .countryText {
        padding-top: 60px;
        background-color: #fff;
    }
    
    .countryTextBody {
        padding: 15px;
    }
    
    .countryTextBody .text {
        text-indent: 28px;
    }
    
    .countryTextBody2 img {
        max-width: 95%;
        margin: 5px auto;
        display: inherit;
    }
    
    .goArea {
        margin-top: 5px;
        padding: 5px 0;
        background-color: aliceblue;
        position: relative;
        height: 25px;
    }
    
    .goArea>img {
        position: absolute;
        left: 10px;
        top: 5px;
        width: 23px;
    }
    
    .goArea>div {
        position: absolute;
        right: 10px;
        top: 6px;
    }
    
    .goWay {
        background-color: #0DBEF5;
        color: white;
        border-radius: 5px;
        font-size: 14px;
        padding: 2px 10px;
        padding-left: 22px;
        margin-left: 10px;
        cursor: pointer;
        position: relative;
    }
    
    .goWayImg {
        position: absolute;
        top: 2px;
        left: 5px;
        width: 16px;
    }
    .countryTextBody img{
        max-width:100%;
    }
    [v-cloak] {
        display: none;
    } 
    </style>
    </head>
    <body style="background-color: #fbf7e9;">
        <div id="country"  v-cloak>
            <div class="countryList" v-show="bl">
                <div class="countryItem" v-for="(item,index) in countryList"
                    @click="goCountryText(item)">
                    <img :src=item.pictureUpload />
                    <div class="countryTexeCon">
                        <div class="countryName">{{item.name}}</div>
                        <div class="countryPro">{{item.brief}}</div>
                    </div>
                </div>
            </div>
            <div class="countryText" v-show="!bl">
                <div class="countryTextTitle">
                    <span>{{countryText.name}}</span> <img src="image/leftArrow.png"
                        @click="backCountryList()" />
                </div>
                <div class="countryTextBody">
                    <div v-html='countryText.description'></div>
                    <div class="goArea">
                        <img src="image/goArea.png">
                        <div>
                            <span class="goWay">公交<img class="goWayImg"
                                src="image/busIc.png"></span> <span class="goWay">驾车<img
                                class="goWayImg" src="image/driveIc.png"></span> <span
                                class="goWay">步行<img class="goWayImg"
                                src="image/walkIc.png"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="textR"></div>
    </body>
    <script type="text/javascript">
        var base = $("base").attr("href");
        var country = new Vue(
                {
                    el : '#country',
                    created : function() {
                        this.$http(
                                        {
                                            url : base+"rest/transportCountry?id=",
                                        }).then(
                                        function(res) {
                                            var tempC = res.data;
                                            for (var i = 0; i < tempC.length; i++) {
                                                var str = tempC[i].description;
                                                var temp = document.getElementById("textR");
                                                temp.innerHTML = str;
                                                var output = temp.innerText || temp.textContent;
                                                temp.innerHTML = "";
                                                console.debug(tempC[i].description);
                                                tempC[i].description = output;
                                            }
                                            this.countryList = tempC;
                                        });
                    },
                    data : {
                        countryList : "",
                        bl : true,
                        countryText : {
                            name : "",
                            info : []
                        }
                    },
                    methods : {
                        goCountryText : function(item) {
                            this.bl = false;
                            this.countryText = item;
                        },
                        backCountryList : function() {
                            this.bl = true;
                        }
                    }
                });
        function updateBusSize() {
            $("#country").height($(window).height());
        };
        // 更新页面元素高度
        updateBusSize();
        $(window).resize(function() {
            updateBusSize();
        });
        var nowA = "";
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                nowA = r.point.lat + ',' + r.point.lng;
            } else {
                alert('failed' + this.getStatus());
            }
        }, {
            enableHighAccuracy : true
        });
        $(".goWay").click(
                        function() {
                            var way = $(this).text();
                            var goway = "";
                            if (way == "公交") {
                                goway = "transit";
                            } else if (way == "驾车") {
                                goway = "driving";
                            } else if (way == "步行") {
                                goway = "walking";
                            }
                            location.href = "http://api.map.baidu.com/direction?origin=latlng:"
                                    + nowA
                                    + "|name:&destination=latlng:"
                                    + country.countryText.lat
                                    + ","
                                    + country.countryText.lng
                                    + "|name:"
                                    + country.countryText.name
                                    + "&mode="
                                    + goway
                                    + "&region=南京&output=html&src=yourCompanyName|yourAppName"
                        });
    </script>
    </html>
  • 相关阅读:
    多边形游戏
    大整数乘法
    矩阵连乘
    最长公共子序列
    动态规划
    快速排序
    二分搜索技术
    动态规划基本要素
    合并排序
    最大子段和
  • 原文地址:https://www.cnblogs.com/wenb/p/6775060.html
Copyright © 2020-2023  润新知