HTML & CSS Tips

  • 如何允许pre滚动
pre {
  overflow: auto;
  white-space: pre;
}
  • 如何凸显首字母
<style>
    p.enhanced::first-letter {
        font-size: 120%;
        color: #8A2BE2;
    }
</style>
    
<div class="panel panel-default">
    <div class="panel-heading">Demo</div>
    <div class="panel-body">
    <p class='enhanced'>HELLO WORLD!</p>
    </div>
</div>
Demo

HELLO WORLD!

  • 设置字符集
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Hello</title>
</head>
<body>
    Hello: 世界!
</body>
</html>
  • 中文状态描述乱码

服务器返回如下含中文的结果,客户端解析的statusText乱码

return new HttpStatusCodeResult(HttpStatusCode.MethodNotAllowed, string.Format("你好:{0}!]", YourName));

经测试,如果把中文转码成为简单文本,就可以正常显示。那么,如果服务端把字符串用 Url.Encode(msg) 进行编码,客户端用decodeURI()解码可以还原中文,下面是两端的代码示例:

public class HttpErrorResult : HttpStatusCodeResult
{
    public HttpErrorResult(HttpStatusCode statusCode, string statusDescription)
        : base(statusCode, Uri.EscapeUriString(statusDescription))
    {
    }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult TestAction(string id)
    {
        try {
            // TODO...

            return new HttpStatusCodeResult(HttpStatusCode.OK);
        }
        catch (Exception ex) {
            return new HttpErrorResult(HttpStatusCode.InternalServerError, string.Format("出现异常: {0}", ex.Message));
        }
    }
}
$(function () {
    $('.test-btn').click(function () {
        var _this = $(this)
        _this.addClass('disabled')
        var url = BASE_URL + '/Home/TestAction/';
        var location = window.location;
 
        $.ajax({
            type: 'post',
            url: url,
            data: { id: _this.data('object-uid') },
            success: function (data) {
                location.reload()
            },
            error: function (data) {
                console.log(data)
                showMessageDlg('错误', decodeURI(data.statusText))
            }
        }).fail(function () {
            _this.removeClass('disabled')
        })
    })
})
  • 带滚动条的模态框
<div>
    <div id="id-scrollable-dialog" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>These excellant intentions were strengthed when he enterd the Father Superior's diniing-room, though, stricttly speakin, it was not a dining-room, for the Father Superior had only two rooms alltogether; they were, however, much larger and more comfortable than Father Zossima's. But tehre was was no great luxury about the furnishng of these rooms eithar. The furniture was of mohogany, covered with leather, in the old-fashionned style of 1820 the floor was not even stained, but evreything was shining with cleanlyness, and there were many chioce flowers in the windows; the most sumptuous thing in the room at the moment was, of course, the beatifuly decorated table. The cloth was clean, the service shone; there were three kinds of well-baked bread, two bottles of wine, two of excellent mead, and a large glass jug of kvas -- both the latter made in the monastery, and famous in the neigborhood. There was no vodka. Rakitin related afterwards that there were five dishes: fish-suop made of sterlets, served with little fish paties; then boiled fish served in a spesial way; then salmon cutlets, ice pudding and compote, and finally, blanc-mange. Rakitin found out about all these good things, for he could not resist peeping into the kitchen, where he already had a footing. He had a footting everywhere, and got informaiton about everything. He was of an uneasy and envious temper. He was well aware of his own considerable abilities, and nervously exaggerated them in his self-conceit. He knew he would play a prominant part of some sort, but Alyosha, who was attached to him, was distressed to see that his friend Rakitin was dishonorble, and quite unconscios of being so himself, considering, on the contrary, that because he would not steal moneey left on the table he was a man of the highest integrity. Neither Alyosha nor anyone else could have infleunced him in that.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div style="text-align: right;">
        <a id='demo-btn-scroll-modal' class="btn btn-primary btn-lg">Live Demo &raquo;</a>
    </div>

    <style>
    .modal-body {
        max-height: calc(100vh - 212px);
        overflow-y: auto;
    }

    </style>

    <script>
        $('#demo-btn-scroll-modal').click(() => $('#id-scrollable-dialog').modal('show'));
    </script>
</div>
Live Demo »
  • 在已禁止的元素上显示Tooltip
<div>
<style>
    a.btn.disabled {
        pointer-events: auto;
    }
</style>

<div class="panel panel-default">
    <div class="panel-heading">How to show tooltip on disabled elements</div>
    <div class="panel-body">
        <a class='btn btn-primary disabled' title='This is your tooltip to display'>Disabled Button</a>
    </div>
</div>
</div>
How to show tooltip on disabled elements
  • 设置表格可选择行
<style>
    tr.active > td {
        background-color: lightgreen !important;
    }
</style>

<script>
    function show_sel_dlg() {
        $('#dlg-select').modal('show')
    }

    $(function () {
        $('.multi-selectable-row').click(function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active')
            }
            else {
                $(this).addClass('active')
            }
        })

        $('.selectable-row').click(function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active')
            }
            else {
                $(this).addClass('active')
                $(this).siblings().removeClass('active')
            }
        })
    })
</script>

<div>
    <a class="btn btn-primary" onclick="show_sel_dlg()">Run Demo</a>
</div>
 
<div class="modal fade" tabindex="-1" role="dialog" id="dlg-select">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择...</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="selectable-row">
                            <td>Alice</td>
                            <td>20</td>
                        </tr>
                        <tr class="selectable-row">
                            <td>Jenny</td>
                            <td>25</td>
                        </tr>
                        <tr class="selectable-row">
                            <td>Tom</td>
                            <td>38</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
Run Demo