Commit ab2872c1 authored by 季圣华's avatar 季圣华
Browse files

升级easyUI到1.9.4版本

parent 0527b980
.validatebox-invalid {
background-image: url('images/validatebox_warning.png');
background-repeat: no-repeat;
background-position: right center;
border-color: #ffa8a8;
background-color: #fff3f3;
color: #000;
}
Version 1.9.x
-------------
* Improvement
* datagrid: The 'sorter' function on the column accepts the entire row as the sorting parameters.
* datebox: Add 'getDate' and 'setDate' methods.
* pagination: Add 'onBeforeSelectPage' event.
Version 1.9.0
-------------
* Bug
* datagrid: Slow scrolling with mousewheel on frozen columns. fixed.
* datagrid: The 'rowStyler' function is called on empty row. fixed.
* linkbutton: Calling 'disable' method still can submit the form. fixed.
* combotree: The 'onBeforeSelect' event fires twice while selecting a node. fixed.
* combotreegrid: The 'onSelect' event fires twice while selecting a row. fixed.
* Improvement
* checkbox: Add 'readonly' property.
* radiobutton: Add 'readonly' property.
* Compatible with jQuery 3.x.
* New Plugins
* timepicker: Allow the user to choose time on a clock.
Version 1.8.0
-------------
* Bug
* treegrid: The 'pageNumber' can't be initialized with the specified value. fixed.
* checkbox: The disabled checkbox has no disabled label. fixed.
* Improvement
* switchbutton: Add the 'label','labelAlign','labelPosition','labelWidth' properties.
* switchbutton: Accept 'tabindex' attribute to get focus when the user press TAB key.
* form: The 'onChange' event is available for all the form component.
* calendar: The 'Date' property is available to support the hijri date.
* textbox: The floating label is available.
Version 1.7.0
-------------
* Bug
* sidemenu: The tooltip has a wrong position when the 'floatMenuPosition' is set to 'left'. fixed.
* datagrid: The horizontal scrollbar has a wrong state when the 'showHeader' is set to true. fixed.
* combo: The initialized value will trigger the form's 'onChange' event when the 'multiple' is set to true. fixed.
* panel: The horizontal panel doesn't work normally when 'noheader' property is set to true. fixed.
* pagination: The extended buttons may lose in IE when rebuild the component. fixed.
* Improvement
* tree: Add 'findBy' method to find a node by any fields.
* tree: The 'find' method is enhanced to find a node easily.
* combo: Add 'panelValign' property.
* datagrid: The sorting parameters will be ignored when the 'remoteSort' is set to false.
* timespinner: Add 'hour12' property to display in 12 hour format.
Version 1.6.0
-------------
* Bug
* maskedbox: The component does not accept numeric keypad. fixed.
* combogrid: When selecting multiple records, the datagrid will scroll to the last checked record. fixed.
* Improvement
* Compatible with jQuery 3.x.
* tabs: The 'toolPosition' property can accept 'top' and 'bottom' values.
* textbox: The textbox label has the animating feature when focus or blur on it.
* tooltip: Add 'valign' property.
* tree: The node class can be initialized by setting the 'nodeCls' in the data.
* New Plugins
* sidemenu: The sidemenu is created from accordion and tree plugins. It builds a collapsible menu with some categories.
* radiobutton: This plugin provides a round interface to select one option from a number of options.
* checkbox: This plugin allows a user to select a value from a small set of options.
Version 1.5.5
-------------
* Bug
* tabs: The selecting history has wrong order when the title contains complex elements. fixed.
* combo: The drop-down panel may not be hidden if a bigger 'delay' value is set. fixed.
* layout: The expanding panel does not collapse when move mouse quickly away from it. fixed.
* tagbox: The tagbox and the label don't stay in the same line. fixed.
* Improvement
* combo: The 'blur' event handler is attached to the 'inputEvents' property.
* numberbox: The 'cloneFrom' method is available.
* slider: The 'step' property can be set with a floating number.
* menu: The 'findItem' method allows the user to find menu item by any parameters.
* menubutton: Add 'showEvent' and 'hideEvent' properties.
* New Plugins
* maskedbox: The maskedbox enforces its structure as the user types.
Version 1.5.4
-------------
* Bug
* combotreegrid: The 'onChange' event does not fire when entering values on the inputing box. fixed.
* combobox: Clicking on the drop-down panel will jump to the bottom of body on win10 IE11. fixed.
* datebox: Clicking on the 'Today' button doesn't trigger the 'onSelect' event. fixed.
* propertygrid: The 'getChanges' method doesn't work after editing the only one row. fixed.
* Improvement
* combo: Add the 'panelEvents' property.
* combo: Attach the default 'mousedown' event handler.
* combobox: The 'setValues' method can be called to initialize the displaying text.
* combotreegrid: Press ENTER key to select the highlighted rows.
* panel: Improve the resizing performance.
* filebox: The 'files' method allows the user to get the selected file list.
* searchbox: Improvent the 'selectName' method.
Version 1.5.3
-------------
* Bug
* combobox: The 'iconCls' property can not be parsed from the <option> markup. fixed.
* combobox: Clicking scrollbar will cause the drop-down panel to be hidden in IE. fixed.
* pagination: The pagination height will shrink when the 'displayMsg' property is set to false. fixed.
* tabs: The tab panel takes a wrong 'data' parameter in the 'onLoad' event. fixed.
* Improvement
* draggable: Add 'onEndDrag' event.
* resizable: Retrieve more than one resizing directions with different edges.
* datagrid: Add 'resizeEdge' property.
* datagrid: Avoid the memory leaks.
* combo: The 'originalValue' property value is corrected in multiple mode.
* form: Add the tagbox to the form fields.
* tagbox: Add the 'reset' method.
* progress: Increase the response time to open and close the progress message window.
Version 1.5.2
-------------
* Bug
* form: The initialized value of the inputing box will disappear after calling the 'reset' method. fixed.
* textbox: Calling the 'destroy' method does not clean the field label. fixed.
* datagrid: Calling the 'selectRow' method on an unexisting row causes undesired record set. fixed.
* Improvement
* datagrid: The ctrl selection is supported on Mac keyboards.
* datagrid: The 'scrollOnSelect' property is available for the user to determine whether to scroll to the specified row when selecting it.
* combotree: Add the 'textField' property.
* combotreegrid: Add the 'textField' property.
* pagination: Add 'showPageInfo' property.
* panel: Add 'halign' and 'titleDirection' properties to allow the user to align the panel header to left or right side.
* accordion: Add 'halign' property to build the horizontal accordion.
* tagbox: The 'required' propery can be applied to validate whether the value is empty.
Version 1.5.1
-------------
* Bug
* datagrid: The selecting and checking flags will lose after calling 'updateRow' method. fixed.
* tabs: The trip tools have a wrong position when calling 'update' method. fixed.
* window: When the height is set to 'auto', it will disappear after moving the window. fixed.
* messager: When display the progress message window and then close it immediately, an exception occurs. fixed.
* form: The 'clear' method does not clear the selected drop-down items of the combobox. fixed.
* Improvement
* textbox: The 'cls' property is available to add a custom style to textbox.
* numberbox: Allow the user to format currency in Italian.
* combo: Add 'multivalue' property that allows the user to determine how to submit the multiple values.
* combobox: Add 'reversed' property.
* combobox: Add 'onClick' event.
* combogrid: Add 'reversed' property.
* treegrid: Enable multiple selection with the shift key.
* New Plugins
* tagbox: Allows the user to add tags to a form field.
Version 1.5
-------------
* Bug
* combobox: The 'onSelect' event does not fire when load data that contains the selected item. fixed.
* datagrid: The 'updateRow' method sometimes does not work properly when the field is set to a blank value. fixed.
* Improvement
* A label can be associated to any form fields.
* combobox: Enhance the 'select' and 'unselect' rules on the drop-down items.
* combobox: Add 'limitToList' property to limit the inputed values to the listed items.
* combogrid: Allow the user to clone the component quickly.
* form: Add the 'dirty' property that allows the user to submit the only changed fields.
* form: Add 'resetDirty' method.
* datagrid: Allow the user to display a message when there are no records to be shown.
* textbox: Add 'label','labelWidth','labelPosition' and 'labelAlign' properties.
* spinner: Add 'spinAlign' property.
* calendar: Allow the user to display week number of the year.
* window: Add 'constrain' property.
* New Plugins
* passwordbox: The plugin that allows the user to input passwords with nice feedback.
* combotreegrid: Combines combobox with drop-down treegrid component.
Version 1.4.5
-------------
* Bug
* datagrid: The 'getChanges' method does not return the updated rows after calling 'updateRow' method. fixed.
* treegrid: The 'onLoadSuccess' event fires when append or insert a row. fixed.
* tree: The 'onLoadSuccess' event fires when append or insert a node. fixed.
* Improvement
* window: The displaying style can be customized.
* window: The 'border' property allows the user to set different border style.
* navpanel: The 'href' property is enabled to load content from remote server.
* combotree: The 'setValue' and 'setValues' methods accept the paremter values in 'id' and 'text' pairs
* combobox: Add 'showItemIcon' property.
* combobox: Set 'groupPosition' property to 'sticky' to stick the item group to the top of drop-down panel.
* messager: Pressing ENTER key on input box will trigger click event of the first button.
* validatebox: Add 'editable',disabled' and 'readonly' properties.
* validatebox: Add 'enable','disable','readonly' methods.
* validatebox: Allow the user to determine how to display the error message.
* filebox: Add 'accept' and 'multiple' properties.
* form: Add 'iframe' property and 'onProgress' event.
* treegrid: Add cascade checkbox selection.
* treegrid: Add 'getCheckedNodes','checkNode' and 'uncheckNode' methods.
Version 1.4.4
-------------
* Bug
* filebox: The 'clear' and 'reset' methods do not work properly in IE9. fixed.
* messager: After calling $.messager.progress() with no arguments, the $.messager.progress('close') does not work properly. fixed.
* timespinner: The value does not display properly in IE8 while clicking the spin buttons. fixed.
* window: The window does not display when calling 'options' method in 'onMove' event. fixed.
* treegrid: The 'getLevel' method does not accept the parameter value of 0. fixed.
* Improvement
* layout: The 'collapsedContent','expandMode' and 'hideExpandTool' properties are supported in region panel.
* layout: The 'hideCollapsedContent' property can be set to display the vertical title bar on collapsed panel.
* layout: Add 'onCollapse','onExpand','onAdd','onRemove' events.
* datagrid: Display the 'up-down' icon on the sortable columns.
* datagrid: Add 'gotoPage' method.
* propertygrid: Add 'groups' method that allows to get all the data groups.
* messager: Auto scroll feature is supported when displaying long messages.
* tabs: The 'disabled' property is supported when defining a disabled tab panel.
* tabs: The percentange size is supported now.
Version 1.4.3
-------------
* Bug
* textbox: The 'setText' method does not accept value 0. fixed.
* timespinner: When running in IE11, the error occurs when clicking on the empty textbox. fixed.
* tabs: The 'update' method can not update only the panel body. fixed.
* Improvement
* combobox: Improve the performance of displaying the drop-down panel.
* combogrid: Remember the displaying text when the drop-down datagrid go to other pages.
* combogrid: The 'setValue' and 'setValues' methods accept a key-value object.
* window: The inline window's mask can auto-stretch its size to fill parent container.
* tabs: The 'showTool' and 'hideTool' methods are available for users to show or hide the tools.
* layout: Allow the user to override the 'cls','headerCls' and 'bodyCls' property values.
* New Plugins
* switchbutton: The switch button with two states:'on' and 'off'.
Version 1.4.2
-------------
* Bug
* treegrid: The column will restore its size to original size after recreating the treegrid. fixed.
* Improvement
* draggable: Add 'delay' property that allows the user to delay the drag operation.
* tree: Add 'filter' property and 'doFilter' method.
* tabs: The 'add' method allows the user to insert a tab panel at a specified index.
* tabs: The user can determine what tab panel can be selected.
* tabs: Add 'justified' and 'narrow' properties.
* layout: Add 'unsplit' and 'split' methods.
* messager: Keyboard navigation features are supported now.
* form: Add 'onChange' event.
* combobox: Add 'queryParams' property.
* slider: Add 'range' property.
* menu: Add 'itemHeight','inline','noline' properties.
* panel: The 'header' property allows the user to customize the panel header.
* menubutton: Add 'hasDownArrow' property.
* New Plugins
* datalist: The plugin to render items in a list.
* navpanel: The root component for the mobile page.
* mobile: The plugin to provide the mobile page stack management and navigation.
Version 1.4.1
-------------
* Bug
* combogrid: The combogrid has different height than other combo components. fixed.
* datagrid: The row element loses some class style value after calling 'updateRow' method. fixed.
* menubutton: Calling 'enable' method on a disabled button can not work well. fixed.
* form: The filebox components in the form do not work correctly after calling 'clear' method. fixed.
* Improvement
* tabs: The 'update' method accepts 'type' option that allows the user to update the header,body,or both.
* panel: Add 'openAnimation','openDuration','closeAnimation' and 'closeDuration' properties to set the animation for opening or closing a panel.
* panel: Add 'footer' property that allows the user to add a footer bar to the bottom of panel.
* datagrid: Calling 'endEdit' method will accept the editing value correctly.
* datagrid: Add 'onBeforeSelect','onBeforeCheck','onBeforeUnselect','onBeforeUncheck' events.
* propertygrid: The user can edit a row by calling 'beginEdit' method.
* datebox: Add 'cloneFrom' method to create the datebox component quickly.
* datetimebox: Add 'cloneFrom' method to create the datetimebox component quickly.
Version 1.4
-------------
* Bug
* menu: The menu should not has a correct height when removed a menu item. fixed.
* datagrid: The 'fitColumns' method does not work normally when the datarid width is too small. fixed.
* Improvement
* The fluid/percentange size is supported now for all easyui components.
* menu: Add 'showItem', 'hideItem' and 'resize' methods.
* menu: Auto resize the height upon the window size.
* menu: Add 'duration' property that allows the user to define duration time in milliseconds to hide menu.
* validatebox: Add 'onBeforeValidate' and 'onValidate' events.
* combo: Extended from textbox now.
* combo: Add 'panelMinWidth','panelMaxWidth','panelMinHeight' and 'panelMaxHeight' properties.
* searchbox: Extended from textbox now.
* tree: The 'getRoot' method will return the top parent node of a specified node if pass a 'nodeEl' parameter.
* tree: Add 'queryParams' property.
* datetimebox: Add 'spinnerWidth' property.
* panel: Add 'doLayout' method to cause the panel to lay out its components.
* panel: Add 'clear' method to clear the panel's content.
* datagrid: The user is allowed to assign percent width to columns.
* form: Add 'ajax','novalidate' and 'queryParams' properties.
* linkbutton: Add 'resize' method.
* New Plugins
* textbox: A enhanced input field that allows users build their form easily.
* datetimespinner: A date and time spinner that allows to pick a specific day.
* filebox: The filebox component represents a file field of the forms.
Version 1.3.6
-------------
* Bug
* treegrid: The 'getChecked' method can not return correct checked rows. fixed.
* tree: The checkbox does not display properly on async tree when 'onlyLeafCheck' property is true. fixed.
* Improvement
* treegrid: All the selecting and checking methods are extended from datagrid component.
* linkbutton: The icon alignment is fully supported, possible values are: 'top','bottom','left','right'.
* linkbutton: Add 'size' property, possible values are: 'small','large'.
* linkbutton: Add 'onClick' event.
* menubutton: Add 'menuAlign' property that allows the user set top level menu alignment.
* combo: Add 'panelAlign' property, possible values are: 'left','right'.
* calendar: The 'formatter','styler' and 'validator' options are available to custom the calendar dates.
* calendar: Add 'onChange' event.
* panel: Add 'method','queryParams' and 'loader' options.
* panel: Add 'onLoadError' event.
* datagrid: Add 'onBeginEdit' event that fires when a row goes into edit mode.
* datagrid: Add 'onEndEdit' event that fires when finishing editing but before destroying editors.
* datagrid: Add 'sort' method and 'onBeforeSortColumn' event.
* datagrid: The 'combogrid' editor has been integrated into datagrid.
* datagrid: Add 'ctrlSelect' property that only allows multi-selection when ctrl+click is used.
* slider: Add 'converter' option that allows users determine how to convert a value to the slider position or the slider position to the value.
* searchbox: Add 'disabled' property.
* searchbox: Add 'disable','enable','clear','reset' methods.
* spinner: Add 'readonly' property, 'readonly' method and 'onChange' event.
Version 1.3.5 Version 1.3.5
------------- -------------
* Bug * Bug
......
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic Accordion - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Basic Accordion</span> </div> </header> <div class="easyui-accordion" fit="true" border="false"> <div title="List"> <ul class="m-list"> <li>WLAN</li> <li>Memory</li> <li>Screen</li> <li>More...</li> </ul> </div> <div title="Ajax" href="_content.html" style="padding:10px"></div> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Custom Accordion Header - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Custom Accordion Header</span> </div> </header> <div class="easyui-accordion" data-options="fit:true,border:false,selected:-1"> <div> <header> <div class="hh-inner"> <span>List</span> <span class="m-badge" style="float:right">26/51</span> </div> </header> <ul class="m-list"> <li>WLAN</li> <li>Memory</li> <li>Screen</li> <li>More...</li> </ul> </div> <div href="_content.html" style="padding:10px"> <header> <div class="hh-inner"> <span>Ajax</span> <span style="float:right"> <span style="color:#999;margin-right:5px">Loading via ajax</span> <span class="m-badge">23</span> </span> </div> </header> </div> </div> </div> <style scoped> .hh-inner{ position: relative; line-height: 20px; background: #fff; font-weight: bold; margin: -5px; padding: 5px; } </style></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic Animation - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Basic Animation</span> </div> </header> <ul class="m-list"> <li><a href="#p2">Goto Panel2</a></li> </ul> </div> <div id="p2" class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-left"> <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a> </div> <div class="m-title">Panel2</div> </div> </header> <ul class="m-list"> <li><a href="#p3">Goto Panel3</a></li> </ul> </div> <div id="p3" class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-left"> <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a> </div> <div class="m-title">Panel3</div> </div> </header> <div style="padding:20px 10px"> <p>Panel3 Content.</p> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Fade Animation - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Fade Animation</span> </div> </header> <ul class="m-list"> <li><a href="#p2" data-options="animation:'fade',direction:''">Fade</a></li> </ul> </div> <div id="p2" class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-left"> <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a> </div> <div class="m-title">Panel2</div> </div> </header> <div style="padding:10px"> <p>Panel2 Content.</p> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Pop Animation - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Pop Animation</span> </div> </header> <ul class="m-list"> <li><a href="#p2" data-options="animation:'pop',direction:''">Pop</a></li> </ul> </div> <div id="p2" class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-left"> <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a> </div> <div class="m-title">Panel2</div> </div> </header> <div style="padding:10px"> <p>Panel2 Content.</p> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Slide Animation - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Slide Animation</span> </div> </header> <ul class="m-list"> <li><a href="#p2" data-options="animation:'slide',direction:'left'">Slide Left</a></li> <li><a href="#p2" data-options="animation:'slide',direction:'right'">Slide Right</a></li> <li><a href="#p2" data-options="animation:'slide',direction:'up'">Slide Up</a></li> <li><a href="#p2" data-options="animation:'slide',direction:'down'">Slide Down</a></li> </ul> </div> <div id="p2" class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-left"> <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true">Back</a> </div> <div class="m-title">Panel2</div> </div> </header> <div style="padding:10px"> <p>Panel2 Content.</p> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic Badge - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Basic Badge</span> </div> </header> <div style="padding:20px 40px"> <a href="#" class="easyui-linkbutton"> Button<span class="m-badge">2</span> </a> </div> <div style="padding:20px 40px"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok"> Button<span class="m-badge">3</span> </a> </div> <div style="padding:20px 40px"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',iconAlign:'top',size:'large'"> LargeButton<span class="m-badge">4</span> </a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',iconAlign:'top',size:'large'" style="margin-left:20px"> LargeButton<span class="m-badge">5</span> </a> </div> <div style="padding:20px 40px"> <a href="#" class="easyui-linkbutton m-badge" data-badge="22" style="width:100px;height:40px">Badge Attr</a> <a href="#" class="easyui-linkbutton m-badge" data-badge="23" style="width:100px;height:40px;margin-left:20px">Badge Attr</a> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Button Badge - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Button Badge</span> </div> </header> <footer> <div class="m-buttongroup m-buttongroup-justified" style="width:100%"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top',plain:true">Picture</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top',plain:true">Clip Art</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top',plain:true">Shapes<span class="m-badge">23</span></a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top',plain:true">SmartArt</a> </div> </footer> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>List Badge - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/color.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">List Badge</span> </div> </header> <ul class="m-list"> <li>Large <div class="m-right"><span class="m-badge" style="margin-top:10px">234</span></div> </li> <li>Spotted Adult Female <div class="m-right"><span class="m-badge" style="margin-top:10px">215</span></div> </li> <li>Venomless <div class="m-right"><span class="m-badge c1" style="margin-top:10px">12</span></div> </li> <li>Rattleless <div class="m-right"><span class="m-badge c2" style="margin-top:10px">6</span></div> </li> <li>Green Adult</li> <li>Tailless</li> <li>With tail</li> <li>Adult Female</li> </ul> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Tabs Badge - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-title">Tabs Badge</div> </div> </header> <div class="easyui-tabs" data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true"> <div style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/modem.png'/><br>Modem </div> <p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p> </div> <div style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/scanner.png'/><br>Scanner </div> <p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p> </div> <div style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/pda.png'/><br>Pda <span class="m-badge">23</span> </div> <p>A personal digital assistant (PDA), also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. PDAs are largely considered obsolete with the widespread adoption of smartphones.</p> </div> <div style="padding:10px"> <div class="panel-header tt-inner"> <img src='../images/tablet.png'/><br>Pda <span class="m-badge">13</span> </div> <p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p> </div> </div> </div> <style scoped> .tt-inner{ display:inline-block; line-height:12px; padding-top:6px; position: relative; } p{ line-height:150%; } </style></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic LinkButton - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Login to System</span> </div> </header> <div style="margin:20px auto;width:100px;height:100px;border-radius:100px;overflow:hidden"> <img src="../images/login1.jpg" style="margin:0;width:100%;height:100%;"> </div> <div style="padding:0 20px"> <div style="margin-bottom:10px"> <input class="easyui-textbox" data-options="prompt:'Type username',iconCls:'icon-man'" style="width:100%;height:38px"> </div> <div> <input class="easyui-passwordbox" data-options="prompt:'Type password'" style="width:100%;height:38px"> </div> <div style="text-align:center;margin-top:30px"> <a href="#" class="easyui-linkbutton" style="width:100%;height:40px"><span style="font-size:16px">Login</span></a> </div> <div style="text-align:center;margin-top:30px"> <a href="#" class="easyui-linkbutton" plain="true" outline="true" style="width:100px;height:35px"><span style="font-size:16px">Register</span></a> </div> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Group LinkButton - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <div class="m-title">Button Group</div> </div> </header> <div style="text-align:center;padding:10px"> <span class="m-buttongroup"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true" onclick="show1('#m-modem')" style="width:80px;height:30px">Modem</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" onclick="show1('#m-scanner')" style="width:80px;height:30px">Scanner</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" onclick="show1('#m-tablet')" style="width:80px;height:30px">Tablet</a> </span> </div> <div id="items" style="padding:10px 20px;"> <div id="m-modem" class="m-item"> <img src="../images/modem.png"/> <p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p> </div> <div id="m-scanner" class="m-item" style="display:none"> <img src="../images/scanner.png"/> <p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p> </div> <div id="m-tablet" class="m-item" style="display:none"> <img src="../images/tablet.png"/> <p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p> </div> </div> </div> <script> function show1(id){ $('div.m-item').hide(); $(id).show(); } </script> <style scoped> p{ line-height:150%; } #items img{ margin:0 10px 10px 0; float:left; } </style></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Button Style - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/color.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Button Style</span> </div> </header> <div style="padding:20px"> <p>Style</p> <a href="#" class="easyui-linkbutton" style="width:80px">Normal</a> <a href="#" class="easyui-linkbutton" plain="true" outline="true" style="width:80px">Outline</a> <a href="#" class="easyui-linkbutton" disabled style="width:80px">Disabled</a> <p>Colors<p> <p><a href="#" class="easyui-linkbutton c1" style="width:100%">Button1</a></p> <p><a href="#" class="easyui-linkbutton c2" style="width:100%">Button2</a></p> <p><a href="#" class="easyui-linkbutton c3" style="width:100%">Button3</a></p> <p><a href="#" class="easyui-linkbutton c4" style="width:100%">Button4</a></p> <p><a href="#" class="easyui-linkbutton c5" style="width:100%">Button5</a></p> <p><a href="#" class="easyui-linkbutton c6" style="width:100%">Button6</a></p> </div> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Switch Button - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/color.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Switch Button</span> </div> </header> <ul class="m-list"> <li> <span>Network</span> <div class="m-right"><input class="easyui-switchbutton" checked></div> </li> <li> <span>Bluetooth</span> <div class="m-right"><input class="easyui-switchbutton" checked></div> </li> <li> <span>Sent mail</span> <div class="m-right"><input class="easyui-switchbutton" data-options="checked:false"></div> </li> <li> <a href="javascript:void(0)">Storage...</a> </li> <li> <a href="javascript:void(0)">More...</a> </li> </ul> </div></body> </html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic DataGrid - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <table id="dg" data-options="header:'#hh',singleSelect:true,border:false,fit:true,fitColumns:true,scrollbarSize:0"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> </tr> </thead> </table> <div id="hh"> <div class="m-toolbar"> <div class="m-title">Basic DataGrid</div> </div> </div> <script> var data = [ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}, {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"}, {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}, {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"}, {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"}, {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"}, {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"}, {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"}, {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"} ]; $(function(){ $('#dg').datagrid({ data: data }); }); </script></body> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Row Editing DataGrid - jQuery EasyUI Mobile Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
<table id="dg" data-options="
header:'#hh',
iconCls: 'icon-edit',
singleSelect: true,
fit:true,
fitColumns:true,
border: false,
scrollbarSize: 0,
data: data,
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,editor:'textbox'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
</tr>
</thead>
</table>
<div id="hh">
<div class="m-toolbar">
<div class="m-title">Row Editing</div>
<div class="m-right">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()"></a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"></a>
</div>
</div>
</div>
<script type="text/javascript">
var data = [
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
];
$(function(){
$('#dg').datagrid({
data: data
});
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
</script>
</body>
</html>
\ No newline at end of file
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Basic DataList - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">Basic DataList</span> </div> </header> <ul class="easyui-datalist" data-options=" fit: true, lines: true, border: false "> <li>Large</li> <li>Spotted Adult Female</li> <li>Venomless</li> <li><a href="javascript:void(0)" class="datalist-link">Rattleless</a></li> <li><a href="javascript:void(0)" class="datalist-link">Green Adult</a></li> <li>Tailless</li> <li>With tail</li> <li>Adult Female</li> </ul> </div></body> </html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment