EasyUI Forum
May 11, 2024, 12:03:51 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: feature request - dynamic icon-class folder [Solved]  (Read 10574 times)
devnull
Sr. Member
****
Posts: 431


View Profile
« 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 !
« Last Edit: December 14, 2014, 01:17:16 AM by devnull » Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #1 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>
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #2 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.

Logged

-- Licensed User --
richard_huza
Newbie
*
Posts: 1

richard_huza
View Profile Email
« Reply #3 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...
« Last Edit: February 10, 2015, 01:02:47 AM by richard_huza » Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #4 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
Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #5 on: February 16, 2015, 10:32:05 PM »

Yes, please download the attached file 'autoicons.js' that uses one single <style>.
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #6 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.


« Last Edit: February 17, 2015, 05:14:30 PM by devnull » Logged

-- Licensed User --
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!