xWin之JS版

2016-02-19 11:44 28 1 收藏

下面是个超简单的xWin之JS版教程，图老师小编精心挑选推荐，大家行行好，多给几个赞吧，小编吐血跪求~

【 tulaoshi.com - Web开发】

目前代码应该没什么bug了，兼容IE6.0 & FF 1.5, 通过xHTML 的Transitional验证和 CSS 验证。

为了能通过验证，只好再次改变使用的方式，改为用DIV实现，方法：
代码如下：

div class="xWin"
span class="xWinSetting" width="200" top="270" left="140" title="我就是传说中那个超长的窗口标题"/span
content
/div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>xWin HTC Demo</title> <style type="text/css"> body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; } .xWin { position:absolute; cursor:default; border-width:2px; border-style:outset; padding:0px; font-size:12px; overflow:hidden; display:block; } .xWin .xWinSetting { display:none; } .xWin .xTitle { color:#FFFFFF; height:20px; display:block; } .xWin .xTitle input { background-color:transparent; color:#FFFFFF; border-width:0px; border-style:solid; height:20px; width:16px; line-height:20px; font-family:webdings; font-size:10px; margin:0px; padding:0px; text-align:center; float:right; display:block; } .xWin .xTitle .xWinTitleCloseButton {  } .xWin .xTitle .xWinTitleMaxButton {  } .xWin .xTitle .xWinTitleMinButton {  } .xWin .xTitle .xWinTitleContent { color:#FFFFFF; font-size:12px; height:18px; line-height:20px; margin:0px; padding-left:3px; float:left; display:block; overflow:hidden; white-space:nowrap; text-align:left; cursor:default; } .xWin .xWinBody { margin:0px; background-color:#FFFFFF; color:#000000; padding:3px; font-size:12px; overflow:auto; position:relative; display:block; } .xShadow { position:absolute; display:block; background-Color:#000000; color:#FFFFFF; } </style>  </head> <body>  width="400" height="400" top="300" left="100" 我就是传说中那个超长的窗口标题我就是传说 width="100" top="20" left="20" 中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长  的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题 我就是传说中那个超长的width="100" top="40" left="40"  中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长  窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那个超长的窗口标题我就是传说中那 个超长的窗口标题我就是传说中那个超长的窗口标题 c 12345width="200" top="270" left="140" 我是窗口2 我是窗口2 我是窗口2 我是窗口2 更换标题 我是窗口2 我是窗口2 我是窗口2 我是窗口2  win1 win2 win3 win4  </body> </html>

来源:http://www.tulaoshi.com/n/20160219/1598391.html

上一篇：教你几招识别假U盘的伎俩
下一篇： JavaScript的面向对象(一)

看过《xWin之JS版》的人还看了以下文章更多>>

Prototype使用指南之hash.js

标签： Web开发

Hash对象(关联数组)是Prototype新建的一个对象，要创建一个Hash对象可以调用$H(object)方法，因为javascript本身的特点(对象本身就是关联数组) ，所以实现Hash也很简单，Prototype中的Hash只是javascript的关联数组(对象) keys(): 返回hash的键值数组 values(): 返回值得数组 merge(hash): 合并两个hash toQueryString(): 跟string的toQ...

Prototype使用指南之form.js

标签： Web开发

这一部分提供了很多与表单操作有关的功能，包括以下部分，当通过$方法返回元素时，可以直接通过$(element).method()调用： Form对象：提供了操作整个表单的一些方法 Form.Element对象：提供了操作某个表单元素的方法 TimedObserver类：周期性表单监视器，当表单元素值改变的时候执行一个回调函数，有Form和Element两种类型 EventObserver类：...

Prototype使用指南之enumerable.js

标签： Web开发

Enumerable是一个抽象对象（需要说明的是，javascript中并没有类的概念，所指的类也就是一个函数，继承一般指的是一个对象(父)将它的方法属性copy(通过Object.extend, copy的是引用)到子类(函数)的prototype属性(一个对象)中） Enumerable不能直接使用，它被很多枚举类型（Hash、Array、Range等）所继承，继承的类型都要实现一个_each方法，提供...

Prototype使用指南之selector.js

标签： Web开发

Selector是利用css selector来匹配选择页面元素的，所以要理解Selector首先应该对css selector有所理解，下面是css2 selector的语法，当然很多浏览器只是支持其中的一部分，Prototype 中的Selector主要支持tag选择器、class选择器和id选择器，还有属性(attribute)选择器，基本上包含我们平时所用的所有类型 The following table summarizes CS...

Prototype使用指南之array.js

标签： Web开发

$A = Array.from(iterable): 将iterable转化为数组，如果iterable定义了toArray方法，就调用这个方法，否则利用iterable的length属性进行枚举, 如果iterable没有length属性的话就返回空数组[] Array对象除了扩展Enumerable对象的方法外，另外扩展了如下的几个方法，注意以下方法除了clear外都不改变原来数组，而是返回一个新数...

查看更多精彩>>