zsharedcode - JEBase.wiki

summary JQueryElement 基本属性参考

http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http://code.google.com/p/zsharedcode/wiki/JEBase'>Translate this page

简介/目录

请到下载资源的 JQueryElement 示例下载一节*下载示例代码, 目录 /JQueryElementBase.aspx.

本文将说明 JQueryElement 的主要属性的作用:

JQueryElement 选择器
ElementType 属性
设置内容
IsVariable 属性
ScriptPackageID 属性

JQueryElement 选择器

JQueryElement 选择器用于设置 JQueryElement 控件的容器, 可以用在 Selector 属性或者 Parameter 的 Value 属性中:
按钮 1 在这里:


<je:Button ID="button1" runat="server" Label="按钮 1">


</je:Button>





按钮 2 在这里: <span id="button2"></span>





<je:Button ID="cmd2" runat="server" Selector="#button2" Label="按钮 2">


</je:Button>
当没有指定 Selector 属性时, JQueryElement 将选择自身作为容器, 上面示例中的 button1 就选择自身作为容器. 而 cmd2 的 Selector 属性为 #button2, 这是一个标准的 jQuery 选择器, 因此 span 元素成为了按钮 2的容器.

JQueryElement 选择器可以是一个 javascript 表达式, 例如:
<script type="text/javascript">


    var div = "#button3";


</script>





按钮 3 在这里: <div>按钮 div</div> <span id="button3">按钮 3</span>





<je:Button ID="cmd3" runat="server" Selector="div">


</je:Button>
Selector 属性被设置为 div, 但并不会被认为是一个 jQuery 选择器, 因为声明了名为 div 的 javascript 变量, 因此变量 div 的值被当作选择器, 而 id 属性为 button3 的 span 元素将作为按钮的容器.

那么, 如何解决这种冲突哪? 将选择器用单引号括住即可:
<script type="text/javascript">


    var button = "#button4";


</script>





按钮 4 在这里: <button>按钮 button</button> <span id="button4">按钮 4</span>





<je:Button ID="cmd4" runat="server" Selector="'button'">


</je:Button>
由于在 Selector 属性中使用了单引号, 因此会选择 button 元素作为容器, 而不是 id 属性为 button4 的 span 元素.

ElementType 属性

可以通过 ElementType 属性来设置 JQueryElement 控件的元素名称:
<je:Button ID="buttonSpan" runat="server" Label="按钮 span">


</je:Button>





<je:Button ID="buttonDiv" runat="server" ElementType="Div" Label="按钮 div">


</je:Button>
Button 控件默认使用 span, 示例中, 将按钮 buttonDiv 的 ElementType 设置为 Div, 因此 buttonDiv 的容器将是 div 元素.

设置内容

可以通过 Html, Text, ContentTemplate 来设置 JQueryElement 控件的内容:
<je:Button ID="buttonText" runat="server" Text="按钮 text">


</je:Button>








<je:Button ID="buttonHtml" runat="server" Html="<strong>按钮 <font color='red'>html</font></strong>">


</je:Button>








<je:Button ID="buttonContentTemplate" runat="server">


    <ContentTemplate>


        按钮 <strong>content</strong>


    </ContentTemplate>


</je:Button>
Button 控件将元素的内容作为文本, 因此通过 Html, Text, ContentTemplate 设置元素的内容后, 将显示为按钮的文本.

Text 属性可以设置元素中的文字.

Html 属性可以设置元素中的 html 代码, 如果设置, 则 Text 属性将无效.

ContentTemplate 同样设置元素的 html 代码, 如果设置, 则 Html, Text 属性将无效.

IsVariable 属性

IsVariable 属性将控制是否生成与 ClientID 属性相同的 javascript 变量:

<html>





    <je:Button ID="buttonVariable1" runat="server" Text="按钮 variable 1" IsVariable="true">


    </je:Button>


    <je:Button ID="buttonVariable2" runat="server" Text="按钮 variable 2" IsVariable="true">


    </je:Button>


    <je:Button ID="buttonVariable3" runat="server" Text="按钮 variable 3">


    </je:Button>





</html>





<script type="text/javascript">


    $(function () {


        buttonVariable1.button('disable');


        $('#buttonVariable3').button('disable');


    });


</script>





<je:JQueryScript ID="jqueryScript" runat="server">


    <ContentTemplate>


        <script type="text/javascript">


        $(function () {


            eval('[%id:buttonVariable2%]').button('disable');


        });


        </script>


    </ContentTemplate>


</je:JQueryScript>

通过将 IsVariable 设置为 true, 按钮 buttonVariable1 和 buttonVariable2 分别生成了和 ClientID 相同的 javascript 变量, 因此通过变量 buttonVariable1 就可以访问 button.

buttonVariable3 没有生成 javascript 变量, 但仍然可以通过 ClientID 和 jQuery 来访问.

如果 ClientID 比较复杂, 则可以使用内嵌表达式 [%id:<控件 ID>%] 来获取 ClientID, 但需要写在 JQueryScript 控件或者 JQueryElement 控件的属性中.

ScriptPackageID 属性

ScriptPackageID 属性指示生成 javascript 脚本的 ScriptPackage 控件, 也就是 JQueryElement 控件对应的脚本将在 ScriptPackage 控件中生成:
<je:Button ID="buttonPackage1" runat="server" Text="按钮 package 1" ScriptPackageID="package">


</je:Button>


<je:Button ID="buttonPackage2" runat="server" Text="按钮 package 2" ScriptPackageID="package">


</je:Button>


<je:ScriptPackage ID="package" runat="server" />

Code

Archive