Jquery là thư viện của Javascript giúp đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web. Jquery thực hiện truy xuất đến các phần tử trong ứng dụng thông qua thuộc tính “id” của phần tử đó. Ngoài ra, Jquery còn cho phép tạo các hiệu ứng động, cung cấp các mẫu css đẹp mắt chỉ cần khai báo và sử dụng. Có các Event Handler để xử lý những sự kiện khi có sự tương tác của người dùng .
Ví dụ: Khai báo các jquery sử dụng hiển thị kết quả xét tuyển tạm thời. <!--table sorter-->
<script src="~/Scripts/tablesorter-master/js/jquery.tablesorter.js"></script> <script src="~/Scripts/tablesorter-
master/js/jquery.tablesorter.widgets.js"></script>
<script src="~/Scripts/tablesorter-master/js/widgets/widget-scroller.js"></script> <link href="~/Scripts/tablesorter-master/css/theme.ice.css" rel="stylesheet" /> <link href="~/Scripts/tablesorter-master/css/theme.blue.css" rel="stylesheet" />
<script>
var DANHSACH_BAC_NGHANH_JS = [@Html.Raw(Json.Encode(DANHSACH_BAC_NGHANH))][0]; var DANHSACH_NGHANH_KHOI_JS =
[@Html.Raw(Json.Encode(DANHSACH_NGHANH_KHOI))][0]; $(document).ready(function () {
//menu
$("#a_danhsach").addClass("a_menu_active"); change_bac(1);
$.tablesorter.addWidget({ // give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function (table) {
// loop all tr elements and set the value for the first column
for (var i = 0; i < table.tBodies[0].rows.length; i++) { $("tbody tr:eq(" + i + ") td:first", table).html(i + 1); }
} });
//init table sorter
table_sort(); //getdata
getData(); });
Một công cụ khác hỗ trợ đắc lực cho việc tạo giao diện ứng dụng có thẩm mỹ và tiết kiệm thời gian cho người lập trình đó là Boostrap.
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework CSS. Nó là một tập hợp các bộ chọn, thuộc tính và giá trị có sẵn để giúp web designer tránh việc lặp đi lặp lại trong quá trình tạo ra các class CSS và những đoạn mã HTML giống nhau trong dự án web của mình. Việc sử dụng Boostrap tương đối dễ dàng, không cần viết quá nhiều mã lệnh CSS.
Ví dụ: Sử dụng Boostrap tạo _MainLayout.cshtml layout chính của giao diện người dùng.
<!--js-->
<script src="~/Scripts/jquery-1.11.2.min.js"></script> <!--bootstrap-->
<link type="text/css" href="~/Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>
<div id="container" class="center"> <!--head-->
<div id="header">
<div>
<img src="../../Images/dhnt02.png" title="Đại học Nha trang" alt="Đại học Nha trang" />
</div> (adsbygoogle = window.adsbygoogle || []).push({});
<nav>
<a href="/thisinhdangki/index" id="a_dangki" class="a_menu"> Đăng ký xét tuyển </a>
<span style="padding-left:7px; padding-right:10px;
color:white;">@("|")</span>
<a href="/thisinhdanhsach/index" class="a_menu" id="a_danhsach"> Kết quả xét tuyển tạm thời</a>
<span style="padding-left:7px; padding-right:10px;
color:white;">@("|")</span>
@if (Xemdot1 == true) {
<div class="dropdown" style="display:inline-block;">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="a_menu" id="a_dstt" >
Danh sách trúng tuyển <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@for (int i = 0; i < ArrayXem.Length; i++) {
if (ArrayXem[i] == true) {
<li>
Đợt @(i+1) </a> </li> } } </ul> </div>
<span style="padding-left:7px; padding-right:10px;
color:white;">@("|")</span>
}
<a href="/" class="a_menu" id="a_huongdan">Hướng dẫn</a>
</nav> </div> <!--content--> <div id="content"> @RenderBody() </div> <!--footer--> <div id="footer">
<ul style="list-style:none; color:white;">
<li>
@("© Copyright 2015 Trường Đại học Nha Trang") </li>
<li>
@("Website được thể hiện tốt nhất ở độ phân giải 1024 x 768 với trình
duyệt FireFox, Google Chrome, Internet Explorer 7.0 trở lên")
</li>
</ul> (adsbygoogle = window.adsbygoogle || []).push({});
</div>
</div>