国产欧美亚洲精品,免费电影网站,国产欧美制服丝袜

Infragistics的jQuery編輯器上手教程

原創|其它|編輯：郝浩|2012-09-03 16:19:54.000|閱讀 363 次

概述：Infragistics的jQuery包中提供了一系列的編輯器部件，一般用來收集用戶輸入的信息，并驗證過濾用戶輸入，它作為基礎功能在各種應用程序中經常被使用。慧都這次為您帶來關于他們的詳細使用教程和一些使用技巧，盡可能的幫助你們快速上手Infragistics的兩大 jQuery編輯器產品：ASP.NET Editors 和 XAML Inputs，他們都在NetAdvantage Ultimate中.

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

Infragistics的jQuery包中提供了一系列的編輯器部件，一般用來收集用戶輸入的信息，并驗證過濾用戶輸入，它作為基礎功能在各種應用程序中經常被使用。

慧都這次為您帶來關于他們的詳細使用教程和一些使用技巧，盡可能的幫助你們快速上手Infragistics的兩大 jQuery編輯器產品：ASP.NET Editors 和 XAML Inputs，他們都在NetAdvantage Ultimate中。

下圖是在開始之前您需要了解的，一些關于編輯器的基礎介紹，在這里不多說了。

入門

資源

最基本的要添加的資源是編輯器和驗證器：

            $.ig.loader({
    scriptPath: 

                "//cdn-na.infragistics.com/jquery/20121/2049/js",
    cssPath: 

                &quot;//cdn-na.infragistics.com/jquery/20121/2049/css",
    resources: "igEditors,igValidator"
});

            

或使用MVC

            @using Infragistics.Web.Mvc;
@(Html.Infragistics().Loader()
    .CssPath(

                "//cdn-na.infragistics.com/jquery/20121/2049/css")
    .ScriptPath(

                &quot;//cdn-na.infragistics.com/jquery/20121/2049/js")
    .Resources("igEditors,igValidator").Render())

            

編輯器

在執行腳本編輯器時，你必須提供的實際標記（可以是一個容器元素或轉換后的實際輸入（S）），例如：

            <input id="date"/>

            

然后你就可以初始化，如：

            $("#date2").igDatePicker({
    inputName: 'date',
    required: true,
    validatorOptions: { onsubmit: true }
});

            

或使用MVC，自動創建的所有標記

            @(Html.Infragistics().DateTimeEditor().InputName("date")
.ValidatorOptions(validate => validate.OnSubmit(true))
.Required(true).Render())

            

獲取值

獲取值時一般建議采用創建新值，以區分開實際值，例如：

            [HttpPost]
public ActionResult Update(DateTime? date, DateTime? date2)
{
    /* use date and date2 here - e.g. perform additional checks
       and save the input to database, etc. */
    ViewBag.Message = "Entered date: " + date.ToString() +
        ", and date2: "  + date2.ToString();
 
    //return to the same view with the new message
    var path = Request.UrlReferrer.AbsolutePath;
    return View(path != "/" ? path.Split('/').Last() : "Index");
}

            

提高頁面的輸入體驗

通常情況下，輸入驗證的代碼為：

            form action="@Url.Action("Index")" method="post">
    <fieldset>
        <legend>Editorslegend>
            <label>First  name:label>
            <input name="name"/>
            <br/>
            <label>Phone: label>
            <input name="phone"/>
            <br/>
            <label>Email: label>
            <input name="email"/>
            <br/>
            <label>Description: label>
            <br/>
            <div id="descr">div>
    fieldset>
    <input type="submit" value="Send"> <input type="reset">
form>

            

最后的效果是這樣：

但是為了更好地利用HTML5，實現更好地頁面體驗，可以這樣：

            $.ig.loader(function () {
    $("input[name='name']").igMaskEditor({
        inputMask: ">L>LL????????????????",
        validatorOptions: {}
    });
 
    $("input[name='phone']").igMaskEditor({
        inputMask: "(000)0000 999",
        validatorOptions: {}
    });
 
    $("input[name='email']").igTextEditor();
 
    $("#descr").igTextEditor({
        textMode: "multiline",
        nullText: "Leave a note."
    });
});

            