首页 jquery-easyui-API(最完整)

jquery-easyui-API(最完整)

举报
开通vip

jquery-easyui-API(最完整)Form Base Parser Usage 1.​ $.parser.parse();       // parse all the page    2.​ $.parser.parse('#cc');  // parse the specified node   $.parser.parse(); // parse all the page $.parser.parse('#cc'); // parse the specified node Properties Name Type Description De...

jquery-easyui-API(最完整)
Form Base Parser Usage 1.​ $.parser.parse();       // parse all the page    2.​ $.parser.parse('#cc');  // parse the specified node   $.parser.parse(); // parse all the page $.parser.parse('#cc'); // parse the specified node Properties Name Type Description Default $.parser.auto boolean Defines if to auto parse the easyui component. true Events Name Parameters Description $.parser.onComplete context Fires when parser finishing its parse action. Methods Name Parameter Description $.parser.parse context Parse the easyui component. EasyLoader Usage 1.​ easyloader.base = '../';    // set the easyui base directory    2.​ easyloader.load('messager', function(){        // load the specified module    3.​     $.messager.alert('Title', 'load ok');    4.​ });   easyloader.base = '../'; // set the easyui base directory easyloader.load('messager', function(){ // load the specified module $.messager.alert('Title', 'load ok'); }); Properties Name Type Description Default modules object Predefined modules. locales object Predefined locales. base string The easyui base directory, must end with '/'. The base directory will be auto setted relative to easyload.js theme string The name of theme that defined in 'themes' directory default css boolean Defines if loading css file when loading module true locale string The locale name null timeout number Timeout value in milliseconds. Fires if a timeout occurs. 2000 Defined locales ​ af ​ bg ​ ca ​ cs ​ da ​ de ​ en ​ fr ​ nl ​ zh_CN ​ zh_TW Events Name Parameters Description onProgress name Fires when a module is loaded successfully. onLoad name Fires when a module and it's dependencies are loaded successfully. Methods Name Parameter Description load module, callback Load the specified module. When load success a callback function will be called. The module parameter valid type are: a single module name an module array a css file that end with '.css' a js file that end with '.js' Draggable Override defaults with $.fn.draggable.defaults. Usage 1.​    2.​     title
   3.​ 
   1.​ $('#dd').draggable({    2.​     handle:'#title'   3.​ });   Properties Name Type Description Default proxy string,function A proxy element to be used when dragging, when set to 'clone', a clone element is used as proxy. If a function is specified, it must return a jQuery object. null revert boolean If set to true, the element will return to its start position when dragging stops. false cursor string The css cursor when dragging. move deltaX number The dragged element position x corresponding to current cursor null deltaY number The dragged element position y corresponding to current cursor null handle selector The handle that start the draggable. null disabled boolean True to stop draggable. false edge number The drag width in which can start draggable. 0 axis string Defines the axis which the dragged elements moves on, available value is 'v' or 'h', when set to null will move across 'v' and 'h' direction. null Events Name Parameters Description onBeforeDrag e Fires before dragging, return false to cancel this dragging. onStartDrag e Fires when the target object start dragging. onDrag e Fires during dragging. Return false will not do dragging actually. onStopDrag e Fires when the dragging stops. Methods Name Parameter Description options none Return the options property. proxy none Return the drag proxy if the proxy property is setted. enable none Enable the drag action. disable none Disable the drag action. Droppable Override defaults with $.fn.droppable.defaults. Usage 1.​ 
   1.​ $('#dd').droppable({    2.​     accept:'#d1,#d3'   3.​ });   Properties Name Type Description Default accept selector Determine which draggable element will be accepted null Events Name Parameters Description onDragEnter e,source Fires when the draggable element is dragged enter. The source parameter indicate the dragged DOM element. onDragOver e,source Fires when the draggable element is dragged over. The source parameter indicate the dragged DOM element. onDragLeave e,source Fires when the draggable element is dragged leave. The source parameter indicate the dragged DOM element. onDrop e,source Fires when the draggable element is dropped. The source parameter indicate the dragged DOM element. Resizable Override defaults with $.fn.resizable.defaults. Usage 1.​ 
   1.​ $('#rr').resizable({    2.​     maxWidth:800,    3.​     maxHeight:600    4.​ });   Properties Name Type Description Default disabled boolean True to disable resizing. false handles string Indicate the direction of resizable,'n' is the north,'e' is the east,etc. n, e, s, w, ne, se, sw, nw, all minWidth number The minimum width when resizing. 10 minHeight number The minimum height when resizing. 10 maxWidth number The maximum width when resizing. 10000 maxHeight number The maximum height when resizing. 10000 edge number The edge of border to be resized. 5 Events Name Parameters Description onStartResize e Fires when start resizing. onResize e Fires during resizing. When return false, the DOM element will not acts actual resize action. onStopResize e Firest when stop resizing. Pagination Override defaults with $.fn.pagination.defaults. Dependencies ​ linkbutton Usage 1.​    1.​ $('#pp').pagination({    2.​     total:2000,    3.​     pageSize:10    4.​ });   Properties Name Type Description Default total number The total records, which should be setted when pagination is created. 1 pageSize number The page size. 10 pageNumber number Show the page number when pagination is created. 1 pageList array User can change the page size. The pageList property defines how many size can be changed. [10,20,30,50] loading boolean Defines if data is loading. false buttons array Defines custom buttons, each button contains two properties: iconCls: the CSS class which will show a background image handler: a handler function when button is clicked null showPageList boolean Defines if to show page list. true showRefresh boolean Defines if to show refresh button. true beforePageText string Show a label before the input component. Page afterPageText string Show a label after the input component. of {pages} displayMsg string Display a page information. Displaying {from} to {to} of {total} items Events Name Parameters Description onSelectPage pageNumber, pageSize Fires when user select a new page. callback function contains two parameter: pageNumber: the new page number pageSize: the new page size onBeforeRefresh pageNumber, pageSize Fires before the refresh button is clicked, return false to cancel the refresh action. onRefresh pageNumber, pageSize Fires after refresh. onChangePageSize pageSize Fires when user change the page size. Methods Name Parameter Description options none Return the options object. loading none Make the pagination to become loading status. loaded none Make the pagination to become loaded status. SearchBox Override defaults with $.fn.searchbox.defaults. Dependencies ​ menubutton Usage Example Create SearchBox 1. Create from markup. Add 'easyui-searchbox' class to markup. 1.​    2.​     function qq(value,name){    3.​         alert(value+":"+name)    4.​     }    5.​    6.​    9.​             10.​    11.​     All News   12.​     Sports News   13.​    2. Create programatically. 1.​     2.​     3.​     All News    4.​     Sports News    5.​     6.​ $('#ss').searchbox({    7.​     width:200,    8.​     searcher:function(value,name){    9.​         alert(value + "," + name)    10.​     },    11.​     menu:'#mm',    12.​     prompt:'Please Input Value'   13.​ });   Properties Name Type Description Default width number Set the component width. auto propmt string The prompt message to be displayed in input box. '' value string The inputed value. '' menu selector The search type menu. null searcher function(value,name) The searcher function that will be called when user presses the searching button or press ENTER key. null Methods Name Parameter Description options none Return the options object. menu none Return the search type menu object. textbox none Return the text box object. getValue none Return the current searching value. setValue value Set a new searching value. getName none Return the current searching type name. destroy none Destroy this component. resize width Reset the component width. ProgressBar Override defaults with $.fn.progressbar.defaults. Dependencies ​ none Usage Example Create ProgressBar The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier. Add 'easyui-progressbar' class to
markup. 1.​ 
   Get or Set Value We get the current value and set a new value for this component. 1.​ var value = $('#p').progressbar('getValue');    2.​ if (value < 100){    3.​     value += Math.floor(Math.random() * 10);    4.​     $('#p').progressbar('setValue', value);    5.​ }   Properties Name Type Description Default width string Set the progressbar width. auto value number The percentage value. 0 text string The text template to be displayed on component. {value}% Events Name Parameters Description onChange newValue,oldValue Fires when the value is changed. Methods Name Parameter Description options none Return the options object. resize width Resize the component. getValue none Return the current progress value. setValue value Set a new progress value. Layout Panel Override defaults with $.fn.panel.defaults. Usage Example Create Panel 1. Create Panel via markup Creation from markup is even easier. Add 'easyui-panel' class to
markup. 1.​    4.​     

panel content.

   5.​     

panel content.

   6.​ 
   2. Create Panel programatically Let's create panel with tools on top right. 1.​    2.​     

panel content.

   3.​     

panel content.

   4.​    5.​    6.​ $('#p').panel({   7.​   width:500,   8.​   height:150,   9.​   title: 'My Panel',   10.​   tools: [{   11.​     iconCls:'icon-add',   12.​     handler:function(){alert('new')}   13.​   },{   14.​     iconCls:'icon-save'   15.​     handler:function(){alert('save')}   16.​   }]   17.​ });    Move Panel Call 'move' method to move panel to a new position 1.​ $('#p').panel('move',{   2.​   left:100,   3.​   top:100   4.​ });    Load Content Let's load the panel content via ajax and show some message when loaded successfully. 1.​ $('#p').panel({   2.​     href:'content_url.php',   3.​     onLoad:function(){   4.​         alert('loaded successfully');   5.​     }   6.​ });     Properties Name Type Description Default title string The title text to display in panel header. null iconCls string A CSS class to display a 16x16 icon in panel. null width number Set the panel width. auto height number Set the panel height. auto left number Set the panel left position. null top number Set the panel top position. null cls string Add a CSS class to the panel. null headerCls string Add a CSS class to the panel header. null bodyCls string Add a CSS class to the panel body. null style object Add a custom specification style to the panel. {} fit boolean When true to set the panel size fit it's parent container. false border boolean Defines if to show panel border. true doSize boolean If set to true,the panel will be resize and do layout when created. true noheader boolean If set to true, the panel header will not be created. false content string The panel body content. null collapsible boolean Defines if to show collapsible button. false minimizable boolean Defines if to show minimizable button. false maximizable boolean Defines if to show maximizable button. false closable boolean Defines if to show closable button. false tools array Custom tools, every tool can contain two properties: iconCls and handler [] collapsed boolean Defines if the panel is collapsed at initialization. false minimized boolean Defines if the panel is minimized at initialization. false maximized boolean Defines if the panel is maximized at initialization. false closed boolean Defines if the panel is closed at initialization. false href string A URL to load remote data and then display in the panel. null cache boolean True to cache the panel content that loaded from href. true loadingMessage string When loading remote data show a message in the panel. Loading… extractor function Defines how to extract the content from ajax response, return extracted data. extractor: function(data){ var pattern = /]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // only extract body content } else { return data; } } Events Name Parameters Description onLoad none Fires when remote data is loaded. onBeforeOpen none Fires before panel is opened, return false to stop the open. onOpen none Fires after panel is opened. onBeforeClose none Fires before panel is closed, return false to cancel the close. onClose none Fires after panel is closed. onBeforeDestroy none Fires before panel is destroyed, return false to cancel the destroy. onDestroy none Fires after panel is destroyed. onBeforeCollapse none Fires before panel is collapsed, return false to stop the collapse. onCollapse none Fires after panel is collpased. onBeforeExpand none Fires before panel is expanded, return false to stop the expand. onExpand none Fires after panel is expanded. onResize width, height Fires after panel is resized. width: the new outer width height: the new outer height onMove left,top Fires after panel is moved. left: the new left postion top: the new top position onMaximize none Fires after the window has been maximized. onRestore none Fires after the window has been restored to its original size. onMinimize none Fires after the window has been minimized. Methods Name Parameter Description options none Return options property. panel none Return the panel object. header none Return the panel header object. body none Return the panel body object. setTitle title Set the title text of header. open forceOpen When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback. close forceClose When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback. destroy forceDestroy When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback. refresh href Refresh the panel to load remote data when href property is setted. resize options Set panel size and do layout. The options object contains following properties: width: the new panel width height: the new panel height left: the new panel left position top: the new panel top position move options Move the panel to a new position. The options object contains following properties: left: the new panel left position top: the new panel top position maximize none Fits the panel winthin its container. minimize none Minimizing the panel. restore none Restores the maximized panel back to its original size and position. collapse animate Collapses the panel body. expand animate Expand the panel body. Tabs Override defaults with $.fn.tabs.defaults. Dependencies ​ panel ​ linkbutton Usage Example Create tabs 1. Create tabs via markup Create tabs from markup is even easier, we don't need to write any JavaScript code. Remember to add 'easyui-panel' class to
markup. Each tab panel is created via sub
markup, the usage is same as panel. 1.​    2.​        3.​         tab1   4.​     
   5.​        6.​         tab2   7.​     
   8.​        9.​         tab3   10.​        11.​    2. Create tabs programatically Now we create tabs programatically, we catch the 'onSelect' event also. 1.​ $('#tt').tabs({   2.​     border:false,   3.​     onSelect:function(title){   4.​         alert(title+' is selected');   5.​     }   6.​ });   Add new tab panel 1.​ // add a new tab panel   2.​ $('#tt').tabs('add',{   3.​     title:'New Tab',   4.​     content:'Tab Body',   5.​     closable:true   6.​ });   Get the selected Tab 1.​ // get the selected tab panel and its tab object   2.​ var pp = $('#tt').tabs('getSelected');   3.​ var tab = pp.panel('options').tab;    // the corresponding tab object        Properties Name Type Description Default width number The width of tabs container. auto height number The height of tabs container. auto plain boolean True to render the tab strip without a background container image. false fit boolean True to set the size of tabs container to fit it's parent container. false border boolean True to show tabs container border. true scrollIncrement number The number of pixels to scroll each time a tab scroll button is pressed. 100 scrollDuration number The number of milliseconds that each scroll animation should last. 400 tools array The right toolbar, each tool options is same as linkbutton. null Events Name Parameters Description onLoad panel Fires when an ajax tab panel finish loading remote data. onSelect title Fires when user select a tab panel. onBeforeClose title Fires before the tab panel is closed, return false to cancel this close action. onClose title Fires when user close a tab panel. onAdd title Fires when a new tab panel is added. onUpdate title Fires when a tab panel is updated. onContextMenu e, title Fires when a tab panel is right clicked. Methods Name Parameter Description options none Return the tabs options. tabs none Return all tab panels. resize none Resize the tabs container and do layout. add options Add a new tab panel, the options parameter is a config object, see tab panel properties for more details. close title Close a tab panel, title parameter indicate which panel to be closed. getTab title Get the specified tab panel. getSelected none Get the selected tab panel. select title Select a tab panel. exists title Indicate if the special panel is exists. update param Update the specified tab panel, the param parameter contains two properties: tab: the tab panel to be updated. options: the panel options. Tab Panel The tab panel properties is defined in panel component, below is some common properties. Name Type Description Default title string The tab panel title text. content string The tab panel content. href string A URL to load remote content to fill the tab panel. null cache boolean True to cache the tab panel, valid when href property is setted. true iconCls string An icon CSS class to show on tab panel title. null width number The width of tab panel. auto height number The height of tab panel. auto Some added properties. Name Type Description Default closable boolean When set to true, the tab panel will show a closable button which can click to close the tab panel. false selected boolean When set to true, tab tab panel will be selected. f
本文档为【jquery-easyui-API(最完整)】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_503807
暂无简介~
格式:doc
大小:1MB
软件:Word
页数:74
分类:互联网
上传时间:2011-08-17
浏览量:66