[EasyUI + MVC - 백 스테이지 프레임 구축]

3346 단어 jquerymvceasyui
1. EasyUI 소개:
jQuery EasyUI 는 jQuery 를 기반 으로 한 UI 플러그 인 집합체 이 며, jQuery EasyUI 의 목 표 는 웹 개발 자 들 이 기능 이 풍부 하고 아름 다운 UI 인터페이스 를 쉽게 만 들 수 있 도록 돕 는 것 이다.
공식 사이트:http://www.jeasyui.com/ 
2. EasyUI 패 키 지 를 다운로드 하여 배경 프레임 워 크 구축
최신 EasyUI 패키지 다운로드:http://www.jeasyui.com/download/index.php
【EasyUI+MVC-搭建后台框架】_第1张图片
최신 Easyui 테마 패키지 다운로드:http://www.jeasyui.com/extension/themes.php
3. 새로 만 든. NET MVC 웹 프로젝트
MVC 웹 프로그램 을 새로 만 듭 니 다. 다운로드 한 EasyUI 패키지 와 테마 패키지 의 압축 을 풀 고 프로젝트 디 렉 터 리 로 복사 합 니 다.
【EasyUI+MVC-搭建后台框架】_第2张图片
새 컨트롤 러 홈, 보기 페이지 인덱스 추가.head 부분 코드 는 다음 과 같 습 니 다.
body 부분 코드:
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*  *@
    <link id="easyuiTheme" href="~/Content/jquery-easyui-1.4.5/themes/metro/easyui.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.5/themes/color.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.5/demo/demo.css" rel="stylesheet" />
    <script src="~/Content/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="~/Content/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
     <style type="text/css">
        .fm {
            margin: 0;
            padding: 10px 30px;
        }

        .ftitle {
            font-size: 14px;
            font-weight: bold;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }

        .fitem {
            margin-bottom: 5px;
        }

        .fitem label {
            display: inline-block;
            width: 80px;
        }

        .fitem input {
            width: 160px;
        }
    </style>
</head>

4. 작업 구역 배치
【EasyUI+MVC-搭建后台框架】_第3张图片
5. 메뉴 표시 줄 클릭: 왔다갔다 전환
【EasyUI+MVC-搭建后台框架】_第4张图片
6. 테마 변경: 메시지 알림 메시지 자동 종료
7. 작업 영역 에 동적 으로 Tab 옵션 을 추가 합 니 다.

좋은 웹페이지 즐겨찾기