Print Page - feature request - dynamic icon-class folder [Solved]

Title: feature request - dynamic icon-class folder [Solved]
Post by: devnull on December 13, 2014, 12:34:26 AM

It would be great if you could specify a folder where your icons are located and have easyui automatically select the icon from that folder without first needing to create a css style for each icon.

so if my folder contained the following icons:

house.png
tree.gif
apple.jpg

then by specifying {iconCls: icon-house} easyui would select the house.png file

I have hundreds of icons, although only a few are used on each page, and it would be so much easier this way, although probably a little slower in loading !

Title: Re: feature request - dynamic icon-class folder
Post by: jarry on December 13, 2014, 07:36:46 AM

Only the 'iconCls' property defined in an element can be parsed. The attached file achieves this functionality. Please follow the steps:
1. Download the 'autoicons.js' file and copy it to the easyui directory.

Code:

<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../autoicons.js"></script>

2. Create a sub directory named 'aicons' in the '/easyui/themes/' directory.
3. Copy all your icons to the 'aicons' directory.
4. Assign the 'iconCls' property to the component. The 'iconCls' name must start with 'aicon-'.

Code:

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="aicon-aiwrap" onclick="edit()">Edit</a>

Title: Re: feature request - dynamic icon-class folder
Post by: devnull on December 14, 2014, 01:17:00 AM

Thank you so much, that works great.

The level of support you guys provide really is excellent.

Title: Re: feature request - dynamic icon-class folder [Solved]
Post by: richard_huza on February 09, 2015, 08:36:43 PM

Hi, I'm newbie to .js, I'll try the recipe, but it doesn't work for me...

this is my testing code:

Code:

    <title>Test icons</title>
	<link rel="stylesheet" type="text/css" href="./js/libs/jquery-easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./js/libs/jquery-easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./js/libs/jquery-easyui/demo.css">
	<script type="text/javascript" src="./js/libs/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="./js/libs/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/libs/jquery-easyui/autoicons.js"></script>
    </head>
    <body>
    <h2>Test icons</h2>

	<!-- 
         ./js/libs/jquery-easyui/themes/aicons/aiwrap.png
         or
         ./js/libs/jquery-easyui/themes/aicons/aicon-aiwrap.png 
         -->
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="aicon-aiwrap" onclick="edit()">Edit</a>

The icon doesn't appear...
I try to leave a trace into autoicons.js like that:

Code:

(function($){
	var base = '.';
	var dir = 'themes/aicons/';
	var cls = {};
	println(dir);
        [...]

it doesn't print dir variable...
Sorry if it's a dumb question...

It's ok now...
1. It seems to be a CLEAR CACHE of browser problems
2. I used a wrong track function println(dir); instead of document.writeln(dir+'<br>');
3. The name of image file must be whithout the prefix 'aicon-', just aiwrap.png
4. It works also with .ico extension if you modifiy the line in autoicons.js: var icon = ss[1]+'.ico';

I let this post here, maybe is usefull for another user...

Title: Re: feature request - dynamic icon-class folder [Solved]
Post by: devnull on February 15, 2015, 07:47:08 PM

Hi Jarry;

Could this be changed so that it adds a single new style to the page, rather than 1 style per icon as now I have a LOT of styles in my header !

Thanks

Title: Re: feature request - dynamic icon-class folder [Solved]
Post by: jarry on February 16, 2015, 10:32:05 PM

Yes, please download the attached file 'autoicons.js' that uses one single <style>.

Title: Re: feature request - dynamic icon-class folder [Solved]
Post by: devnull on February 17, 2015, 05:11:11 PM

Jarry, thanks so much that works perfectly.

FYI - I removed the newline and replaced it with a space to minify the css.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on December 13, 2014, 12:34:26 AM