sencha-touch入门一环境配置

首先要配置开发环境。

这个很简单,只要到官方网站下载sencha-touch压缩包即可 http://www.sencha.com/products/touch/

开发工具随便一个编辑器,记事本也可以的。

 

本人用的是myEclipse+tomcat,sencha-touch用的是1.01版本

(使用myEclipse+tomcat我为了以后例子可以跟后台交互)

其实可以直接浏览本地静态html文件的。

 

 

1,编写messageBox.html文件:

 

<!doctype html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <title>messageBox.html</title>
	<link rel="stylesheet" href="../../ext/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="../../ext/sencha-touch.js"></script>
    <script type="text/javascript" src="messageBox.js"></script>
  </head>
  
  <body>
    
  </body>
</html>

 
 如果你以前用过Extjs,那么这段代码你很容易明白。

1,引入sencha-touch.css样式文件。

2,引入sencha-touch.js核心库文件。

3,messageBox.js是例子用的文件。

 

2,编写messageBox.js文件:

 

Ext.setup({
    icon: '../icon.png',
    tabletStartupScreen: '../tablet_startup.png',
    phoneStartupScreen: '../phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
    	Ext.Msg.alert('提示', '第一个SenchaTouch程序!');
    }
});

 

现在我们只关心onReady函数里面的代码,其他可以copy。

如果你以前做过Extjs那么看API难不到你。你可以在onReady中使用其他组件进行测试的。

 

3,运行效果:

本人使用的是Opera的手机模拟器(支持HTML5),google浏览器也可以的。

在浏览器输入http://localhost:8080/SenchaTouchTest/myExample/messageBox/messageBox.html

当然你可以直接打开html进行浏览而不必要部署到服务器(我为了以后例子可以跟后台交互)

 

  • 大小: 31.3 KB
  • 大小: 29.5 KB

EXT学习资料

之前用过YUI 但是害怕CSS 知道EXT不需要写太多的CSS,哈哈就打算学习下EXT,后来由于忙也忘了学习。

可能以后会很少使用EXT了。所以把之前的学习资料发出来分享下,方便以后学习的人使用。其实最好的学习方式是去官方网站看列子,英文不好的可以看下我这个学习的word,也是别人发给我的。永远记得一句话 分享快乐。

Windchill9客制用户界面

在WC9中,对于用户界面中文字、表格等表现形式的控制是由CSS来定义的。

1、在wt.properties中定义CSS。

solutions.images.directory=com/ptc/core/ui/images
solutions.stylesheet=netmarkets/css/nmstyles.css,com/ptc/core/ui/solutions.css,WTDefault.css

2、在<Windchill_Home>\codebase\netmarkets\util\begin.jspf中定义。

<%@ include file="/netmarkets/jsp/util/begin_custom.jspf"%>

在begin_custom.jspf中定义css及logo

<LINK REL=stylesheet HREF="netmarkets/jsp/ProcessSteps/myCSS.css" TYPE="text/css">
<p align="right"><blink><font size="+1" color=red>Welcome to PDMLink....</font></blin></p>

  • 描述: 定制过CSS后的系统界面
  • 大小: 136.4 KB

CSS简单笔记

一、加入样式表到HTML文档
1、内联样式
<p style=”color: #F00″>
2、内嵌样式
<style type=”text/css”>p {color: #F00;}</style>
3、外部样式
<link rel=”stylesheet”type=”text/ css” href=”external.css”/>
4、样式表适用的环境
所有流行的浏览器都支持最普通的media属性。该属性可以应用到<link>元素中来确定样式表适用的环境。比如:
<link rel=”stylesheet” media=”handheld” type=”text/ css” href=”external.css”/>
说明样式表适用于手持设备。media支持的属性值有screen,print,all等

二、样式表的语法
CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selector {property: value} ,多个属性/值对必须由分号隔开。

选择符可以是多种形式:
1、要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
body {color: black}
2、类选择符,以点号开头,比如
.right {text-align: right}
应用类选择符到标记
在标记的class属性中填入类的名称,注意不要点号。如:
<div class=”dreamdu1″>连接div标签与dreamdu1样式<div>
<div class=”dreamdu12px dreamdublack dreamdubold”>使用空格分开多个样式连接div标签<div>

3、ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式,样式只应用于ID参数指定的元素。例如:
<p id=”intro”>
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。下面这个例子,ID属性将匹配所有id=”intro”的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

将ID和选择器结合
h2#title{

}
标识应用于ID属性为title的h2标记

4、选择符组

你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green }

5、包含选择符

可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,
table a
{
font-size: 12px
}

三、样式表层叠
样式表层叠指可以将多个样式表应用到同一个页面元素,该元素展现所有应用的样式,对于多个样式表中重复定义的部分,高层样式将覆盖低层样式。最高层的样式是内联样式,其次是内嵌式样式,最后是外部样式。可以使用内联或内嵌式样式表覆盖外部定义的样式表。
对于外部定义的样式表,按照加入的顺序层次逐渐变高,最有加入的外部样式表在外部样式中具有最高的层次。
比如,依次加入如下样式表:
<link rel=”stylesheet”type=”text/ css” href=”first.css”/>
<link rel=”stylesheet”type=”text/ css” href=”second.css”/>
<link rel=”stylesheet”type=”text/ css” href=”third.css”/>
最后一个链接样式表(third.css)层次最高,优先执行它所包含的所有规则。任何在third.css中没有定义的规则则按照第二个样式表(second.css)执行,以此类推。third.css中定义的样式将覆盖在first.css或second.css中定义的同名样式。

四、样式表继承
在Html元素中,子元素将继承赋予父元素的特定CSS值。

五、样式表的组织
大型工程中可能会存在多个样式表,如何组织这些样式表呢?
1、文件夹方式
css
–default
—-default.css
–user
—-register.css
—-login.css
–news
—-news.css
将样式表按照对应的网站模块分门别类的存放。

2、应用import属性
@import url(“default.css”);
@import url(“news.css”);
 

好东西

www.adobecs4.com.cn        AdobeCS4系列软件

www.52css.com              学习CSS的好地方

http://www.kongser.com/    这个论坛很不错

http://www.nipic.com/      昵图网(卡片网)

http://www.fscyt.com/      名片模板网

http://jquery.com/         Jquery网

http://www.360buy.com/     京东商城

http://www.mingpian.org/article/    名片网

http://www.batchcard.com/index.html 贝卡网

http://im.qq.com/  模拟制作其效果

http://im.qq.com/doctor/index.shtml    模拟制作其效果

使用wget下载整个网页

wget -r -p -k -np -t 5 http://hao.360.cn

 

 

虽然很好用,但是还是有不少局限性.

 

1. 不能解析CSS文件中 包含的图片信息 例如使用 @import 或者url等等导入的东西

 

2. 不能解析JS中动态写入的资源文件,对于Ajax载入的根本就无从弹起,可能模仿的不是http请求有关

 

3. 她是从取出来的数据流中去解析文件内引用的资源信息,而非使用Dom解析的方式来获取信息

 

4. 中文资源太少

 

优势:

 

1. 开源,免费 [切记: 开源 != 免费]

 

2. 实用,功能强劲 大多数系统平台上都有实现.

 

3. 可以与其他的工具无缝集成.通过PHP可以实现很多东西.我一般都是使用PHP来取代原始的shell脚本.

 

4. 单文件,很小. 可以作为自己的工具箱中的一员 

 

 

注意:

 

1. Wget1.5的windows版本不支持-p选项,我提供的这个版本是1.11.4,提供-p选项

 

简单日历,支持最大、最小值。

<style type="text/css">

.calender_tb{
	border-collapse:collapse;
	background-color:lightblue;
	font-family:'宋体';
	font-size:90%;
	width:160px;
	height:160px;
}
.calender_tb tr td{
	padding:2px;
	cursor:pointer;
	border:1px solid black;
	text-align:center;
	white-space: nowrap;
}
.calender_tb caption{
	background-color:#CCCC99;
	border-top:1px solid black; 
	border-left:1px solid black; 
	border-right:1px solid black; 
	font-size:120%;
}
.calender_tb tr.calender_nav{
	border:1px solid black; 
	white-space: nowrap;
}
.calender_tb tr.calender_nav td{
	border:none;
}
.calender_tb th{
	background-color:lightgreen;
	border-top:1px solid black; 
	border-left:1px solid black; 
	border-right:1px solid black; 
}

.calender_tb .disabled_td{
	background-color:#999;
}
.calender_tb .invalid_td{
	background-color:#666;
}
.today{
	background-color:blue;
	color:#fff;
}
.calender_tb tbody tr td.td_mouse_over{
	color:blue;
	background-color:yellow;
}
</style>

var shawn = {};
/**
 * @param cfg 配置项
 * @author shawn
 * @version 1.0
 * */
shawn.Calendar = function(cfg){
    this.renderTo = null;
    this.now  = new Date();
    this.id = this.genId++;
    this.multi = false;
    this.lang = 'zh';
    
    if(Object.prototype.toString.call(cfg) == '[object Date]'){
        this.dt = cfg;
    }else if(Object.prototype.toString.call(cfg) == '[object Object]'){
        this.dt = cfg.dt || new Date();
        this.multi = cfg.multi || false;
        this.lang = cfg.lang || 'zh';
        this.minValue = cfg.minValue || null;
        this.maxValue = cfg.maxValue || null;
        this.id = cfg.id || this.id;
        this.renderTo = typeof cfg.renderTo == 'string'  document.getElementById(cfg.renderTo):cfg.renderTo ;
        this.callbackFn = cfg.callbackFn;
    }
    this.init();    
}
shawn.Calendar.prototype = {
    genId: 0, 
    defaultCss:'',
    language:{
        zh:{
            ths:['日','一','二','三','四','五','六'],
            year:'年',
            month:'月',
            now:'今天'},
        en:{            
            ths:['Sun','Mon','Tue','Wen','Ths','Fri','Sat'],
            year:'/',
            month:'/',
            now:'Today'}
    },
    baseJudge:function(){  
       if(navigator.appName.indexOf('Microsoft')>-1){
            this.isIE = true;
       }else{
            this.isIE = false;
       }
       
    },
    init: function(){
        this.baseJudge();
        
        this.createTable();
    },
    createCaption:function(){
        var str = '<caption>'
                 + this.fullYear + this.language[this.lang].year
                 + this.month + this.language[this.lang].month
                 + '</caption>'
                
        return str;
    },
    createThs:function(){
        var ths = "<tr>";
        var ths_zh = this.language[this.lang].ths;
        for(var i=0;i<7;i++){
            ths+="<th>" + ths_zh[i] + "</th>";
        }
        ths += "</tr>";
        return ths;
    },
    createTbody:function(){
        var maxDay = this.getMaxDay(this.fullYear,this.month);
        var startDay = new Date(this.fullYear,this.month-1,1).getDay();
        var min = new Date(1970,0,1);
        var max = new Date(2999,11,31);
        var tmp = null;
        if(this.minValue){
            tmp = this.minValue.split('-');
            min = new Date(tmp[0],tmp[1]-1,tmp[2]);
            if(Object.prototype.valueOf.call(min) == 'Invalid Date' 
                || Object.prototype.valueOf.call(min) == 'NaN' ){
                min = new Date(1970,0,1);    
            }
        }
        if(this.maxValue){
            tmp = this.maxValue.split('-');
            max = new Date(tmp[0],tmp[1]-1,tmp[2]);
            if(Object.prototype.valueOf.call(max) == 'Invalid Date' 
                || Object.prototype.valueOf.call(max) == 'NaN' ){
                max = new Date(2999,11,31);
            }
        }
        var tds = "",trs="";
        if(this.multi){
            var preMaxDay = this.getMaxDay(this.fullYear,this.month-1);
            for(var j=0;j<startDay;j++){
                tds = tds + '<td class="disabled_td">'
                    +(preMaxDay-startDay+j+1) + '</td>';
            }
            
        }else{
            for(var j=0;j<startDay;j++){
                tds += '<td class="disabled_td">&nbsp;</td>';
            }
        }
        var j=1;
        for(var i=1 ;(i + startDay)<= 42; i++){
            if((i+startDay-1)%7 == 0){
                trs = trs + '<tr>' + tds + '</tr>';
                tds = "";
            }
            if(i == this.date){
                tmp = new Date(this.dt.getFullYear(),this.dt.getMonth(),i);
                if(tmp < min || tmp > max){
                    tds = tds + '<td class="today invalid_td">'+ i + '</td>';
                }else{
                    tds = tds + '<td class="today">'+ i + '</td>';
                }
            }else if(i<=maxDay){
                tmp = new Date(this.dt.getFullYear(),this.dt.getMonth(),i);
                if(tmp < min || tmp > max){
                    tds = tds + '<td class="invalid_td">'+ i + '</td>';
                }else{
                    tds = tds + '<td>'+ i + '</td>';
                }
            }else{
                if(this.multi){
                    tds = tds + '<td class="disabled_td">' +(j++) +'</td>';
                }else{
                    tds = tds + '<td class="disabled_td">&nbsp;</td>';
                }
            }
            
        }
        trs = trs + "<tr>" + tds + "</tr>";   
        return trs;
    },
    getMaxDay:function(year,month){
        var maxDay = 0;
        var leap = (year%400 == 0 || (year%4 == 0 && year%100 !=0));
        if(leap && month == 2){
            maxDay = 29;
        }else if(month == 2){
            maxDay = 28;
        }else if("1,3,5,7,8,10,12,".indexOf(month + ",") == -1){
            maxDay = 30;
        }else{
            maxDay = 31;
        }
        return maxDay;
    },
    createNav:function(){
        return '<tr class="calender_nav">'
               + '<td>&lt;&lt;</td>' 
               + '<td>&lt;</td>'
               + '<td colspan="3">'+this.language[this.lang].now+'</td>'
               + '<td>&gt;</td>' 
               + '<td>&gt;&gt;</td></tr>' 
    },
    createTable:function(){
        this.day = this.dt.getDay();
        this.fullYear = this.dt.getFullYear();
        this.month = this.dt.getMonth() + 1;
        this.date = this.dt.getDate();
        
        var table = ['<table id="table_'+ this.genId + '" class="calender_tb">',"</table>"];
        var thead = ["<thead>","</thead>"];
        var tbody = ['<tbody>',"</tbody>"];
        
        this.output =  table[0] 
                + this.createCaption()
                + thead[0]
                + this.createThs()
                + tbody[0]
                + this.createTbody() 
                + this.createNav() 
                + tbody[1] + table[1];    
    },
    show: function(){
        if(this.renderTo == null){
            this.renderTo = document.createElement("DIV");
            this.renderTo.id = "calendar" + this.id;
            document.body.appendChild(this.renderTo);
            document.getElementById(this.renderTo.id).innerHTML = this.output;
        }
        else{
            document.getElementById(this.renderTo.id).innerHTML = this.output;
        }
        this.output = ''
        this.addListeners();
    },
    render: function(target){
        
        this.renderTo = target;  
    },
    nextMonth: function(){
        this.dt = new Date(this.fullYear,this.month,this.date);
        this._update();
    },
    previousMonth: function(){
        this.dt = new Date(this.fullYear,this.month-2,this.date);
        this._update();
    },
    _update:function(){
        this.removeListeners();
        document.getElementById(this.renderTo.id).innerHTML = '';
        this.createTable();
        this.show();
    },
    nextYear: function(){
        this.dt = new Date(this.fullYear+1,this.month-1,this.date);
        this._update();
    },
    previousYear: function(){
        this.dt = new Date(this.fullYear-1,this.month-1,this.date);
        this._update();
    },
    restore:function(){
        this.dt = new Date();
        this._update();
    },
    loadCss:function(css){
        if(css){
        }else{
            
        }
        
    },
    addListeners:function(){
        var that = this;
        if(!this.eventObj){
            this.eventObj = {};
        }
        function clickFn(e){
            e = e || window.event;
            var target = e.srcElement || e.target;
            if(target.tagName && target.tagName.toLowerCase() == 'td'){
               if(target.className.indexOf("disabled_td") == -1 
                    && target.className.indexOf("invalid_td") == -1 ){
                    switch(target.innerHTML){
                        case "&lt;":that.previousMonth();break;
                        case "&lt;&lt;" :that.previousYear();break;
                        case "&gt;":that.nextMonth();break;
                        case "&gt;&gt;":that.nextYear();break;
                        case that.language[that.lang].now:that.restore();break;
                        default:{
                            that.selectedDay = parseInt(target.innerHTML);
		                    if(!isNaN(that.selectedDay)){
                                var rs = new Date();
	                            rs.setFullYear(that.fullYear);
	                            rs.setMonth(that.month-1);
	                            rs.setDate(that.selectedDay);
                                that.callbackFn.call(window,rs)
                            }
                        }
                    }
               }
            }
        }
        function mouseoverFn(e){
            e = e || window.event;
            var target = e.srcElement || e.target;
            if(target.tagName.toLowerCase() == 'td'){
                 if(target.className.indexOf("disabled_td") == -1 
                    && target.className.indexOf("invalid_td") == -1 ){
                    target.className = target.className + ' td_mouse_over ';
                 }
            }   
        }
        function mouseoutFn(e){
            e = e || window.event;
            var target = e.srcElement || e.target;
            if(target.tagName.toLowerCase() == 'td'){
                 if(target.className.indexOf("disabled_td") == -1 
                    && target.className.indexOf("invalid_td") == -1 ){
                    target.className = target.className.replace(/\s*td_mouse_over\s*/,'');
                 }
            } 
        }
        this.eventObj.click = clickFn;   
        this.eventObj.mouseover = mouseoverFn;
        this.eventObj.mouseout = mouseoutFn;
        
        if(this.isIE){
             this.renderTo.attachEvent('onclick',clickFn);
             this.renderTo.attachEvent('onmouseover',mouseoverFn);
             this.renderTo.attachEvent('onmouseout',mouseoutFn);
        }else{
            this.renderTo.addEventListener('click',clickFn,false);
            this.renderTo.addEventListener('mouseover',mouseoverFn,false);
            this.renderTo.addEventListener('mouseout',mouseoutFn,false);
        }
    },
    removeListeners:function(){
        if(this.eventObj){
            for(name in this.eventObj){
                if(this.isIE){
                    this.renderTo.detachEvent('on' + name,this.eventObj[name]);
                }else {
                    this.renderTo.removeEventListener(name,this.eventObj[name],false);
                }
            }
        }

    }
}

//例子
function  go(){
      var   cal = new shawn.Calendar({
            renderTo:'str2',
            dt:new Date(),
            minValue:'2010-12-15',
            maxValue: '2011-2-1',
            multi:true,
            callbackFn:function(val){
                alert('Value is ' + val.toLocaleString());
            }
         }).show();
}


  • 大小: 3.1 KB

addasignuplinktoourhomepage

continue with the prior article, I’ll try to add a sign up link to our home page.

 

 

<%= link_to "Sign up now!", '#', :class => "signup_button round" %>

Remember, # means a blank link, a link to itself.

 

 the generated html will be:

 

<a href="#" class="signup_button round">Sign up now!</a>

 

note:

 

right now, the <a> tag has two classed, seperated by a space.

 

<a href="#" class="signup_button round">

 this is convenient for the common case of an element with two kinds of styles.

 

 

Ok, we are done with adding a sign up button.