AJAX Control Toolkit

出自ProgWiki

跳轉到: 導航, 搜尋

AJAX Control Toolkit

目錄

AJAX Control Toolkit版本

版本 發行日期 支援.Net版本 OpenSource
May 2012 Release （60501版）2012-5-13.5SP1，4.0 是[1]
November 2011 Release （51116版）2011-11-173.5SP1，4.0 是[2]
September 2011 Release （50927版）2011-9-273.5SP1，4.0 是[3]
July 2011 Release （50731版）2011-7-313.5SP1，4.0 是[4]
May 2011 Release （50508版）2011-5-63.5SP1，4.0 是
50401版2011-4-13.5SP1，4.0 是
40412版2010-4-123.5SP1，4.0 是
30930版2009-9-303.5SP1 是
30512版2009-5-133.5SP1 是
20820版2008-8-203.5SP1 是
20229版2008-2-292.0，3.5 是
11119版2007-11-292.0，3.5 是
10920版2007-09-202.0，3.5 是
10618版2007-06-182.0，3.5 是
10606版2007-06-062.0 是
10301版2007-03-012.0 是

AJAX Control Toolkit 控制項

控制項名稱 用途 備註
Accordion 手風琴摺疊效果
AlwaysVisibleControl 總是可看見的控制項
Animation 動畫效果（淡入、淡出、……）
AutoComplete 自動輸入完成
  1. 如果傳回的字串陣列，為數值的字串，如果字串前面有可能出現數字"0"的字元的話，需用單引號把字串先包起來。參照：[5]
  2. 相關：class AjaxHelper
Calendar 月曆控制項（輸入日期用）
CascadingDropDown 連動式階層下拉式選單
  1. aspx檔的 Page需用 EnableEventValidation="false"
  2. TargetControlID 的 DropDownList 如果位於 UpdatePanel 內的話，禁用 AutoPostBack="true" 與 SelectedValue='<%# Bind("資料繫結的欄位名稱") %>'> 的組合，也就是不能用AutoPostBack，不然會導致DropDownList陷入一直閃爍，而無法下拉其DropDownList的選項
  3. 關於DropDownList的預設值與資料繫結，除了DropDownList用SelectedValue='<%# Bind("繫結欄位") %>'> ， CascadingDropDown 也用 Category='<%# Eval("繫結欄位") %>' ，再從CascadingDropDown所對應的WebService中做處理，詳細寫法參照：[6]
CollapsiblePanel 可收合式面板
ColorPicker 色彩選取控制項
ComboBox ComboBox
ConfirmButton 確認按鈕
  1. 當ConfirmButton用於GridView，而GridView又在UpdatePanel內時，GridView的CommandField轉成TemplateField時，會在按鈕的設定中，遺漏 UseSubmitBehavior="False" （VS2005已知bug），導致GridView的按鈕作用失效。
DragPanel 可拖曳式面板
DropDown 下拉式選單
DropShadow 陰影式面板
DynamicPopulate 動態呈現
FilteredTextBox 被過濾的文字輸入框
HTMLEditor HTML編輯用文字框
HoverMenu 停駐選單
ListSearch 可搜尋的選單
MaskedEdit 被遮罩的編輯
ModalPopup 強制回應的彈出式方塊
  • 範例
  • 當ModalPopup內有TextBox時，可能會因為User按下Enter按鈕而誤觸發ModalPopup外的按鈕事件，解法是將TextBox設為 AutoPostBack="true"
MutuallyExclusiveCheckBox 互斥式核取方塊
NoBot 非機器人
NumericUpDown 數值調整器
PagingBulletedList 分頁式項目符號清單
PasswordStrength 密碼複雜性提示
PopupControl 彈出式控制項
Rating 評等
ReorderList 順序重排清單
ResizableControl 可調整大小的控制項
RoundedCorners 圓角效果
Slider 滑桿
SlideShow 圖檔播放
Tabs 索引標籤
  1. 當Tabs內有使用到GridView，並有使用到GridView的分頁時，必須使用UpdatePanel把Tabs包起來。不然的話，會導致當使用者點選GridView的分頁時，導致Tabs自動跳於預設的Tab頁面，而使得原本預期的GridView分頁無法正常顯示。
TextboxWatermark 浮水印文字方塊
ToggleButton 核取方塊切換按鈕
  1. ToggleButtonExtender 的 ImageWidth 與 ImageHeight 不可小於要顯示的圖檔長寬，不然會導致顯示時, 圖檔下方或右方被裁切。
UpdatePanelAnimation 更新面版的動畫效果
ValidatorCallout 外顯式對話方塊驗證器

FAQ

AJAX Control Toolkit沒有顯示出中文介面？

  1. 在【ScriptManager】或【ToolkitScriptManager】，裡面有兩個屬性【EnableScriptGlobalization】、【EnableScriptLocalization】，把這兩個屬性預設由False改為True
  2. 修改Web.config檔，在<system.web>區塊中加入UI文化特性的設定<globalization culture="zh-TW" uiCulture="zh-TW" />

無法載入檔案或組件 'AjaxControlToolkit' 或其相依性的其中之一。 系統找不到指定的檔案

  1. 更新你的網站上，所參考的 AjaxControlToolkit 之後……
  2. 要記得把VS2005的工具箱裡的 AjaxControlToolkit，刪掉後，重抓一次。
  3. 不然你的網站會與你的開發工具（VS2005）裏的 AjaxControlToolkit 產生版本衝突。


AJAX Control Toolkit 控制項的HTMLEditor的Toolbar斷成數行

/* base layout */
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_container
{
	border-collapse: separate;
	empty-cells: show;
	width:100%;
	height:100%;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_toptoolbar
{
	cursor:text;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_toolbar_button
{
	height: 21px; white-space: nowrap; border-width: 0px; padding:0px; cursor:pointer; float:left;
}
.ajax__htmleditor_editor_base img.ajax__htmleditor_toolbar_button
{
	width: 23px;
}
.ajax__htmleditor_editor_base div.ajax__htmleditor_toolbar_button span.ajax__htmleditor_toolbar_selectlable
{
    padding:0px 2px; vertical-align:middle; cursor:text;
}
.ajax__htmleditor_editor_base div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton
{
    vertical-align:middle; padding:0px; margin:0px; height: 20px; width:120px;
}
.ajax__htmleditor_editor_base div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton option
{
    vertical-align:middle;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_editpanel
{
	height:100%;
}
.ajax__htmleditor_editor_base .ajax__htmleditor_editor_bottomtoolbar
{
	cursor:text;
}
 
/* default theme */
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_container
{
	border: 1px solid #C2C2C2;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar
{
	background-color:#F0F0F0; padding: 0px 2px 2px 2px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar .ajax__htmleditor_toolbar_button
{
	background-color:#C2C2C2; margin:2px 0px 0px 0px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar .ajax__htmleditor_toolbar_button_hover
{
	background-color:#3C8AFF;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar div.ajax__htmleditor_toolbar_button span.ajax__htmleditor_toolbar_selectlable
{
    font-family:Arial; font-size:12px; font-weight:bold;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton
{
    font-size:12px; font-family:arial; cursor:pointer;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_toptoolbar div.ajax__htmleditor_toolbar_button select.ajax__htmleditor_toolbar_selectbutton option
{
    font-size:12px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_editpanel
{
	border-width: 0px;
	border-top: 1px solid #C2C2C2;
	border-bottom: 1px solid #C2C2C2;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_bottomtoolbar
{
	background-color:#F0F0F0; padding: 0px 0px 2px 2px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_bottomtoolbar .ajax__htmleditor_toolbar_button
{
	background-color:#C2C2C2; margin:0px 4px 0px 0px;
}
.ajax__htmleditor_editor_default .ajax__htmleditor_editor_bottomtoolbar .ajax__htmleditor_toolbar_button_hover
{
	background-color:#3C8AFF;
}

AJAX Control Toolkit 控制項的HTMLEditor的中文化

function FixHtmleditorToolbar() {
    var objToolbar = {
        Undo: '取消',
        Redo: '重做',
        Bold: '粗體',
        Italic: '斜體',
        Underline: '底線',
        'Strike through': '刪除線',
        'Sub script': '下標字',
        'Super script': '上標字',
        'Left to right direction': '左向右書寫',
        'Right to left direction': '右向左書寫',
        //'Foreground color': '文字顏色',
        'Clear foreground color': '清除文字顏色',
        //'Background color': '底色',
        'Clear background color': '清除底色',
        'Remove styles': '移除所有格式',
        Cut: '剪下',
        Copy: '複製',
        Paste: '貼上',
        'Paste Plain Text': '貼上純文字',
        'Paste from MS Word (with cleanup)': '貼上(從MS Word)',
        'Decrease Indent': '減少縮排',
        'Increase Indent': '增加縮排',
        'Make Paragraph': '段落',
        'Justify Left': '靠左對齊',
        'Justify Center': '置中',
        'Justify Right': '靠右對齊',
        Justify: '',
        'Remove Alignment': '',
        'Ordered List': '數字列表',
        'Bulleted List': '符號列表',
        'Insert horizontal rule': '插入水平線',
        'Insert/Edit URL link': '插入或編輯超連結',
        'Remove Link': '移除超連結',
        'Design mode': '設計模式',
        'HTML text': 'HTML碼',
        Preview: '預覽'
    };
 
    //按鈕說明修正1
    jQuery.each(objToolbar, function (key, val) {
        $("img.ajax__htmleditor_toolbar_button[title='" + key + "']").attr('title', val);
    });
 
    ///按鈕說明修正2. 'Foreground color', 'Background color'
    $('img[title="Foreground color"], div[title="Foreground color"]').attr('title', '文字顏色');
    $('img[title="Background color"], div[title="Background color"]').attr('title', '底色');
 
 
    //'Size'與'Font'修正
    jQuery.each($('span.ajax__htmleditor_toolbar_selectlable'),function (key, val) {
        //var sText = $(val).text().trim();
        //if (sText == 'Font') $(val).text('字型');
        //else if (sText == 'Size') $(val).text('尺寸');
        var sText = $(val).text();
        if (sText == 'Font ') $(val).text('字型 ');
        else if (sText == 'Size ') $(val).text('尺寸 ');
    });
 
    //'Size'與'Font'的選單修正
    jQuery.each($('select.ajax__htmleditor_toolbar_selectbutton'), function (key, val) {
        var sStyle = $(val).attr('style');
        if (typeof sStyle === "undefined") {
            //Font
            //<option value="">default</option><option value="arial,helvetica,sans-serif">Arial</option><option value="courier new,courier,monospace">Courier New</option><option value="georgia,times new roman,times,serif">Georgia</option><option value="tahoma,arial,helvetica,sans-serif">Tahoma</option><option value="times new roman,times,serif">Times New Roman</option><option value="verdana,arial,helvetica,sans-serif">Verdana</option><option value="impact">Impact</option><option value="wingdings">WingDings</option>
            $(val).html('<option value="">預設</option><option value="細明體">細明體</option><option value="新細明體">新細明體</option><option value="標楷體">標楷體</option><option value="微軟正黑體">微軟正黑體</option><option value="arial,helvetica,sans-serif">Arial</option><option value="courier new,courier,monospace">Courier New</option><option value="georgia,times new roman,times,serif">Georgia</option><option value="tahoma,arial,helvetica,sans-serif">Tahoma</option><option value="times new roman,times,serif">Times New Roman</option><option value="verdana,arial,helvetica,sans-serif">Verdana</option><option value="impact">Impact</option><option value="wingdings">WingDings</option>');
        } else {
            //Size
            //<option value="">default</option><option value="8pt">1 ( 8 pt)</option><option value="10pt">2 (10 pt)</option><option value="12pt">3 (12 pt)</option><option value="14pt">4 (14 pt)</option><option value="18pt">5 (18 pt)</option><option value="24pt">6 (24 pt)</option><option value="36pt">7 (36 pt)</option>
            $(val).html('<option value="">預設</option><option value="8pt">1 ( 8 pt)</option><option value="10pt">2 (10 pt)</option><option value="12pt">3 (12 pt)</option><option value="14pt">4 (14 pt)</option><option value="18pt">5 (18 pt)</option><option value="24pt">6 (24 pt)</option><option value="36pt">7 (36 pt)</option>');
        }
    });
 
/* 以下在部份瀏覽器可能無法正常運作
    var appName = window.navigator.appName;
    var appCodeName = window.navigator.appCodeName;
    var userAgent = window.navigator.userAgent;
 
    if ((appName.indexOf("Netscape") != -1) &&
		(appCodeName.indexOf("Mozilla") != -1) &&
		(userAgent.indexOf("Firefox") != -1)) 
    {
    //常用標點符號點擊插入(IE不支援? 所以只有FireFox才開此功能)        
    var objChar = {
        '，':'逗點',
        '、':'頓號',
        '。':'句點',
        '？':'問號',
        '！':'驚嘆號',
        '；':'分號',
        '：': '冒號',
        '「':'單引號(左)',
        '」':'單引號(右)',
        '『':'雙引號(左)',
        '』':'雙引號(右)',
        '（':'小括號(左)',
        '）':'小括號(左)',
        '—':'連接符號',
        '…':'省略符號'
    };
    var CharInsert = "&nbsp;";
    jQuery.each(objChar, function (key, val) {
        CharInsert = CharInsert + "<span class='ajax__htmleditor_toolbar_CharInsert' title='" + val + "'><a>" + key + "</a></span>&nbsp;";
    });
    var toptoolbar = $('td.ajax__htmleditor_editor_toptoolbar > div');
    toptoolbar.html(toptoolbar.html() + CharInsert);
 
    $("span.ajax__htmleditor_toolbar_CharInsert > a").click(function () {
        var id = $('div.ajax__htmleditor_editor_base').attr('id');
        var editor = $find(id).get_editPanel().get_activePanel();
 
        try {
            //設計模式
            if (typeof editor._saveContent == 'function') {
                editor._saveContent();
 
                var _div = editor._doc.createElement("div");
                _div.innerHTML = $(this).text();
 
                var el = _div.firstChild;
                var place = editor._getSafePlace();
                if (!place) return false;
 
                var parent = place.parentNode;
 
                parent.insertBefore(el, place);
                parent.removeChild(place);
 
                el = (el.nextSibling) ? el.nextSibling : el;
                Sys.Extended.UI.HTMLEditor._setCursor(el, editor);
                setTimeout(function () { editor.onContentChanged(); editor._editPanel.updateToolbar(); }, 0);
 
                editor.focusEditor();
                return false;
            } else {
                //HTML模式
 
                var myField = editor._element;
                var myChar = $(this).text();
 
                if (document.selection) {
                    //IE support
                    myField.focus();
                    var sel = document.selection.createRange();
                    sel.text = myChar;
                }
                else if (myField.selectionStart || myField.selectionStart == '0') {
                    //Mozilla/Firefox/Netscape 7+ support
                    var startPos = myField.selectionStart;
                    var endPos = myField.selectionEnd;
                    myField.value = myField.value.substring(0, startPos) + myChar + myField.value.substring(endPos, myField.value.length);
                } else {
                    myField.value += myChar;
                }
 
                return false;
            }
        } catch (e) {
            alert(e.toString());
        }
    });
    }
*/
}
 
//以下為OnLoadHook機制(依實際需求加掛)
var OnLoadHook = {};
 
OnLoadHook.HtmleditorToolbar = { func: function (sender) {
    FixHtmleditorToolbar();
}};
 
function CallOnLoadHook() {
    for(var name in OnLoadHook)
    {
        OnLoadHook[name].func();
    }
}
 
$(document).ready(function () {
    CallOnLoadHook();
});
取自"http://www.player.idv.tw/prog/index.php/AJAX_Control_Toolkit"
個人工具
名字空間
變換
動作
導航
分類
其他
技術類News或部落格
工具箱