@某人之后整体删除的方法

作者:可乐 发布时间:October 31, 2017 分类:前端 No Comments

今天有人在群里问了下这个东西,顺手写个demo吧。挺有意思的一个东西

1.gif



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <style type="text/css">
        div{ float: left; width: 500px; border: 1px solid #CCC;padding: 5px; outline: none}
        input{ width: 70px; display: inline-block; border: none; color: #00F; outline: none}
        button{ height: 34px; padding: 0 20px; }
    </style>
    <div contenteditable="true" id="test">test <input value="@keyword1" disabled /> del <input value="@keyword2" disabled /> 2 <input value="@keyword3" disabled /> 4</div><button>发送</button>
    <p id="result"></p>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('button').on('click', function(event) {
                $('#result').html($('#test').html())
                var input = $('#result').find('input')
                input.each(function(index, el) {
                    $(el).after($(el).val())
                    $(el).remove()
                });
                console.log($('#result').text())
            });
        });
    </script>
</body>
</html>

固定范围内的随屏滚动

作者:可乐 发布时间:November 3, 2016 分类:前端 No Comments

09年的时候,在blueidea上问过这个问题,那时候没人回我。最近在那看到有人问,顺手写一下吧。

<textarea name="rtext" class="run_code" id="runcode_31682"><!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.slim.min.js"></script>

</head>
<body>

<style type="text/css">
    .box{ position: relative; margin: 10px; margin-bottom: 100px; border: 1px solid #CCC; }
    .pic{ position: absolute; left: 20px; top: 20px; width: 60px; height: 60px; background-color: #F00; text-align: center; line-height: 60px; font-size: 30px; color: #FFF }
    .fixed{ position: fixed; left: 39px; top: 31px; }
    .bottom{ position: absolute; top: auto; left: 20px; bottom: 20px; }
</style>
<div class="box" style="height: 1500px;">
    <div class="pic">1</div>
</div>
<div class="box" style="height: 500px;">
    <div class="pic">2</div>
</div>
<div class="box" style="height: 1800px;">
    <div class="pic">3</div>
</div>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.box').each(function(index, el) {
            var _self = $(this)
            var boxHeight = $(this).outerHeight();
            $(window).on('scroll', function(event) {
                if (el.getBoundingClientRect().top < 0) {
                    boxHeight + el.getBoundingClientRect().top - 100 < 0 ? _self.find('.pic').addClass('bottom') : _self.find('.pic').removeClass('bottom').addClass('fixed')    
                }else{
                    _self.find('.pic').removeClass('fixed')
                }
            });
        });
    });
</script>

</body>
</html></textarea>
<input class="btn btn-primary" name="rbutton" type="button" onclick="runcode('runcode_31682');" value="运行代码">

tip样式

作者:可乐 发布时间:October 9, 2014 分类:前端 No Comments

腰子今天问的一个东西,随手记录下。就是一个简单的tip实现。

核心点就是tip的那个三角形的实现

<textarea name="rtext" class="run_code" id="runcode_682"><!doctype html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>

</head>
<body>

<style>
    div{ position: relative; width: 300px; margin-bottom: 50px;  border: 1px solid #CCC; padding: 10px; -webkit-box-shadow:2px 2px 5px #CCC; }
    div:before,div:after{ content: " "; position: absolute; right: 10px; top: -4px;  width: 6px; height: 6px; background-color: #CCC; -webkit-transform: rotate(45deg);  }
    div:after{ top: -3px; background-color: #FFF; }
</style>
<div>
    文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试
</div>

</body>
</html></textarea>
<input class="btn btn-primary" name="rbutton" type="button" onclick="runcode('runcode_682');" value="运行代码">

git自动补全方法

作者:可乐 发布时间:August 8, 2014 分类:前端 No Comments

PR新买了mac,他习惯了用命令行操作,但是又懒得记全部的命令。所以希望有一个自动补全的工具。

网上找了下,发现有办法,做个简单的记录

按顺序执行以下代码就OK了
git clone git://git.kernel.org/pub/scm/git/git.git
cp git/contrib/completion/git-completion.bash ~/.git-completion.bash
source ~/.git-completion.bash

以后每次使用的时候,先执行
source ~/.git-completion.bash

效果如下图

ts.gif

如果不想每次执行source语句,可以这样做

首先设置显示mac隐藏文件

defaults write com.apple.finder AppleShowAllFiles -bool true

然后到用户根目录下,找到.bash_profile或者.bashrc,或者.profile上加入


if [ -f ~/.git-completion.bash ]; then
. ~/.git-completion.bash
fi

然后重启bash,搞定~

css圆角+border构建按钮

作者:可乐 发布时间:December 6, 2013 分类:前端 No Comments

back.jpg

SNAKE今天发了这个图,说怎么用CSS来写出效果。顺手写了下。代码如下:

内侧阴影和渐变没有写,如果需要hover可以单独添加上。

因为他的需求是针对手机端,也就是webkit核心的浏览器,所以只针对chrome测试了。其他的只给一个参考的思路而已~