使用 jQueryUI 扩展 JRibbon
4.79/5 (5投票s)
扩展 JRibbon 控制以包含 jQuery UI 控制。
引言
为了帮助 JavaScript 开发者快速扩展免费的 JRibbon 控制以满足他们的需求，而不是为实现相同功能而购买第三方控制。
背景
在我的个人项目中，我经常希望使用 RibbonBar 样式的导航控制，但不想使用重量级的 ASP.Net 版本或付费版本，我经常会使用 JRibbon 控制 - 但总是做同样的事情，即向其中添加相同的 JQuery UI 控制。因此，我决定创建一个 CodeProject，以便在我需要快速实现 UI 时可以随时参考。
使用代码
项目代码非常简单，它有一个基本的 POHO 作为其主网页。此页面将引用重现 RibbonBar 所需的脚本和样式，以及（您的）脚本来自定义条的外观和感觉。与所有最佳实践一样，最好将您的自定义事件处理程序放入单独的 .js 文件中，以便使用 Quint 等工具进行调试。在图 1 中，您可以查看简单的项目结构以及包含许多 scripts\css 文件夹的文件夹。
图 1
下面我附上了完整的 HTML 标记，以便您完全了解正在发生的事情 - 因为它都在一个页面上并且易于实现。
<!-- Style-->
<link rel="stylesheet" type="text/css" href="../Styles/themes/redmond/jquery-ui-1.9.2.custom.min.css" />
<link rel="stylesheet" type="text/css" href="../Styles/css/ribbon/ribbon.css" />
<link rel="stylesheet" type="text/css" href="../Styles/css/ribbon/soft_button.css" />
<link rel="stylesheet" type="text/css" href="../Styles/css/jqueryDatePickerAddon/jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" type="text/css" href="../Styles/css/jquery-ui-selectmenu/jquery.ui.selectmenu.css" />
<link rel="stylesheet" type="text/css" href="../Styles/css/Tab/reset-fonts.css" />
<link rel="stylesheet" type="text/css" href="../Styles/css/Tab/ui.all.css" />
<link href="../Styles/css/OverrideCss/overrideCss.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/JQuery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../Scripts/JQuery/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="../Scripts/jQueryDatepickerAddon/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="../Scripts/watermark/jquery.watermark.min.js"></script>
<script type="text/javascript" src="../Scripts/ribbon/ribbon.js"></script>
<script type="text/javascript" src="../Scripts/ribbon/RibbonEvents.js"></script>
<script type="text/javascript" src="../Scripts/combox/jquery.ui.selectmenu.js"></script>
<script type="text/javascript" src="../Scripts/Tab/ui.tabs.paging.js"></script>
<script src="../Scripts/OverrideScripts/overrideScripts.js" type="text/javascript"></script>
<!--Javascript Events-->
<script type="text/javascript">
$(document).ready(function () {
jQuery('#example1').tabs({ cache: true });
$('select').selectmenu(); // associate select control with 'selectmenu' css
// data for autocomplete
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#searchNotes").autocomplete({
source: availableTags
});
// watermarks
$('#searchNotes').watermark('Autocomplete....');
$('#searchMembers').watermark('Search members');
$('#searchBroadcasts').watermark('watermark....');
$('#txtReasonNotAttend').watermark('Enter a reason...');
$('#txtDateNotAttend').watermark('Enter date...');
// datepicker
$("#notesFrom").datepicker({ dateFormat: 'dd M yy' });
$('#notesFrom').datepicker("setDate", new Date());
$("#txtDateNotAttend").datepicker({ dateFormat: 'dd M yy' });
$('#txtDateNotAttend').datepicker("setDate", new Date());
$('#ribbon').ribbon(); // initialise ribbon bar control
$('#enable-btn').click(function () {
$('#del-table-btn').enable();
$('#del-page-btn').enable();
$('#save-btn').enable();
$('#other-btn-2').enable();
$('#enable-btn').hide();
$('#disable-btn').show();
});
$('#disable-btn').click(function () {
$('#del-table-btn').disable();
$('#del-page-btn').disable();
$('#save-btn').disable();
$('#other-btn-2').disable();
$('#disable-btn').hide();
$('#enable-btn').show();
});
$(function () {
var progressbar = $("#progressbar"), progressLabel = $(".progress-label");
progressbar.progressbar({
value: false,
change: function () {
progressLabel.text(progressbar.progressbar("value") + "%");
},
complete: function () {
progressLabel.text("Complete!");
}
});
function progress() {
var val = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", val + 1);
if (val < 99) {
setTimeout(progress, 100);
}
}
$('#progressbarBtn').click(function () {
progressbar.progressbar("value", 0);
progress();
});
});
});
</script>
<body bgcolor="#c9cdd2">
<div id="ribbon" style="position: static">
<span class="ribbon-window-title">Extending RibbonBar Using JQuery UI Controls</span>
<div class="ribbon-tab file" id="file-tab">
<span class="ribbon-title">File</span>
<!--Orb-->
<div class="ribbon-backstage">
This is the Backstage.<br />
<br />
<div class="button big">
<span class="label">Open</span>
<span class="desc">Open a document from your computer</span>
</div>
<br />
<div class="button big">
<span class="label">Save</span>
<span class="desc">Save your document to your computer</span>
</div>
</div>
</div>
<div class="ribbon-tab" id="format-tab">
<!--General Tab-->
<span class="ribbon-title">General</span>
<div class="ribbon-section">
<span class="section-title">Buttons</span>
<div class="ribbon-button ribbon-button-large"
id="add-table-btn" onclick="$.StartRemoteNotes()">
<span class="button-title">Create</span>
<span class="button-help">This button will
add a table to your document.</span>
<img class="ribbon-icon ribbon-normal"
src="../../Images/ribbon/normal/new-table.png" />
<img class="ribbon-icon ribbon-hot"
src="../../Images/ribbon/hot/new-table.png" />
<img class="ribbon-icon ribbon-disabled"
src="../../Images/ribbon/disabled/new-table.png" />
</div>
<div class="ribbon-button ribbon-button-large" id="open-table-btn">
<span class="button-title">Update</span>
<span class="button-help">This button will
open a table and add it to your document.</span>
<img class="ribbon-icon ribbon-normal"
src="../../Images/ribbon/normal/open-table.png" />
<img class="ribbon-icon ribbon-hot"
src="../../Images/ribbon/hot/open-table.png" />
<img class="ribbon-icon ribbon-disabled"
src="../../Images/ribbon/disabled/open-table.png" />
</div>
<div class="ribbon-button ribbon-button-large disabled" id="del-table-btn">
<span class="button-title">Clear</span>
<span class="button-help">This button will remove
the selected table from your document.</span>
<img class="ribbon-icon ribbon-normal"
src="../../Images/ribbon/normal/delete-table.png" />
<img class="ribbon-icon ribbon-hot"
src="../../Images/ribbon/hot/delete-table.png" />
<img class="ribbon-icon ribbon-disabled"
src="../../Images/ribbon/disabled/delete-table.png" />
</div>
<div class="ribbon-button ribbon-button-large disabled" id="Div5">
<span class="button-title">GoTo
<br />
Notes</span> <span class="button-help">This button will remove the selected table from
your document.</span>
<img class="ribbon-icon ribbon-normal"
src="../../Images/ribbon/normal/delete-table.png" />
<img class="ribbon-icon ribbon-hot"
src="../../Images/ribbon/hot/delete-table.png" />
<img class="ribbon-icon ribbon-disabled"
src="../../Images/ribbon/disabled/delete-table.png" />
</div>
</div>
<div class="ribbon-section">
<span class="section-title">Labels</span>
<div>
<span>
<label for="username" style="float: left; min-width: 100px;">
Username</label>
<label>
:</label>
<label id="username" style="margin-right: 5px; width: auto;">
Joe Blogs</label>
</span>
</div>
<div>
<span>
<label for="mname" style="float: left; min-width: 100px;">
Machine Name</label>
<label>
:</label>
<label id="Label1" style="margin-right: 5px; width: auto;">
XBox 360</label>
</span>
</div>
<div>
<span>
<label for="username" style="float: left; min-width: 100px;">
Username</label>
<label>
:</label>
<label id="Label2" style="margin-right: 5px; width: auto">
Joe Blogs</label>
</span>
</div>
<div>
<span>
<label for="mname" style="float: left; min-width: 100px;">
Machine Name</label>
<label>
:</label>
<label id="Label3" style="margin-right: 5px; width: auto;">
XBox 360</label>
</span>
</div>
<div>
<span>
<label for="mname" style="float: left; min-width: 100px;">
Machine Name</label>
<label>
:</label>
<label id="Label4" style="margin-right: 5px; width: auto;">
XBox 360</label>
</span>
</div>
</div>
<div class="ribbon-section">
<span class="section-title">Calander</span> <span><span style="margin: 5px">
<label for="Start" title="Goto a particular days notes.">
Goto Notes</label>
<input id="notesFrom" name="notesFrom" class="ui-state-default ui-corner-all" type="text"
style="width: 75px; padding-left: 5px;" />
</span></span>
</div>
<div class="ribbon-section">
<span class="section-title">Textboxes</span> <span>
<input id="searchNotes" name="searchNotes" size="25"
type="text" onkeydown="if (event.keyCode == 13 && this.value != '') alert('Doing search...');" />
</br>
<input id="searchBroadcasts" name="searchBroadcasts"
size="25" type="text"
onkeydown="if (event.keyCode == 13 && this.value != '') alert('Doing search...');" />
</span>
</div>
<div class="ribbon-section">
<span class="section-title">Combo Box</span>
<div>
<span>
<select id="Select1" name="cboProjects" style="min-width: 250px;">
<option disabled selected>Please Select</option>
<option value="OnlineClaimsProcessing">Online Claims Processing</option>
<option value="GovermentDatabaseUpdates">Goverment Database Updates</option>
<option value="AstrixDuplexComm">Astrix Duplex Communication</option>
<option value="BTArrearsProcessing">BT Arrears Processing</option>
</select>
</span>
</div>
</div>
<!--Tooltip-->
<div class="ribbon-section">
<script type="text/javascript">
$(function () {
$(document).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
<span class="section-title">Tooltip</span>
<div>
<label for="age">
Your age:</label>
<input id="Text2"
title="We ask for your age only for statistical purposes." />
</div>
</div>
</div>
<!--Progresbar-->
<div class="ribbon-section">
<div class="ribbon-tab" id="Div6">
<span class="ribbon-title">Progress Bar</span>
<span class="section-title">Progress Bar</span>
<div id="progressbar">
<div class="progress-label">
Loading...</div>
</div>
<div id="progressbarBtn" class="ribbon-button ribbon-button-small" style="width: 100px;
margin: auto;">
<span class="button-title">Start progress</span> <span class="button-help">This button
will increment the progress-bar.</span>
<img class="ribbon-icon ribbon-normal" src="../../Images/ribbon/normal/open-page.png" />
<img class="ribbon-icon ribbon-hot" src="../../Images/ribbon/hot/open-page.png" />
<img class="ribbon-icon ribbon-disabled" src="../../Images/ribbon/disabled/open-page.png" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#rerun")
.button()
.click(function () {
alert("Running the last action");
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function () {
var menu = $(this).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$(document).one("click", function () {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
<div class="ribbon-tab" id="Div1">
<span class="ribbon-title">Dropdown Button</span>
<span class="section-title">Split
Button</span>
<div>
<div>
<button id="rerun">
Run last action</button>
<button id="select">
Select an action</button>
</div>
<ul>
<li><a href="#">Open...</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
屏幕截图
常规选项卡
主“常规”功能区包含许多 jQuery UI 控制（日期日历、水印、自动完成、工具提示等）。
进度条选项卡
拆分按钮选项卡
待办事项
将我的单页代码和一些自定义代码引用分解为单独的文件并根据需要包含它们，是一种更好的方法，从而使您的代码更具面向对象的设计，并可用于您可能在其他项目中的其他功能区。