Question

在G +和Facebook中，当您单击文本输入框（用于更新）时，它将展开并为您提供更多选项。例如，提交按钮或其他文本输入字段。

对于我的生活，我找不到这个叫什么，以便我可以查看一些预制的css3 / jquery插件/教程。

这是我能找到的最接近的，但它并不是我想要的。 http://www.appelsiini.net/projects/jeditable/default.html

任何提示？

谢谢！

Answer 1

只需使用普通的javascript / jquery来隐藏/显示你想要的内容

<form><table><tr><td><lable id='lab'><input style='display:none' type='text' id='name'></input></label></td></tr></table></form>

和你的JS

$(function(){


$("#lab).click(function(){

$(this).css("display","none");

$("#name").css("display","block");
}
});


});

Answer 2

Facebook实际上是通过AJAX加载另一个CSS样式表来实现的，但这里有一个常规的Javascript函数可以解决这个问题：

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
            function showDiv() {
                var area = document.getElementById("inputbox");
                area.style.height = "80px";
                var div = document.getElementById("hiddendiv");
                div.style.display="block";
            }
        </script>
    </head>
    <body>
        <textarea id="inputbox" onfocus="showDiv()" style="height:30px;">Put focus on me...</textarea>
        <div id="hiddendiv" style="display:none;">to show me!</div>
    </body>
</html>

如何Google +样式文本输入扩展框

2 个答案: