<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://desktopxframe/content/bindings/workareaframe/workarea.css" type="text/css"?>
<?xml-stylesheet href="main.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title=""
onload=""
width="600px"
height="600px">
<script type="application/x-javascript" src="main.js"/>
<!-- your xul code -->
<vbox id="zfx" >
<box id="xafx">
<groupbox id="an">
<caption label="pack" />
<box>
<hbox>
<textbox id="shur1"/>
<menulist id="x1">
<menupopup>
<menuitem label="+"/>
<menuitem label="-"/>
<menuitem label="*"/>
<menuitem label="/"/>
</menupopup>
</menulist>
<spacer flex="1"/>
</hbox>
<textbox id="shur2"/>=<textbox id="shur3"/>
</box>
<box>
<button label="open" onclick='startNumberSum(this)'/>
</box>
<hbox pack="start" >
<button label="1" onclick='startNumber(this)'/>
<button label="2" onclick='startNumber(this)'/>
<button label="3" onclick='startNumber(this)'/>
</hbox>
<hbox pack="center" >
<button label="4" onclick='startNumber(this)'/>
<button label="5" onclick='startNumber(this)'/>
<button label="6" onclick='startNumber(this)'/>
</hbox>
<hbox pack="end" >
<button label="7" onclick='startNumber(this)'/>
<button label="8" onclick='startNumber(this)'/>
<button label="9" onclick='startNumber(this)'/>
</hbox>
</groupbox>
</box>
</vbox>
</window>
------------------------------------------xul上面--------------------
function startNumber(thisButton){
var value=document.getElementById("shur1").value;
if( value==null||value==""){
document.getElementById("shur1").value=thisButton.label;
}else{
document.getElementById("shur2").value=thisButton.label;
}
//alert("thisButton");
}
function startNumberSum(){
var valueA = document.getElementById('shur1').value;
var valueOpr = document.getElementById('x1').label;
var valueB = document.getElementById('shur2').value;
if(valueA==null||valueA==""){
valueA=0;
}
if(valueB==null||valueB==""){
valueB=0;
}
var result = 0;
switch(valueOpr){
case '+':
result = parseInt( valueA ) + parseInt( valueB );
break;
case '-':
result = parseInt( valueA ) - parseInt( valueB );
break;
case '*':
result = parseInt( valueA ) *parseInt( valueB );
break;
case '/':
result = parseInt( valueA ) /parseInt( valueB );
break;
}
//最后把结果放进去
document.getElementById('shur3').value = result;
}
----------------------------------------javascript--------------------
#zfx{
background:red;
min-width:600px;
min-height:600px;
}
#xafx{
background:green;
max-width:290px;
min-height:290px;
position:fixed;
top:100px;
left:100px;
}
#an{
min-height:250px;
min-width:200px;
}
#shur1{
min-height:20px;
max-width:60px;
}
#shur2{
min-height:20px;
max-width:60px;
}
#shur3{
min-height:20px;
max-width:60px;
}
-------------------------------------css--------------------------
最终实现计算器功能-------------------------------------------------------
分享到:
相关推荐
该项目是一款基于Firefox浏览器的全屏设计源码扩展,包含39个文件,涵盖21个PNG图片、4个JavaScript脚本、3个CSS样式表、3个XUL界面定义、2个ICO图标、2个DTD文档类型定义、1个manifest文件、1个JSON数据文件、1个...
XUL包含一系列的UI元素,如按钮、标签、列表框等,这些元素可以通过XML语法定义,并可以与JavaScript或CSS结合使用,以实现动态交互和样式控制。 在"Xul学习小程序"中,我们可以预见到以下核心知识点: 1. **XUL...
3. **样式表(CSS)**:XUL界面的样式可以通过CSS(Cascading Style Sheets)进行定制,类似于HTML中的样式设计,可以调整字体、颜色、布局等。 4. **事件处理**:XUL支持JavaScript,允许通过绑定事件监听器来响应...
XUL允许开发者使用XML来定义用户界面元素,并结合CSS来控制样式,JavaScript来处理交互逻辑。在本项目中,"用xul做的动态变化的 tree" 指的是一种可动态增删改的树形视图控件,这种控件在数据管理、文件系统浏览等...
XUL允许开发者通过XML描述界面布局和交互,结合CSS和JavaScript实现复杂的用户界面逻辑。在Firefox扩展开发中,XUL提供了一种标准化的方式来创建自定义的浏览器界面,使得开发者可以创建功能丰富的插件和工具。了解...
`defaults`目录下可能包含默认的样式表(CSS)、脚本(JavaScript)或者其他配置文件。这些文件定义了界面元素的初始状态和行为,比如颜色、字体、大小等,使得应用在启动时具有预设的外观和功能。 5. **chrome**...
5. **Gecko渲染引擎**:Gecko是Mozilla浏览器背后的渲染引擎,负责解释和展示网页内容,包括HTML、CSS、JavaScript以及XUL。理解Gecko的工作原理有助于开发者创建更高效、更适应Gecko渲染方式的XUL界面。 6. **学习...
Gecko是Mozilla浏览器所使用的布局引擎,它负责解析HTML、CSS以及JavaScript等Web标准,从而渲染页面。然而,在实际开发中,由于不同浏览器对Web标准的支持程度不一,导致了所谓的“PresentationalError”、...
它利用XML的结构化特性,结合CSS样式和JavaScript逻辑,构建出可定制的用户界面。通过学习和理解XUL,开发者可以创建自定义的浏览器扩展、独立应用或其他需要图形用户界面的项目。XUL的核心元素包括窗口、覆盖层、...
XUL的核心概念在于利用XML语法来定义用户界面元素,如按钮、文本框、菜单等,并结合CSS进行样式设计,以及JavaScript进行交互逻辑处理。它允许开发者构建灵活且可扩展的应用程序,尤其适用于开发浏览器扩展和桌面...
它结合了HTML、CSS和JavaScript的优点,允许开发者使用XML来描述用户界面的结构,并使用CSS和JavaScript来控制样式和行为。XUL使得创建复杂的用户界面变得更加简单和统一。 5. **Java与XPCOM的整合**:论文中详细...
Mozilla扩展的开发涉及多种技术,包括CSS(级联样式表)用于美化界面,DOM(文档对象模型)用于实时更改XUL或编辑已加载的HTML,JavaScript作为Mozilla浏览器的主要编程语言,XPCOM(跨平台组件对象模型)用于组件间...
- 尽管有人声称“只因为不得不才使用它”,但JavaScript作为最成功的脚本环境之一,几乎在所有浏览器、操作系统中都能找到它的身影,包括Windows、苹果的Dashboard、Mozilla的XUL、Adobe Flash的ActionScript以及...
XBL允许开发者通过XML来定义元素的外观和行为,结合了XHTML、CSS和JavaScript的功能,使得UI设计更加灵活且模块化。本示例将详细介绍如何使用XBL的基本用法。 首先,我们来看看`.xul`文件。XUL(XML User Interface...
JavaScript在XUL中扮演着重要角色,它是实现XUL界面动态性和功能的核心。你可以用JavaScript来响应用户的点击事件,或者更改界面状态。比如,你可以编写代码来控制按钮的可见性,或者在用户输入时验证表单数据。 ...
开发这样一个Java简易浏览器,需要对Java编程、Swing组件、XUL语法、网络编程以及可能的JavaScript和CSS有一定了解。通过不断调试和优化,可以逐步完善这个小型浏览器的性能和功能。这个项目对于学习和理解浏览器的...
3. **JavaScript集成**:XUL与JavaScript紧密集成,用于实现用户交互逻辑和动态行为。在例子中,你会看到如何在XUL文档中嵌入JavaScript代码,以及如何使用DOM API操作界面元素。 4. **本地文件系统访问**:...