JRibbon jQuery UI 英文原文：Extend JRibbon Using jQueryUI

• 下载源码 -1MB

介绍

旨在帮助JavaScript开发者在需要扩展免费的JRibbon control时开个好头，这远比花钱买个第三方control来做同时的事情要好。

背景

在一些日常项目中，我常常需要一个RibbonBar风格的导航条，但又不想使用重量级的ASP.Net或付费版，最终，我通常发现自己需要使用JRibbon control -- 但总是在做同样的事情，那就是，添加同样的JQuery UI。因此我决定创建一个代码工程，以便我能够在需要时快速实现这种UI。

使用代码

该工程的代码非常简单，在它的web主页中有一个基本的POHO(真心不知道这个缩写是什么意思)。该页面引用了需要的脚本和样式文件以便再现RibbonBar工具栏，同时还有一些自定义的脚本用来改变工具栏的外观和体验。作为最佳实践，最好把你的自定义事件放到一个单独的JS文件中，这样方便用Quint来调试。图1中你将看到简单的工程结构和包含了许多scriptscss的目录。

图1

其它翻译版本 (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(&apos;#example1&apos;).tabs({ cache: true });

        $(&apos;select&apos;).selectmenu(); // associate select control with &apos;selectmenu&apos; 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
        $(&apos;#searchNotes&apos;).watermark(&apos;Autocomplete....&apos;);
        $(&apos;#searchMembers&apos;).watermark(&apos;Search members&apos;);
        $(&apos;#searchBroadcasts&apos;).watermark(&apos;watermark....&apos;);
        $(&apos;#txtReasonNotAttend&apos;).watermark(&apos;Enter a reason...&apos;);
        $(&apos;#txtDateNotAttend&apos;).watermark(&apos;Enter date...&apos;);


        // datepicker
        $("#notesFrom").datepicker({ dateFormat: &apos;dd M yy&apos; });
        $(&apos;#notesFrom&apos;).datepicker("setDate", new Date());

        $("#txtDateNotAttend").datepicker({ dateFormat: &apos;dd M yy&apos; });
        $(&apos;#txtDateNotAttend&apos;).datepicker("setDate", new Date());


        $(&apos;#ribbon&apos;).ribbon(); // initialise ribbon bar control

        $(&apos;#enable-btn&apos;).click(function () {
            $(&apos;#del-table-btn&apos;).enable();
            $(&apos;#del-page-btn&apos;).enable();
            $(&apos;#save-btn&apos;).enable();
            $(&apos;#other-btn-2&apos;).enable();

            $(&apos;#enable-btn&apos;).hide();
            $(&apos;#disable-btn&apos;).show();
        });
        $(&apos;#disable-btn&apos;).click(function () {
            $(&apos;#del-table-btn&apos;).disable();
            $(&apos;#del-page-btn&apos;).disable();
            $(&apos;#save-btn&apos;).disable();
            $(&apos;#other-btn-2&apos;).disable();

            $(&apos;#disable-btn&apos;).hide();
            $(&apos;#enable-btn&apos;).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);
                }
            }

            $(&apos;#progressbarBtn&apos;).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 != &apos;&apos;) alert(&apos;Doing search...&apos;);" />
                    </br>
                    <input id="searchBroadcasts" name="searchBroadcasts" 
                      size="25" type="text" 
                      onkeydown="if (event.keyCode == 13 && this.value != &apos;&apos;) alert(&apos;Doing search...&apos;);" />
                </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 控件，（日历、水印、自动完成、提示文本等）。

进度条标签

分割按钮标签

代办事项

就我的这个单页代码和一些特定的参考代码而论，一个更好的实现是，将标签页分离成多个文件，视需要引用它们，这样可以使代码拥有面向对象设计，和可用于其它项目功能导航条的可复用组件的特性。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务