构建可在HTML代码中随处重复使用的表单

时间:2013-05-16 08:12:47

标签: jquery html forms function

首先,我是一名初级UI开发人员。

我有一个表单,我想在我的代码中启用它几个位置[如果我可以通过js文件提供这个很好,所以任何人都可以使用几行代码]。

在侧面表格中,我有一个textarea,提交按钮和取消按钮。 当用户点击提交时,我想通过API将内容发送到Yammer墙。

我想在代码中的多个对象中使用此代码并使用一些参数

即。 someFunctionName(widgetName,widgetData)将显示一个图像,当用户点击图像时,它将显示一个textarea,以便用户可以提交消息[消息将在函数中使用两个字符串参数]或取消将隐藏表单。

我怎样才能做到这一点。简单的代码将是伟大的,而不是发送到API,你可以只提醒消息[消息是widgetName + widgetData +值相关的textarea]

我分享到目前为止我写的代码,但我知道它甚至不是我想要的。

提前致谢

       <html>
   <head>
       <title>A Yammer App</title>
       <script src="https://assets.yammer.com/platform/yam.js"></script>
    <script>
      yam.config({appId: "app-id-for-yammer"});
    </script>

<style type="text/css">

.yammertext {
  margin: 2px; width: 328px; height: 32px;
}


.show_hide {
    display:none;
}
</style>

</head>
<body>
    <script>
    function post() {
        yam.getLoginStatus( function(response) {
            if (response.authResponse) {
                yam.request(
                  { url: "https://www.yammer.com/api/v1/messages.json"
                  , method: "POST"
                  , data: { "body" : "Test yammer API - ED"}
                  , success: function (msg) { alert("Post was Successful!: " + msg); }
                  , error: function (msg) { alert("Post was Unsuccessful..." + msg); }
                  }
                );
            } else {
                yam.login( function (response) {
                  if (!response.authResponse) {
                    yam.request(
                      { url: "https://www.yammer.com/api/v1/messages.json"
                      , method: "POST"
                      , data: { "body" : "Test yammer API - ED"}
                      , success: function (msg) { alert("Post was Successful!: " + msg); }
                      , error: function (msg) { alert("Post was Unsuccessful..." + msg); }
                      }
                    );
                  }
                });
            }
        });
    }
    </script>


 <script type="text/javascript">

 function post2(a) {
      alert(a);
    }

</script>



<script type="text/javascript">
$(function() 
{

$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});

$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});

});
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>


<a href="#" class="show_hide">Yammer</a>
<div class="slidingDiv">
  <form method="post" action="">
    <textarea  id="content" class="yammertext"></textarea>
    <div id="button_block">
      <input type="submit" id="button" value=" Share " onclick="post2(this)"/>
      <input type="submit" id='cancel' value=" cancel" />
    </div>
  </form>
</div>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

如果您使用服务器端脚本语言。您可以使用表单将html文件包含在其中,然后将其包含在您希望的位置。这意味着您只需要一行代码来放置表单。

PHP中的EG将是

<?php include 'filename'; ?>

或者如果您希望可以使用jQuery .load()函数加载HTML文件

$("#DivNAme").load("Filename.html");