Recent Posts

Please override the 'blur' event handler.

Code:

$('#ROL_DUR').timespinner({
	showSeconds: false
	, value: ''
	, inputEvents: $.extend({}, $.fn.timespinner.defaults.inputEvents, {
		blur: (e) => {
			$.fn.timespinner.defaults.inputEvents.blur.call(this,e);
			console.log(">>> blur handler wurde getriggert");
		}
	})
});

Of course - me bad.
 

Please set the 'text-align:right' css style for the toolbar.

Code:

<div id="tb" style="text-align: right;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>

In this example I would like the toolbar to appear on the right hand side of the datagrid but I just cannot see how.
Can anybody point me in the right direction?
Many thanks

<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
        url="data/datagrid_data.json"
        title="DataGrid with Toolbar" iconCls="icon-save"
        toolbar="#tb">
    <thead>
        <tr>
            <th field="itemid" width="80">Item ID</th>
            <th field="productid" width="80">Product ID</th>
            <th field="listprice" width="80" align="right">List Price</th>
            <th field="unitcost" width="80" align="right">Unit Cost</th>
            <th field="attr1" width="150">Attribute</th>
            <th field="status" width="60" align="center">Stauts</th>
        </tr>
    </thead>
</table>
<div id="tb">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
</div>

I have the following html:
<div class="col-md-3">
          <div class="form-group">
            <input class="easyui-timespinner form-control" style="width:100%;" id="ROL_DUR" label="Arbeitszeit:" labelPosition="top" required>
            <div class="invalid-feedback">Geben Sie die Dauer der Durchführung ein!</div>
            <!-- <div class="valid-feedback">Die Dauer der Durchführung wurde eingetragen</div> -->
          </div>
        </div>

in js I tried this:
 $('#ROL_DUR').timespinner({
         showSeconds: false
        ,value: ''
      });

    const cInputROL_DUR = $('#ROL_DUR').timespinner('textbox');
    console.log("textbox type:", cInputROL_DUR.prop("tagName"), "id:", cInputROL_DUR.attr("id"));
    console.log("--- cInputROL_DUR - length: " + cInputROL_DUR.length);

    if (cInputROL_DUR.length) {
      $('#ROL_DUR').timespinner('textbox').on('blur', function() {

        console.log(">>> blur handler wurde getriggert"); // Test

        const newValue = $('#ROL_DUR').timespinner('getValue');
        console.log("--- blur on ROL_DUR: " + newValue);

and this:

const realInput = $('#ROL_DUR').timespinner('textbox')[0]; // echtes <input>
if (realInput) {
  realInput.addEventListener('blur', function() {
    const newValue = $('#ROL_DUR').timespinner('getValue');
    console.log(">>> blur feuert! Wert:", newValue);

nothing works.

How can I implement a eventListener when the field is left by the cursor?

TriStateBox is a jQuery EasyUI component that renders a three-state selector (1/0/null) inside a standard textbox shell.

It preserves EasyUI labeling, sizing, and form behavior while replacing text input with three equal-width buttons.

Values map to Y, N, and ? with customizable labels via symY, symN, and symU.

Public API: getValue(), setValue(v), clear(), reset(), enable(), disable(), resize(w), destroy().

It normalizes JSON inputs (1, 0, null, '1', '0') and fires onChange(oldVal, newVal) on state changes.

Code:

$('#test').tristatebox({
  label: 'Label:'
, labelPosition: 'before'
, labelAlign: 'left'
, value: null
, onChange: function (o, n) { console.log('TriState change:', o, '→', n); }
});

Code:

$(`#test2`).tristatebox({
  value: 0
, symY: 'label Yes'
, symN: 'label No'
, symU: 'off'
});

Please set the 'showEvent' property value to 'click'. This means that the menu won't show until the 'click' event is triggered.

Code:

<a href="javascript:void(0)" class="easyui-menubutton"
	data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false,showEvent:'click'">
</a>

Hi Jarry.

It's excatly the same i do.

Problem is, when you go to the site on an  iphone, and click on menu button, the three dots, it open and close the menu again.

It doesn't work on iphone/ipad. Have tried it on both Safari and Chrome, same error

Try your demo/mobile demos/menu/basic. Same problem. Can't show menu on iphone/ipad

This documentation is available now. Please download it from that link.

This is the code that shows the panel header with the menu on the right.

Code:

<!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 Menu - jQuery EasyUI Mobile Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/mobile.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.mobile.js"></script>
</head>

<body>
	<div class="easyui-navpanel">
		<header>
			<div class="m-toolbar">
				<div class="m-title">TEST</div>
				<div class="m-right">
					<a href="javascript:void(0)" class="easyui-menubutton"
						data-options="iconCls:'icon-more',menu:'#mm1',menuAlign:'right',hasDownArrow:false"></a>
				</div>
			</div>
		</header>
	</div>
	<div id="mm1" class="easyui-menu" style="width:200px;">
		<div data-options="iconCls:'icon-photo_portrait_16'" onclick="test()">Test</div>
	</div>
</body>

</html>