Question

我想在Jquery下面调用

 <h:outputScript target="head">
$('#box').focus(function()
        {
            /*to make this flexible, I'm storing the current width in an attribute*/
            $(this).attr('data-default', $(this).width());
            $(this).animate({ width: 150 }, 'fast');
        }).blur(function()
        {
            /* lookup the original width */
            var w = $(this).attr('data-default');
            $(this).animate({ width: w }, 'fast');
        });
</h:outputScript>

和 Primefaces textbox代码位于

之下

<p:inputText style="margin-right:10px" id="box"/>

我正在尝试这样的事情onclick-expand-textbox-width

我的文件是这样的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <style>
.ui-menubar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #3e9cbf  !important ;
}

.ui-menubar .ui-menuitem {
    width: auto;
    clear: none;
    margin-right: 3px;

}

.ui-menubar .ui-state-hover  {
    background-color: #E0ECF8 !important;
     color: #557FFF;
}
.ui-menuicon {
    background: url(images/vertical_line.jpg) no-repeat;
    height: 16px;
    width: 16px;

}

 .ui-button-text {
    background-color: #FFFFFF;
}
.ui-button-text-only .ui-button-text {
   font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #557FFF;
    width: 50px;
}
.ui-button.ui-state-hover  {
    background-color: #557FFF !important;
     color: white;
}
</style>

</h:head>
<h:body>
<h:outputScript target="head">
$('#box').focus(function()
        {
            /*to make this flexible, I'm storing the current width in an attribute*/
            $(this).attr('data-default', $(this).width());
            $(this).animate({ width: 150 }, 'fast');
        }).blur(function()
        {
            /* lookup the original width */
            var w = $(this).attr('data-default');
            $(this).animate({ width: w }, 'fast');
        });
</h:outputScript>
        <p:menubar styleClass="ui-menubar">
            <p:menuitem>
                <p:graphicImage value="/resources/images/qim_logo_inner.png"
                    style="height:37px;width:150px" />
            </p:menuitem>
            <p:menuitem value="Dashboard" style="color:white;"
                url="/welcome.xhtml" />
            <p:menuitem disabled="true" style="color:white;" value="|" />
            <p:menuitem value="Questions" url="/core/search.xhtml"
                style="color:white;" />
            <p:menuitem value="|" disabled="true" style="color: white;" />
            <p:menuitem value="Members" url="#" style="color:white;" />
            <p:menuitem value="|" disabled="true" style="color: white;" />
            <p:menuitem value="Technologies" url="#" style="color:white;" />
            <p:menuitem value="|" disabled="true" style="color: white;" />
            <p:menuitem value="Ask a Question" url="/core/ask_question.xhtml"
                style="color:white;" />

            <f:facet name="options">
                <p:inputText style="margin-right:10px" id="box"/>
                <p:commandButton type="button" value="Search" 
                    url="/core/search.xhtml" />
            </f:facet>
        </p:menubar>


</h:body>
</html>

Answer 1

问题是，id="box"不会作为#box可寻址的HTML ID出现。它将呈现为id="myForm:box"。如果你有这个，你必须使你的jQuery选择器兼容，因为冒号已经是jQuery选择器语法中的保留char。因此，您必须按以下方式转义选择器$('#myForm\\:box').focus(...)。

<h:body>
  <h:form id="myForm">
    ...
      <p:inputText style="margin-right:10px" id="box"/>
    ...
  </h:form>
</h:body>

如何从文本框onclick-Primefaces调用Jquery函数

1 个答案: