Print Page - Transparent background of sidemenu

Title: Transparent background of sidemenu
Post by: officecode on June 18, 2019, 04:17:00 AM

I am trying to use easyui to do mobile projects. Here is the sample code:

Code:

<div class="easyui-navpanel">
	<header>
		<div class="m-toolbar">
			<span class="m-title">title</span>
			<div class="m-right">
				<a id="sm"></a>
			</div>
		</div>
	</header>
</div>
<script type="text/javascript">
	var data = [{
		text: 'Item1',
		iconCls: 'icon-more',
		state: 'open',
		children: [{
			text: 'Option1'
		},{
			text: 'Option2'
		},{
			text: 'Option3',
			children: [{
				text: 'Option31'
			},{
				text: 'Option32'
			}]
		}]
	}];
	$('#sm').sidemenu({
		width:20,
		height:30,
		border:false,
		data:data,
		collapsed:true
	});
</script>

I have a few questions:
1. How can I make the background of sidemenu transparent?
2. Can I show or hide sidemenu by other button clicks?
3. Can sidemenu be bound to the menu attribute of the menubutton component?

Looking forward to your answer, thank you very much!

Title: Re: Transparent background of sidemenu
Post by: stworthy on June 18, 2019, 06:57:39 PM

Override this style to make the sidemenu panel transparent.

Code:

.sidemenu .accordion{
	background: transparent;
}

To show the sidemenu programmatically, please try this code.

Code:

var h = $('#sm').find('.accordion').accordion('getPanel',0).panel('header');
h.tooltip('show')

Title: Re: Transparent background of sidemenu
Post by: officecode on June 18, 2019, 10:14:53 PM

Thank you, already solved! I still recommend that the official fix this problem in the sidemenu component, and can add some methods.
In addition, I came across a new question: Why isn't the icon button in sidemenu displayed in some Android systems? When the linkbutton is used and its plain property is set to true, it can be displayed normally.

Title: Re: Transparent background of sidemenu
Post by: officecode on June 19, 2019, 05:07:43 PM

I tried it later and found that the icon button in sidemenu is not displayed when browsing the page on the iPhone.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: officecode on June 18, 2019, 04:17:00 AM