jQuery Mini UI 是一種非常方便的 CSS 框架,它提供了一系列的基礎 UI 樣式,可以方便的幫助我們快速構建網頁。
// 引入 jQuery 和 jQuery Mini UI 樣式文件 <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
在頁面中使用 jQuery Mini UI 樣式非常簡單,通常只需要在相應的 HTML 元素上添加對應的 class 名稱即可。
// 按鈕樣式 <button class="ui-button ui-widget ui-corner-all">按鈕</button> // 文本框樣式 <input type="text" class="ui-widget ui-corner-all"/> // 提示框樣式 <div class="ui-widget-header ui-corner-all">提示框</div>
除了基礎樣式之外,jQuery Mini UI 還提供了一些交互效果的樣式,例如按鈕點擊效果、彈出層、對話框等等。
// 按鈕點擊效果 <button class="ui-button ui-widget ui-corner-all ui-state-hover">鼠標移過</button> // 彈出層 <div class="ui-widget-overlay"></div> // 對話框 <div class="ui-dialog ui-widget ui-widget-content ui-corner-all"> // 對話框標題 <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> <span class="ui-dialog-title">對話框標題</span> <button class="ui-button ui-widget ui-corner-all ui-dialog-titlebar-close"><span class="ui-icon ui-icon-closethick"></span></button> </div> // 對話框內容 <div class="ui-dialog-content ui-widget-content">對話框內容</div> </div>
總之,jQuery Mini UI 樣式非常適合快速構建網頁樣式,尤其適合那些需要快速成型的項目。
上一篇dockerxware
下一篇dockerxp