The avalon.pilotui from rubylouvre

avalon.pilotui's People

Contributors

Stargazers

Watchers

avalon.pilotui's Issues

判断鼠标从什么方向进入容器的算法分析

http://www.cnblogs.com/huhy/p/3669171.html

@提示组件

难点是要得@距离文本区的左边与上边的距离。

<!DOCTYPE html>
<html>
    <head>
        <title>@提示组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <script src="jquery.js">

        </script>
        <script>

            $(function() {
                var div
                $("textarea").on("input", function() {
                    var self = $(this)
                    if (/@/.test(this.value)) {
                        if (!div) {
                            div = $("<div/>").appendTo("body").css({
                                width: self.width(),
                                height: self.height(),
                                border: "1px  solid  red"
                            }).text(self.val())
                        }
                    }
                })
            })


        </script>

    </head>
    <body>
        <textarea>

        </textarea>
    </body>
</html>

透明穿透

<!DOCTYPE html>
<html class="p-index">
    <head>
        <meta charset="utf-8" />
        <title>透明穿透</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <script src="avalon.js">

        </script>
        <style>
            html,body{_height:100%;margin:0;padding:0;}
            #aaa{
                background: red;
                width:180px;
                height:180px;
                padding:2px;
                border:5px solid green;

            }
            #bbb{
                width:220px;
                height:220px;
                position: absolute;/*或fixed, relative*/
                top:0px;
                left:0px;
                border:1px solid black;
                filter:alpha(opacity=50);/*透明或半透明 ，IE9还可以用opacity， 还可以用progid:DXImageTransform.Microsoft.gradient*/

                pointer-events: none;
            }

        </style>
        <script>
            avalon.define("test", function(vm) {
                vm.click = function() {
                    alert(this.id)
                }
            })
        </script>

    </head>
    <body>
        <div ms-controller="test" style="position: relative;padding:50px;">

            <div id="aaa" ms-click="click">
                <p>这是底层的DIV</P>
                <p>点击它上面的文本或图片或表单控件或元素边框会发生穿透</p>
                <input>
            </div>

            <div id="bbb">这是绝对定位的DIV，浮在div#aaa的上方

            </div>

        </div>
    </body>
</html>

Recommend Projects