EonerCMS-CMS for a desktop-like system (II)

As I said last week, I am going to start a CMS system like a desktop system. Now, a week has passed. Let's make a small summary. By the way, let's answer the small questions left at the end of the last week.

Desktop

After thinking about the interface, I tried to imitate 115. That is to say, it was an imitation. In fact, it was almost a copy. Because I have read HTML and CSS, there is no big technical content, and there will be no difficulties in making them. I simply leave this step and go to the next topic.

Last week, I left a question: the shortcuts on the desktop. Why can't I write them directly on the page instead of loading them through js. In fact, it is not necessary to load and generate through js, but even if it is written on the page, it is still located through js, right, that is, positioning. Imagine that the browser's window is large and small. If it is written directly in the page and fixed to death, the window is reduced, and it is not necessary to cover some icons. To solve this problem, follow these steps:

1. The position style of each icon is defined as absolute, that is, absolute positioning.

2. Use js to locate each icon

3. Update the positioning of each icon when the window size is changed.

As this is not a tutorial, I have not prepared a demo in various cases. I will use firebug to demonstrate it. Please forgive me.

First, define the position style of each icon as absolute. See the figure.

This is OK. If we comment out position: absolute, let's see what will happen.

As we can see, the icon is directly arranged vertically to the end, and the excess part is invisible. Therefore, position: absolute is used to solve this problem.

Next, let's continue. We all know that absolute is usually used in combination with the top, right, left, and bottom directions to achieve absolute positioning. If it is not set, this will happen. In order to do the test, I manually removed the line style of li.

We can see that there is only one icon. No, actually, all the icons are stacked together. Therefore, to define position: absolute, you must define the offset pixels of each icon, this operation is handled by js.

$ (Window ). bind ('load', function () {// cyclically output each icon for (var SC in each cut) {$ (ul ). append ('<li style = "left:' + _ left + 'px; top: '+ _ top + 'px "title ="' + shortcut [SC] [1] + '"shortcut ="' + shortcut [SC] [0] + '">  <span> '+ cut [SC] [1] +' </span> <em> </ em> </li> '); // Add 90px_top + = 90 to the top offset after one icon in each loop; // when the top offset of the next icon is greater than the window height, the top is set to zero, left offset plus 90 pxif (_ top + Core. config. shortcutTop + 57> running wheight) {_ top = Core. config. shortcutTop; _ left + = 90 ;}}});

// Id, iconName, iconUrl, url, width, height, top, leftvar shortcut cut = [[0, "", "img/kind.png", "xxx. php ", 800,500, 0,300], [1," news management "," img/news.png "," xxx. php ", 800,200,100,300], [2," Address Book "," img/tel.png "," xxx. php ", 800,500, 0,300], [3," topic management "," img/news.png "," xxx. php ", 800,500, 0,300], [4," topic management "," img/news.png "," xxx. php ", 800,500, 0,300], [5," topic management "," img/news.png "," xxx. php ", 800,500, 0,300], [6," topic management "," img/news.png "," xxx. php ", 800,500, 0,300], [7," topic management "," img/news.png "," xxx. php ", 800,500, 0,300];

The js comments in the first section above should be very clear. The principle is to use js to cyclically Add the li object, that is, the icon, and set the offset of the icon, when the position of an icon is outside the display form, it is automatically switched to the second column, that is, the top is reset to zero, and the left is added with a certain offset value.

The last step is to update the form when the size of the form is changed. There are two methods for updating here. One is to reload it again, so I don't need to talk about it, that is, to execute the second step again, of course, you must first clear the original one. Another method is to modify the offset of each icon through js. I am using the second method. You can refer to the code below.

$ (Window ). bind ('resize', function () {// because there are not too many icons, the method in resize is to directly modify the style. Of course, you can also recreate li_top = Core. config. shortcutTop; _ left = Core. config. shortcutLeft; returns wheight =$ (Core. config. desk ). height (); // loop ul, operate each li $ (ul ). find ("li" ).each(function(){((this).css ({"left": _ left, "top": _ top}); _ top + = 90; if (_ top + Core. config. shortcutTop + 57> running wheight) {_ top = Core. config. shortcutTop; _ left + = 90 ;}});});

In this way, the desktop tag loading function is completed. A problem was found in subsequent tests. That is, the resize method will be executed twice. Baidu has checked it and there is no better method. Most of the methods still prevent the issue of executing twice through latency. If you have a good solution, please leave a message to me.

In fact, there were not many things I did last week, and I was a little busy with my work. I didn't take time out on Thursday and Friday to study. However, I was very excited when I saw a message from someone in the previous article. The predecessor has already made something similar to my idea and told me about his production experience. I have no reason not to continue.

So, continue this week.