Back
Style
One Big Orange Square.

View source code:

<div id="target" data-bind="style: {
        backgroundColor: selectedBackground,
        color: selectedColor,
        borderStyle: selectedBorderStyle,
        borderColor: selectedBorderColor,
        webkitBorderRadius: selectedBorderRadius,
        mozBorderRadius: selectedBorderRadius,
        borderRadius: selectedBorderRadius
    }">
    One Big Orange Square.
</div>
<ul>
    <li>
        Color: <select data-text-field="name" data-value-field="hex" data-bind="source: colors, value: selectedColor"></select>
    </li>
    <li>
        <label>Background color: <select data-text-field="name"
            data-value-field="hex" data-bind="source: colors, value: selectedBackground"></select></label>
    </li>
    <li>
        <label>Border color: <select data-text-field="name"
            data-value-field="hex" data-bind="source: colors, value: selectedBorderColor"></select></label>
    </li>
    <li>
        <label>Border style: <select data-text-field="name"
            data-value-field="value" data-bind="source: borders, value: selectedBorderStyle"></select></label>
    </li>
    <li>
        <label>Border radius: <select data-bind="source: radii, value: selectedBorderRadius"></select></label>
    </li>
</ul>
        

View model source code:

var viewModel = kendo.observable({
    selectedColor: "#8b0000",
    selectedBorderRadius: "20px",
    selectedBackground: "#ffd700",
    selectedBorderStyle: "solid",
    selectedBorderColor: "#ff8c00",
    radii: [ "0px", "5px", "10px", "20px" ],
    colors: [
        { name: "Dark Red", hex: "#8b0000" },
        { name: "Orange Red", hex: "#ff4500" },
        { name: "Dark Orange", hex: "#ff8c00" },
        { name: "Gold", hex: "#ffd700" }
    ],
    borders: [
        { name: "Solid", value: "solid" },
        { name: "Dashed", value: "dashed" },
        { name: "Double", value: "double" },
        { name: "Dotted", value: "dotted" },
        { name: "Ridge", value: "ridge" },
        { name: "None", value: "none" }
    ]
});

kendo.bind($("#example"), viewModel);
        
aspxhtml文档合集 | AspxHtml学习分享网 | ConnectionStrings | 机发库