First, introduce a little jquery problem
jquery is problematic in setting transparency, first look at its code:
Code
Copy Code code as follows:
IE uses filters for opacity
if (!jquery.support.opacity && name = = "Opacity") {
if (set) {
IE has trouble with opacity if it does not have layout
Force it by setting the zoom level
Elem.zoom = 1;
Set the Alpha filter to set the opacity
Elem.filter = (Elem.filter | | ""). Replace (/alpha\ ([^)]*\)/, "") +
(parseint (value) + ' = = ' NaN '? "": "Alpha (opacity=" + value * 100 + ")");
}
return elem.filter && elem.filter.indexOf ("opacity=") >= 0?
(Parsefloat (Elem.filter.match (/opacity= ([^)]*)/) [1])/100) + ':
"";
}
Under normal circumstances, using the filter to set transparency is no problem, but what if our element already has a filter? Suppose this is the case:
Filter:alphaimageloader (src= "...");
After executing the jquery code, it naturally becomes this way:
Filter:alphaimageloader (src= "..."); Alpha (OPACITY=80)
Notice that we have a semicolon? This makes alpha a CSS rule, not part of the filter
The solution is also very simple, in the jquery source code again to replace the semicolon with a space can
But this also shows a problem, jquery, after all, is not a very good architecture as the basis of the library, its replacement and extensibility can almost say no, in order to such a small problem, in addition to the source of the changes I could not think of a change from the outside, if the prototype framework, Just replace the setopacity function directly, so if jquery can call another function when it discovers IE, instead of continuing to inline logic in the current function, our modifications will be much easier.
Here is the modified code
The modified code
Copy Code code as follows:
IE uses filters for opacity
if (!jquery.support.opacity && name = = "Opacity") {
if (set) {
IE has trouble with opacity if it does not have layout
Force it by setting the zoom level
Elem.zoom = 1;
Set the Alpha filter to set the opacity
Elem.filter = (Elem.filter | | ""). Replace (/alpha\ ([^)]*\)/, ""). Replace ('; ', ') +
(parseint (value) + ' = = ' NaN '? "": "Alpha (opacity=" + value * 100 + ");");
}
return elem.filter && elem.filter.indexOf ("opacity=") >= 0?
(Parsefloat (Elem.filter.match (/opacity= ([^)]*)/) [1])/100) + ':
"";
}
All right, introduce the new book.
Recently, the company wanted to make the web system look like a desktop, this is really a crazy idea, but from my point of view, it is exciting and interesting, this is what I can do, but not easy to do, and as an effort to advance in the direction of the programmer, only constantly encounter this challenge, To grow up slowly.
So after four days of design and development, finally have a more stable version, because its function has not yet reached the original plan, so called the 0.8 version (this decision to use a simple version management, that is, all decimal points after not 0 of the version are beta, until 1.0, 2.0 and so on is called the Stable official edition)
I think from the screenshot can not see the effect of this framework, so in the upload of the compressed package contains a demo.htm page, interested friends may download the test in person, and here only to release the framework of the class diagram for reference
General Ideas
Making the Web desktop form was a challenge from the outset, and the challenge to me was far greater than the sense of sanity.
Because of the complexity of the desktop, it is necessary to use object-oriented thinking to build, and the most important thing in the thought of the responsibility is clear, under the guidance of such ideas, derived from the above picture of the frame diagram
The first is the base class control of all controls, providing only the lifecycle management, namely render and Dispose, and the management of events, namely, bind, unbind, and trigger
In the inheritance system of control, Using a similar asp.net model, the render and Dispose methods do not provide overrides (as the ProcessRequest method of the page class does not allow you to rewrite at will), but rather open up events for rewriting at the appropriate lifecycle node, which includes the rendering , rendered, disposing, disposed four most basic events, and all subsequent controls complete the function by overriding the 4 methods
The following taskbar represents the taskbar, Taskicon represents the icon on the taskbar, which is nothing to say, Taskbar is responsible for managing all Taskicon from the container's point of view, while Taskicon is responsible for the specific presentation
What's worth mentioning is that grouptaskicon, in fact, maintains a series of Titledtaskicon, in a "combination" way, so that Grouptaskicon does not need to redesign HTML representation for each window again
In the Window section, the original setting is that different window classes have different ways of loading content, such as:
Remotewindow content from remote loading
Elementwindow load content from concrete HTML elements
However, this has to face a problem, window also carries the function of behavior, performance and container, so n behavior and M expression will generate n*m subclass, greatly improve the complexity of the control system, such as:
Tabremotewindow, Tabelementwindow
Gorupremotewindow, Groupelementwindow
Obviously, there are too many repetitions between these 4 classes, which is not conducive to the reuse of code, but also to the user's choice.
With this in mind, I detached the "Performance" section of window to create renderer,renderer responsible for rendering the content in window so that it could be developed using a series of renderer and a series of window combinations. Using combinations rather than inheritance is also an object oriented principle.
Specific implementation details and a deeper step-by-step structure design, and now do not have a good idea, but also please allow me to blog the next time to specify the
Version plan
The current release is version 0.8, which actually contains some 0.9 versions of the functionality, and I will implement the following in version 0.9:
1, add timer class execution timing plan
2, add Behavior Library to separate window behavior
3, the formation of a constant library, to obtain such complex strings
4, beautify taskbar and Grouptaskicon
5, add Exui.overlay to provide mask layer
The 0.9 version will be completed on October 5, as a gift for your first birthday after graduation.
The subsequent version 1.0 will be a stable version, along with improvements in the following:
1. Adding DOM libraries to build DOM elements
2, desktop support viewport control the position of all elements to adapt to the window size changes
3, Dockwindow can shrink on the four edges of the desktop, when the mouse moved to an empty range automatically appear (similar to QQ)
The release time for version 1.0 is now uncertain because I have seen a long overtime for the next six months ...
Download
The package contains the Demo.htm demo page, the script folder is all the need to use the JS file, which except jquery and Json2 belong to this framework, the style folder under the CORE.CSS is the framework of the core CSS files
Doc folder is the framework document, generated by JSDoc Toolkit
As originally a demo to the company demo, but related to the company's business data can not directly take out the demo page, so here's images folder and so some confusion, but also please forgive me
Http://xiazai.jb51.net/200910/yuanma/ExUI.rar
Also please try to give advice to friends, such a framework, is not worth continuing to develop, or take the path of open source is not a little hope, has been working for half a year, also hope that they can have a real shot of the work.
