Ektron 中的内联脚本标签/JQuery答案

【问题标题】：Inline Script tags/JQuery in EktronEktron 中的内联脚本标签/JQuery
【发布时间】：2013-08-01 15:51:06
【问题描述】：

我正在尝试调用 google-jquery 和 ektron 中的一些内联脚本/样式标签。我是 CMS 的新手，这可能吗？代码如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $('#accordion-js').find('h2').click(function(){
            $(this).next().slideToggle();
            }).next().hide();
        });

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

$('#accordion-js').find('h2').toggle(function(){
    $(this).css("background-color","#04396D");
    $(this).css("background-image","url('101_up.png')");
    $(this).css("background-position", "center right");
    $(this).css("background-repeat","no-repeat");
    $(this).css("color","#FFF");
    }, 
function(){    
    $(this).css("background-color","#f4f4f4");
    $(this).css("background-image","url('101_down.png')");
    $(this).css("background-position", "center right");
    $(this).css("background-repeat","no-repeat");
    $(this).css("color","#777");
    });
});
</script>

【问题讨论】：

我有点不清楚您要做什么。看起来您已成功包含 jquery 并正在使用它。您的问题是如何使用上述代码在 Ektron 中创建切换手风琴？要使用上面的代码，只需将它放在您的 ASPX 模板中，它就会像在任何 webforms 应用程序中一样运行。

标签： jquery ektron

【解决方案1】：

如果您尝试从 CMS 内容生成手风琴，则需要执行许多其他步骤才能将内容检索到您的页面上。

第 1 步：创建一个 aspx 模板页面，并将该 javascript 代码放在上面

第 2 步：将像 asp:repeater 这样的重复控件拖放到您的模板上。有很多关于这方面的教程。一个简单的例子是http://msdn.microsoft.com/en-us/library/zzx23804(v=vs.85).aspx

第 3 步：将 ektron 内容列表数据绑定到中继器。此代码类似于以下内容：

Aspx 标记：

<div id="accordion-js">
  <asp:Repeater ID="myAccordion" runat="server">
    <ItemTemplate>
      <h2>Content Title:<%# Eval("Title") %></h2>
      <p>Content Body:<%# Eval("Html") %></p>
    <ItemTemplate>
  </asp:Repeater>
</div>

Aspx.cs 代码隐藏：

protected void Page_Load(object sender, EventArgs e)
{
  //create a content manager to interact with the CMS
  Ektron.Cms.Framework.Content.ContentManager cCRUD = 
   new Ektron.Cms.Framework.Content.ContentManager();
  //create a content criteria to select content meeting specified filtering criteria from the manager
  Ektron.Cms.Content.ContentCriteria contentSelector = 
   new Ektron.Cms.Content.ContentCriteria();
  //specify a filter - in this case, all content in folder '0' (the root)
  contentSelector.AddFilter(
   Ektron.Cms.Common.ContentProperty.FolderId,
   Ektron.Cms.Common.CriteriaFilterOperator.EqualTo, 
   0);
  //get the list and set it as the source of our repeater
  myAccordion.DataSource = cCRUD.GetList(contentSelector);
  //bind the list to the repeater
  myAccordion.DataBind();
}

【讨论】：

【解决方案2】：

有几种方法可以做到这一点。

如果您从后面的代码中执行此操作。下面的警告框可以是任意多的代码。

JS.RegisterJSBlock(this, "alert('hello');", "MyAlertId");

JS.RegisterJSInclude(this, "http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js", "GoogleJQuery1.7.");

Ektron 默认也包含它自己的 jQuery，这可能值得一试。

创可贴的解决方案是使用 HTML 内容块并将代码粘贴到其中，然后使用内容块控件小部件将其拖放到页面上。不是最好的方法，但它确实可以完成今天的工作，尽管没有人会为您的出色解决方案喝彩。

为了解决这个问题，我们构建了一个 Widget，它使用代码隐藏技术将代码放入页面。它使用自定义智能表单，适用于这些紧急情况。

祝你好运。

【讨论】：