github风格网页插件

残缘

@Ta 2017-01-30发布，2022-06-17修改 6223点击

新版在这里https://hu60.cn/q.php/bbs.topic.82975.html

已加入快速插入表情功能

代码部分

导入网页插件：未命名（当前用户：1，总安装次数：1）

				<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<style>
.tp {
    margin: 0px;
    background-color: #f5f5f5;
    font-family: "Helvetica";
    border-bottom: 1px solid #e5e5e5;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}

.tp p:first-child
{
   background-color:#ebf1ec;
   height:0px;
   padding:0px;

} 

.tp img{
    width: 0px;
}
.tp a{
}

.tp img{
    width:0xp;
}

body {
    padding: 0px 0px; 
    background-color: #fafafa;
}

a {
    color: #4078c0;
    text-decoration: none;
    font-size: 14px;
}

hr
{
        border: 0px solid #BED8EA;
}

div
{
        padding: 9px 10px 10px;
    margin: 0;
    font-size: 14px;
    line-height: 17px;
    background-color: #f5f5f5;
    border: 1px solid #d8d8d8;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid #e5e5e5;

}

ol{
        counter-reset: li; /* 创建一个计数器 */
        list-style: none; /* 清除列表默认的编码*/
        *list-style: decimal; /* 让IE6/7具有默认的编码 */
        font: 15px 'trebuchet MS', 'lucida sans';
        padding: 0;
        margin-bottom: 4em;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

li a {
                        position: relative;
                        display: block;
                        padding: 0.4em 0.4em 0.4em 0.8em;
                        *padding: 0.4em;
                        margin: 0.5em 0 0.5em 2em;
                        background: #ddd;
                        color: #444;
                        text-decoration: none;
                        /*transition动画效果*/
                        -webkit-transition: all 0.3s ease-out;
                        -moz-transition: all 0.3s ease-out;
                        -ms-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                }
                li a:hover {
                        background: #eee;
                }
                
                li a::before {
                        
                        content: counter(li);
                        counter-increment: li;
                        
                        position: absolute;
                        left: -2.5em;
                        top: 50%;
                        margin-top: -1em;
                        background: rgb(221, 221, 221);
                        width: 2em;
                        height: 2em;
                        line-height: 2em;
                        text-align: center;
                        -webkit-transition: all 0.3s ease-out;
                        -moz-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        -ms-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                }
                li a::after {
                        position: absolute;
                        content:"";
                        border: 0.5em solid transparent;
                        left: -1em;
                        top: 50%;
                        margin-top: -0.5em;
                        -webkit-transition: all 0.3s ease-out;
                        -moz-transition: all 0.3s ease-out;
                        -o-transition: all 0.3s ease-out;
                        -ms-transition: all 0.3s ease-out;
                        transition: all 0.3s ease-out;
                }
                li a:hover::after {
                        left: -0.5em;
                        border-left-color: rgb(221, 221, 221);
                }

            .news {
                min-height: 56px;
                padding: 10px 10px 10px 50px;
                border: solid 1px #4078c0;
                border-radius: 3px;
            }
            .news a{
                    font-size: 14px;
                    line-height: 1.2;
                    color: #4078c0;
                    font-weight: 600;
            }

        .news p{
            padding: 0;
            margin: 0;
            font-size: 12px;
            color: #555;
        }
        .octiconr
        {
            float:left;
            fill:currentColor;
            color: #4078c0;
            margin:4px;

        }
       input[type=submit] , input[type=button]
    {
        background:#ff0000;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #333;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #eee;
    background-image: -webkit-linear-gradient(#fcfcfc, #eee);
    background-image: linear-gradient(#fcfcfc, #eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    }
    
</style>                


<script type="text/javascript">
$(document).ready(function(){
    $(".news").prepend( '<svg aria-hidden="true" class="octiconr"  style="color: #4078c0;"  height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M4.79 6.11c.25-.25.25-.67 0-.92-.32-.33-.48-.76-.48-1.19 0-.43.16-.86.48-1.19.25-.26.25-.67 0-.92a.613.613 0 0 0-.45-.19c-.16 0-.33.06-.45.19-.57.58-.85 1.35-.85 2.11 0 .76.29 1.53.85 2.11.25.25.66.25.9 0zM2.33.52a.651.651 0 0 0-.92 0C.48 1.48.01 2.74.01 3.99c0 1.26.47 2.52 1.4 3.48.25.26.66.26.91 0s.25-.68 0-.94c-.68-.7-1.02-1.62-1.02-2.54 0-.92.34-1.84 1.02-2.54a.66.66 0 0 0 .01-.93zm5.69 5.1A1.62 1.62 0 1 0 6.4 4c-.01.89.72 1.62 1.62 1.62zM14.59.53a.628.628 0 0 0-.91 0c-.25.26-.25.68 0 .94.68.7 1.02 1.62 1.02 2.54 0 .92-.34 1.83-1.02 2.54-.25.26-.25.68 0 .94a.651.651 0 0 0 .92 0c.93-.96 1.4-2.22 1.4-3.48A5.048 5.048 0 0 0 14.59.53zM8.02 6.92c-.41 0-.83-.1-1.2-.3l-3.15 8.37h1.49l.86-1h4l.84 1h1.49L9.21 6.62c-.38.2-.78.3-1.19.3zm-.01.48L9.02 11h-2l.99-3.6zm-1.99 5.59l1-1h2l1 1h-4zm5.19-11.1c-.25.25-.25.67 0 .92.32.33.48.76.48 1.19 0 .43-.16.86-.48 1.19-.25.26-.25.67 0 .92a.63.63 0 0 0 .9 0c.57-.58.85-1.35.85-2.11 0-.76-.28-1.53-.85-2.11a.634.634 0 0 0-.9 0z"></path></svg>'); 



$("#reply_topic_button,#post_topic_button").before('<br><div id="face"><img title="冷" src="/tpl/classic/img/face/e586b7.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /></div><br />');




  $('#face img').click(
        function(){
           
            var title = "《：" +  $(this).attr("title") + "》";
            var oldvalue =  $("#content").val();


            $("#content").val(oldvalue + title);
       
        });


});

</script>

隐藏样式查看源码

回复列表(8|隐藏机器人聊天)

1

Ta

@Ta / 2017-01-30 / 样 / 源
2

Ta

@Ta / 2017-01-30 / 样 / 源

加个code吧
3

残缘

@Ta / 2017-01-30 / 样 / 源

@Ta，已添加，我感觉可能没有会更好复制一些。。
4

花祭

@Ta / 2017-01-31 / 样 / 源

能不能把表情插件单独列出来
5

花祭

@Ta / 2017-01-31 / 样 / 源

@残缘，能不能把信号塔去掉
6

歌者

@Ta / 2017-01-31 / 样 / 源

应该加一个返回顶部的悬浮按键
8

HYK2000

@Ta / 2017-01-31 / 样 / 源

@花祭，去信号塔版本

<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>

<style>

.tp {

    margin: 0px;

    background-color: #f5f5f5;

    font-family: "Helvetica";

    border-bottom: 1px solid #e5e5e5;

    padding: 4px 8px;

    font-size: 13px;

    font-weight: 600;

    line-height: 20px;

}

.tp p:first-child

{

   background-color:#ebf1ec;

   height:0px;

   padding:0px;

}

.tp img{

    width: 0px;

}

.tp a{

}

.tp img{

    width:0xp;

}

body {

    padding: 0px 0px;

    background-color: #fafafa;

}

a {

    color: #4078c0;

    text-decoration: none;

    font-size: 14px;

}

hr

{

        border: 0px solid #BED8EA;

}

div

{

        padding: 9px 10px 10px;

    margin: 0;

    font-size: 14px;

    line-height: 17px;

    background-color: #f5f5f5;

    border: 1px solid #d8d8d8;

    border-bottom: 0;

    border-radius: 3px 3px 0 0;

    border-bottom: 1px solid #e5e5e5;

}

ol{

        counter-reset: li; /* 创建一个计数器 */

        list-style: none; /* 清除列表默认的编码*/

        *list-style: decimal; /* 让IE6/7具有默认的编码 */

        font: 15px 'trebuchet MS', 'lucida sans';

        padding: 0;

        margin-bottom: 4em;

        text-shadow: 0 1px 0 rgba(255,255,255,.5);

}

li a {

                        position: relative;

                        display: block;

                        padding: 0.4em 0.4em 0.4em 0.8em;

                        *padding: 0.4em;

                        margin: 0.5em 0 0.5em 2em;

                        background: #ddd;

                        color: #444;

                        text-decoration: none;

                        /*transition动画效果*/

                        -webkit-transition: all 0.3s ease-out;

                        -moz-transition: all 0.3s ease-out;

                        -ms-transition: all 0.3s ease-out;

                        -o-transition: all 0.3s ease-out;

                        transition: all 0.3s ease-out;

                }

                li a:hover {

                        background: #eee;

                }

                li a::before {

                        content: counter(li);

                        counter-increment: li;

                        position: absolute;

                        left: -2.5em;

                        top: 50%;

                        margin-top: -1em;

                        background: rgb(221, 221, 221);

                        width: 2em;

                        height: 2em;

                        line-height: 2em;

                        text-align: center;

                        -webkit-transition: all 0.3s ease-out;

                        -moz-transition: all 0.3s ease-out;

                        -o-transition: all 0.3s ease-out;

                        -ms-transition: all 0.3s ease-out;

                        transition: all 0.3s ease-out;

                }

                li a::after {

                        position: absolute;

                        content:"";

                        border: 0.5em solid transparent;

                        left: -1em;

                        top: 50%;

                        margin-top: -0.5em;

                        -webkit-transition: all 0.3s ease-out;

                        -moz-transition: all 0.3s ease-out;

                        -o-transition: all 0.3s ease-out;

                        -ms-transition: all 0.3s ease-out;

                        transition: all 0.3s ease-out;

                }

                li a:hover::after {

                        left: -0.5em;

                        border-left-color: rgb(221, 221, 221);

                }

        .octiconr

        {

            float:left;

            fill:currentColor;

            color: #4078c0;

            margin:4px;

        }

       input[type=submit] , input[type=button]

    {

        background:#ff0000;

    padding: 6px 12px;

    font-size: 14px;

    font-weight: 600;

    line-height: 20px;

    color: #333;

    white-space: nowrap;

    vertical-align: middle;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    background-color: #eee;

    background-image: -webkit-linear-gradient(#fcfcfc, #eee);

    background-image: linear-gradient(#fcfcfc, #eee);

    border: 1px solid #d5d5d5;

    border-radius: 3px;

    }

</style>

<script type="text/javascript">

$(document).ready(function(){

$("#reply_topic_button,#post_topic_button").before('<br><div id="face"><img title="冷" src="/tpl/classic/img/face/e586b7.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /></div><br />');

  $('#face img').click(

        function(){

            var title = "《：" +  $(this).attr("title") + "》";

            var oldvalue =  $("#content").val();

            $("#content").val(oldvalue + title);

        });

});

</script>
9

花祭

@Ta / 2017-01-31 / 样 / 源

@HYK2000，早搞定了

添加新回复

回复需要登录。