OSS で利用できる機能

エディター - 基本的な使用方法

このサンプルは利用可能なほとんどのエディターコントロールを紹介します。

測定単位

メトリックインペリアル

顧客

配送先住所

キュービックメーターの価格

連絡先のメール

出荷日付

キュービックメーターの量

無料の出荷を適用

割引を適用

合計:

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <style>
        #container
        {
            width: 100%;
            min-width: 900px;
            max-width: 900px;
            display: inline-block;
        }

        #formContainer
        {
            top: 0px;
            left: 0px;
            height: 500px;
            width: 750px;
            padding-top: 15px;
            float: left;
            margin-left: 20px;
        }

        .element
        {
            width: 200px;
            margin-right: 40px;
            float: left;
            height: 3.75em;
        }
        .element.mid
        {
            margin-left: 240px;
            margin-top: 20px;
        }

        p.inline
        {
            display: inline-block;
        }

        #total
        {
            font-weight: bold;
            font-size: large;
            text-align: right;
        }

        #successMessageDiv
        {
            position: relative;
            bottom: 0;
            text-align: center;
            font-size: larger;
            color: green;
        }

        #client
        {
            margin-top: 85px;
        }

        #delivery
        {
            margin-top: 145px;
        }

        #submitPurchase{
            float:right;
            margin-right:75px;
            margin-top:10px;
        }

        #mainInfo
        {
            margin-bottom: 80px;
            margin-top: 25px;
        }

        @media only screen and (max-width: 780px)
        {
            #container
            {
                height: 600px;
            }

            .element
            {
                float: none;
                margin: 10px 0 10px 0 !important;
            }

            #client
            {
                margin-top: 0;
            }

            #delivery
            {
                margin-top: 0;
            }

            #priceContainer
            {
                margin-top: 0;
                margin-left: 0;
            }

            #mainInfo
            {
                margin-bottom: 0;
            }

            #successMessageDiv
            {
                text-align: unset;
                position:absolute;
            }
            #submitPurchase{
                float:left;
            }
        }
    </style>
    <div id="container">
        <div id="formContainer">
            <p class="inline">測定単位</p>
            <input type="radio" name="radioMeasurement" id="radioMetric" value="metric" onchange="radioChange()" checked />
            <label for="radioM">メトリック</label>
            <input type="radio" name="radioMeasurement" id="radioImperial" value="imperial" onchange="radioChange()" />
            <label for="radioI">インペリアル</label>

            <div id="mainInfo">
                <div class="element">
                    <label for="client">顧客</label>
                    <input id="clientName" type="text" name="client" />
                </div>

                <div class="element">
                    <label for="address">配送先住所</label>
                    <input id="deliveryAddress" name="address" />
                </div>
                <div class="element">
                    <label for="pricem3">キュービック メーターの価格</label>
                    <input id="price" name="pricem3" />
                </div>
            </div>

            <div id="client">
                <div class="element">
                    <label for="mail">連絡先のメール</label>
                    <input id="clientMail" name="mail" />
                </div>

                <div class="element">
                    <label for="date">出荷日付</label>
                    <input id="deliveryDate" name="date" />
                </div>
                <div class="element">
                    <label for="amountm3">キュービック メーターの量</label>
                    <input id="amount" name="amountm3" />
                </div>
            </div>

            <div id="delivery">
                <div class="element mid">
                    <input id="freeDelivery" />
                    <label for="freeDelivery">無料の出荷を適用</label>
                </div>
                <div class="element">
                    <label for="applyDiscount">割引を適用</label>
                    <input id="discount" name="applyDiscount" />
                </div>
            </div>

            <div id="priceContainer">
                <div id="submitPurchase">
                    <p id="total">合計: </p>
                    <input type="submit" id="createOrder" value="注文書を作成" style="height: 25px; width: 200px;" onclick="createNewOrder()" />
                
                    <div id="successMessageDiv">
                        <p id="successMessage" class="inline"></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript">
        $('#clientName').igTextEditor({
            placeHolder: "会社名"
        });
        $('#clientMail').igTextEditor({
            placeHolder: "someone@example.com"
        });
        $('#clientMail').igValidator({
            email: true,
            notificationOptions: {
                direction: "bottom",
                mode: "popover"
            }
        });
        $('#deliveryAddress').igTextEditor({
            placeHolder: "住所、私書箱番号"
        });
        $('#deliveryDate').igDateEditor({
            placeHolder: "2015/12/30"
        });
        $('#freeDelivery').igCheckboxEditor({
        	size: "small",
        	valueChanged: function (e, args) {
        		var totalText = $("#total").text().replace("合計: ", ""),
					total = parseFloat(totalText, 10);
					
        		if (args.newValue) {
        			total = total - 20;
        		} else {
        			total = total + 20;
        		}
        		$("#total").text("合計: " + total);
        	}
        });
        $('#price').igCurrencyEditor({
            value: "79",
            minValue : 0,
            currencySymbol: "€"
        });
        $('#amount').igNumericEditor({
            dataMode: "int",
            value: 10,
            minValue: 1,
            blur: function (evt) {
                calculateTotalPrice();
            }
        });
        $('#discount').igPercentEditor({
            value: 0.08,
            minValue: 0
        });

        $(document).delegate("#price", "igcurrencyeditorblur", function (evt) {
            calculateTotalPrice();
        });

        $(document).delegate("#discount", "igpercenteditorblur", function (evt) {
            calculateTotalPrice();
        });

        calculateTotalPrice();

        function radioChange() {
            var radioMetric = document.getElementById("radioMetric");
            if (radioMetric.checked) {
                var imperialPrice = $('#price').igCurrencyEditor("option", "value");
                //Change the currency symbol to Euros
                $('#price').igCurrencyEditor("option", "currencySymbol", "€");
                //Calculate the price in Euros
                $('#price').igCurrencyEditor("option", "value", calculateNewPrice(imperialPrice));
                //Update labels to Metric units
                $("label[for='pricem3']").text("キュービック メーターの価格");
                $("label[for='amountm3']").text("キュービック メーターの量");

                //Update igNumericEditor
                //Update the amount in cubic meter
                var yardAmount = $('#amount').igNumericEditor("option", "value");
                $('#amount').igNumericEditor("option", "value", calculateNewAmount(yardAmount));

                //Update Total price
                calculateTotalPrice();
            }
            else {
                //Update igCurrencyEditor
                var metricPrice = $('#price').igCurrencyEditor("option", "value");
                //Change the currency symbol to Dollar
                $('#price').igCurrencyEditor("option", "currencySymbol", "$");
                //Calculate the price in Dollars
                $('#price').igCurrencyEditor("option", "value", calculateNewPrice(metricPrice));
                //Update labels to Imperial units
                $("label[for='pricem3']").text("キュービック ヤードの価格");
                $("label[for='amountm3']").text("キュービック ヤードの量");

                //Update igNumericEditor
                //Update the amount in cubic yard
                var metricAmount = $('#amount').igNumericEditor("option", "value");
                $('#amount').igNumericEditor("option", "value", calculateNewAmount(metricAmount));

                //Update Total price
                calculateTotalPrice();
            }
        }

        function calculateNewPrice(oldPrice) {
            var radioMetric = document.getElementById("radioMetric");
            var newPrice;
            if (radioMetric.checked) {
                newPrice = oldPrice * 0.8;
                return newPrice;
            }
            else {
                newPrice = oldPrice * 1.25;
                return newPrice;
            }
        }

        function calculateNewAmount(oldAmount) {
            var radioMetric = document.getElementById("radioMetric");
            var newAmount;
            if (radioMetric.checked) {
                newAmount = oldAmount * 0.77;
                return newAmount;
            }
            else {
                newAmount = oldAmount * 1.30;
                return newAmount;
            }
        }

        function calculateTotalPrice() {
            var pricePerUnit = $('#price').igCurrencyEditor("option", "value");
            var unitsAmount = $('#amount').igNumericEditor("option", "value");
            var discount = $('#discount').igPercentEditor("option", "value");
            var pricePerUnitWithDiscount = pricePerUnit - (pricePerUnit * discount);
            var totalPrice = pricePerUnitWithDiscount * unitsAmount;

            $("#total").text("合計: " + Math.round10(totalPrice, -2));
        }

        function createNewOrder() {
            $("#successMessage").text("注文書が作成されました。");
            $("#successMessage").stop(true, true).fadeIn(200).fadeOut(3000);
        }
    </script>
</body>
</html>

             <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'basic-usabe.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             import { Component, NgModule, OnChanges  } from '@angular/core';
import { IgCurrencyEditorComponent, IgDateEditorComponent, IgMaskEditorComponent, IgNumericEditorComponent,
	IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent,  IgValidatorComponent, IgCheckboxEditorComponent } from "/src/igniteui.angular2";
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;
@Component({
	selector: 'my-app',
	template: `
        <style>
            #container {
                width: 100%;
                min-width: 900px;
                max-width: 900px;
                display: inline-block;
            }

            #formContainer {
                top: 0px;
                left: 0px;
                height: 500px;
                width: 750px;
                padding-top: 15px;
                float: left;
                margin-left: 20px;
            }

            .element {
                width: 200px;
                margin-right: 40px;
                float: left;
                height: 3.75em;
            }

                .element.mid {
                    margin-left: 240px;
                    margin-top: 20px;
                }

            p.inline {
                display: inline-block;
            }

            #total {
                font-weight: bold;
                font-size: large;
                text-align: right;
            }

            #successMessageDiv {
                position: relative;
                bottom: 0;
                text-align: center;
                font-size: larger;
                color: green;
            }

            #client {
                margin-top: 85px;
            }

            #delivery {
                margin-top: 145px;
            }

            #submitPurchase {
                float: right;
                margin-right: 75px;
                margin-top: 10px;
            }

            #mainInfo {
                margin-bottom: 80px;
                margin-top: 25px;
            }
        </style>
        <div id="formContainer">

            <div id="mainInfo">
                <div class="element" style="margin-right: 40px;">
                    <label for="client">顧客</label>
                    <ig-text-editor [(ngModel)]="clientvalue" [options]="{placeHolder: '会社名'}"></ig-text-editor>
                </div>

                <div class="element" style="margin-right: 40px;">
                    <label for="address">配送先住所</label>
                    <ig-text-editor [(ngModel)]="editors.address" [options]="{placeHolder: '住所、私書箱番号'}"></ig-text-editor>
                </div>
                <div class="element">
                    <label for="pricem3">キュービック メーターの価格</label>
                    <ig-currency-editor [(ngModel)]="editors.price"></ig-currency-editor>
                </div>
            </div>

            <div id="client">
                <div class="element" style="margin-right: 40px;">
                    <label for="mail">連絡先のメール</label>

                    <ig-text-editor widgetId="email" [(ngModel)]="editors.email" [options]="editors.emailEditor"></ig-text-editor>
                </div>

                <div class="element" style="margin-right: 40px;">
                    <label for="date">出荷日付</label>
                    <ig-date-editor [(ngModel)]="editors.date"></ig-date-editor>
                </div>
                <div class="element">
                    <label for="amountm3">キュービック メーターの量</label>
                    <ig-numeric-editor [(ngModel)]="editors.amount" [options]="{buttonType:'clear,spin'}"></ig-numeric-editor>
                </div>
            </div>

            <div id="delivery">
                <div class="element mid">
                    <ig-checkbox-editor [(ngModel)]="editors.freedelivery"></ig-checkbox-editor>
                    <label for="freeDelivery">無料の出荷を適用</label>
                </div>
                <div class="element">
                    <label for="applyDiscount">割引を適用</label>
                    <ig-percent-editor [(ngModel)]="editors.discount"></ig-percent-editor>
                </div>
            </div>

            <div id="priceContainer">
                <div id="submitPurchase">
                    <p id="total">合計: : {{this.total}}</p>
                    <input type="button" id="createOrder" value="注文書を作成" style="height: 25px; width: 200px;" (click)="clickHandler()" />

                    <div id="successMessageDiv">
                        <p id="successMessage" style="display: inline-block;">{{this.editors.successMessage}}</p>
                    </div>
                </div>
            </div>
        </div>`
})
export class AppComponent {
	public editors: any;
	public today: Date;

	get total() {
		this.editors.total = this.editors.amount * (this.editors.price - this.editors.discount * this.editors.price);
		if (!this.editors.freedelivery) {
			this.editors.total += 20;
		}
		return this.editors.total;
	}


	clickHandler() {
		this.editors.successMessage = "注文書が作成されました。";
	}
	constructor() {
		this.today = new Date();
		this.editors = {
			client: '',
			email: '',
			emailEditor: {
				placeHolder: 'someone@example.com',
				validatorOptions: {
					email: true,
					onblur: true,
				  	notificationOptions: {
						  direction: "bottom",
						  mode: "popover"
					}
				}
			},
			address: '',
			freedelivery: false,
			price: 79,
			amount: 1,
			discount: 0.06,
			date:  new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() + 1),
			total: 0
		};
	}
}

@NgModule({
	imports:	  [ BrowserModule, FormsModule ],
	declarations: [ AppComponent, IgCurrencyEditorComponent, IgDateEditorComponent, IgMaskEditorComponent, IgNumericEditorComponent,
	IgPercentEditorComponent, IgTextEditorComponent, IgDatePickerComponent, IgCheckboxEditorComponent, IgValidatorComponent ],
	bootstrap:	[ AppComponent ]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

             <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>

    <style>
        #app {
          width: 100%;
          min-width: 400px;
        }

        #app .ui-igedit{
          margin: 5px;
        }
        p.inline
        {
          display: inline-block;
        }
    </style>
</head>
<body>
    <div id="app">
        <script type="text/babel">
        var App = React.createClass({
            getInitialState: function () {
                return {
                    total: "",
                    price: {
                        value: "79",
                        minValue: 0,
                        currencySymbol: "€"
                    },
                    amount: {
                        value: 10,
                        minValue: 1
                    },
                    discount: {
                        value: "0.08"
                    }
                }
            },
            units: "metric",
            componentDidMount: function() {
                this.calculateTotalPrice();
            },
            calculateTotalPrice: function() {
                var pricePerUnit = this.state.price.value;
                var unitsAmount = this.state.amount.value;
                pricePerUnit -= pricePerUnit * this.state.discount.value;
                var totalPrice = pricePerUnit * unitsAmount;

                this.setState({ total: Math.round10(totalPrice, -2) });
            },
            createNewOrder: function() {
                $("#successMessage").text("注文書が作成されました。");
                $("#successMessage").stop(true, true).fadeIn(200).fadeOut(3000);
            },
            calculateNewPrice: function (oldPrice) {
                var newPrice;
                if (this.units == "metric") {
                    newPrice = oldPrice * 0.8;
                    return newPrice;
                }
                else {
                    newPrice = oldPrice * 1.25;
                    return newPrice;
                }
            },
            calculateNewAmount: function (oldAmount) {
                var newAmount;
                if (this.units == "metric") {
                    newAmount = oldAmount * 0.77;
                    return newAmount;
                }
                else {
                    newAmount = oldAmount * 1.30;
                    return newAmount;
                }
            },
            /* events */
            valueChangedHandler: function (ev, ui) {
                var state = this.state[ui.owner.id];
                state.value = ui.newValue;
                this.setState({ state });
                this.calculateTotalPrice();
            },
            deliveryChanged: function (ev, ui) {
                var total = this.state.total;

                if (ui.newValue) {
                    total = total - 20;
                } else {
                    total = total + 20;
                }
                this.setState({ total: total });
            },
            radioChange: function (e) {
                var price = this.state.price,
                    amount = this.state.amount;

                this.units = e.currentTarget.value;

                if (this.units == "metric") {
                    //Change the currency symbol to Euros
                    price.currencySymbol = "€";
                }
                else {
                    //Change the currency symbol to Dollar
                    price.currencySymbol = "$";
            
                }
                //Calculate the price in Euros/Dollars
                price.value = this.calculateNewPrice(price.value).toString();

                //Update igNumericEditor
                //Update the amount in cubic meter/yard
                amount.value = this.calculateNewAmount(amount.value);

                //Update Total price
                this.setState({ price, amount });
                this.calculateTotalPrice();
            },
            render: function () {
                return (<div>
                    <p className="inline">測定単位</p>
                    <input type="radio" name="radioMeasurement" value="metric"
                        onChange={this.radioChange} defaultChecked={true}/>
                    <label htmlFor="radioM">メトリック</label>
                    <input type="radio" name="radioMeasurement" value="imperial"
                        onChange={this.radioChange} />
                    <label htmlFor="radioI">インペリアル</label>
                <div>
                </div>
                    <IgTextEditor id="clientName" placeHolder="会社名" />
                    <IgTextEditor id="clientMail" placeHolder="someone@example.com" />
                    <IgTextEditor id="deliveryAddress" placeHolder="住所、私書箱番号" />
                    <IgDateEditor id="deliveryDate" placeHolder="2015/12/30" />
                    <div>
                        <IgCheckboxEditor id="freeDelivery"
                            size="small" valueChanged={this.deliveryChanged}/>
                        <label>無料の出荷を適用</label>
                    </div>
                    <IgCurrencyEditor id="price" 
                        value={this.state.price.value}
                        valueChanged={this.valueChangedHandler}
                        minValue={this.state.price.minValue}
                        currencySymbol={this.state.price.currencySymbol} />
                    <IgNumericEditor id="amount" dataMode="int"
                        value={this.state.amount.value}
                        minValue={this.state.amount.minValue}
                        valueChanged={this.valueChangedHandler} />
                    <IgPercentEditor id="discount"
                        value={this.state.discount.value} minValue={0}
                        valueChanged={this.valueChangedHandler} />
                    <div id="priceContainer">
                        <div id="submitPurchase">
                            <p id="total">合計:  {this.state.total} </p>
                            <input type="submit" id="createOrder"
                                value="注文書を作成"onClick={this.createNewOrder} />

                            <div id="successMessageDiv">
                                <p id="successMessage"></p>
                            </div>
                        </div>
                    </div>
                </div>
                )
            }
        });

        ReactDOM.render(
            <App />,
            document.getElementById("app")
        );
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

エディター - 基本的な使用方法

コードビュー

Ignite UI for jQuery | サンプル

検索結果

エディター - 基本的な使用方法

コード ビュー

コードビュー