1. 程式人生 > >以SpringMVC框架為中心瘋狂擴充套件-11、新增easyui

以SpringMVC框架為中心瘋狂擴充套件-11、新增easyui

1、下載easyui的包,並解壓到相同的位置


2、修改velocityIndex.vm

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataList - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/css/themes/icon.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>${user.name} DataList ${user.date}</h2>
    <p>The DataList can be created from the <ul> element.</p>
    <div style="margin:20px 0;"></div>
    <ul class="easyui-datalist" title="Basic DataList" lines="true" style="width:400px;height:250px">
        <li value="AL">Alabama</li>
        <li value="AK">Alaska</li>
        <li value="AZ">Arizona</li>
        <li value="AR">Arkansas</li>
        <li value="CA">California</li>
        <li value="CO">Colorado</li>
        <li value="CT">Connecticut</li>
        <li value="DE">Delaware</li>
        <li value="FL">Florida</li>
        <li value="GA">Georgia</li>
        <li value="HI">Hawaii</li>
        <li value="ID">Idaho</li>
        <li value="IL">Illinois</li>
        <li value="IN">Indiana</li>
        <li value="IA">Iowa</li>
        <li value="KS">Kansas</li>
        <li value="KY">Kentucky</li>
        <li value="LA">Louisiana</li>
        <li value="ME">Maine</li>
        <li value="MD">Maryland</li>
        <li value="MA">Massachusetts</li>
        <li value="MI">Michigan</li>
        <li value="MN">Minnesota</li>
        <li value="MS">Mississippi</li>
        <li value="MO">Missouri</li>
        <li value="MT">Montana</li>
        <li value="NE">Nebraska</li>
        <li value="NV">Nevada</li>
        <li value="NH">New Hampshire</li>
        <li value="NJ">New Jersey</li>
        <li value="NM">New Mexico</li>
        <li value="NY">New York</li>
        <li value="NC">North Carolina</li>
        <li value="ND">North Dakota</li>
        <li value="OH">Ohio</li>
        <li value="OK">Oklahoma</li>
        <li value="OR">Oregon</li>
        <li value="PA">Pennsylvania</li>
        <li value="RI">Rhode Island</li>
        <li value="SC">South Carolina</li>
        <li value="SD">South Dakota</li>
        <li value="TN">Tennessee</li>
        <li value="TX">Texas</li>
        <li value="UT">Utah</li>
        <li value="VT">Vermont</li>
        <li value="VA">Virginia</li>
        <li value="WA">Washington</li>
        <li value="WV">West Virginia</li>
        <li value="WI">Wisconsin</li>
        <li value="WY">Wyoming</li>
    </ul>
    
    
    <h2>Basic Panel</h2>
    <p>The panel is a container for other components or elements.</p>
    <div style="margin:20px 0 10px 0;">
        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
    </div>
    <div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;">
        <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
        <ul>
            <li>easyui is a collection of user-interface plugin based on jQuery.</li>
            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
            <li>complete framework for HTML5 web page.</li>
            <li>easyui save your time and scales while developing your products.</li>
            <li>easyui is very easy but powerful.</li>
        </ul>
    </div>
    
</body>
</html>
3、重新整理下頁面,就能看到效果了。

上面的例子是在easyui中隨便找的。