专注于
IT技术和业内交流

Cordova+Famous的常用属性(看我看我~)

要使用Famous必须要详细了解它自带的方法是什么意思,使用什么方法会在页面产生什么样的效果,接下来我们就一起去看看吧~

一、setSizeMode(‘relative’,’relative’)

[这个方法是给页面创建一个mode,括号里有X、Y两个值,默认值是relative,当你需要写一个固定尺寸时里面的值应该换为absolute]

二、.setAbsoluteSize(X,Y)

[.setAbsoluteSize(300,200)等同于CSS中width:300px;height:200px]
贴上一个小例子:

address.setSizeMode('relative','absolute')
                .setAbsoluteSize(null,80)

我想让这个address的长度自适应,高为80px,所以我没有指定长度,因此setSizeMode()的X位置对应下来的setAbsoluteSize()就应该为nul,而Y值因为高度为80px是指定高度,所以是absolute。这两个属性是不是都学会了呢O(∩_∩)O

三、setPosition(X,Y)

[这个方法说白了就是绝对定位,等同于CSS中position:absolute]

四、.setAlign(X,Y)

[这个属性常常与.setMountPoint(X,Y)搭配,我们可以把界面看做一个坐标系]
Famous的常用属性
当我们想做居中就用.setAlign(0.5,0.5),让它的X值为一半,Y值也是一半,光用这个属性其实是不行的,我们会发现它其实是在中间位置还往右边偏离了一点点,这个时候我们就还需要加上.setMountPoint(0.5,0.5)来跟他搭配,毕竟好基友才能天长与地久嘛,哈哈(*^__^*),居中就这样简单的完成啦~ X、Y值的值大小不同所对应的位置也会不同,要注意值的大小只能是0-1哦(づ ̄ 3 ̄)づ

五、.setContent()

var basicElement = new DOMElement(rootNode,{
        content:'Goodbye World!'
});

我们不局限于纯文本内容;DOM元素组件还可以接受HTML内容。
basicElement.setContent(‘Here is some formatted text content.’)

六、.setAttributes()

这个方法的意思是以一个属性名称作为第一个参数,第二个参数为属性的值。
任何属性,只要是有效的HTML5属性都可以在DOM元素组件设置。 通过调用添加属性setAttributes()方法在一个DOM元素组件或通过一个选择对象的构造函数

titleElement.setAttribute('lang','ar')//Set language to Arabic
        .setAttribute('dir','rtl')//Set right-to-left text direction
        .setAttibute('contenteditable',true)//Etc.
        .setAttribute('allowfullscreen',true)
        .setContent(zhangjinyi)

当属性传递给构造函数的选择对象,添加一个attributes属性的属性名和值存储在一个对象作为键值对。

var titleElement = new DOMElement(child,{
        attributes:{
            lang:'ar',
            dir:'ltr'
            contenteditable:true,
        }
});

titleElement.setContent('zhangjinyi');

七、.setProperty()

我们写页面不能缺的就是样式,那么Famous里面怎么写样式呢,就用.setProperty()这个方法来写,举个例子

node.el = new DOMElement(node,{
        content:'Click me',
        properties:{
                'background':'navy',
                'color':'white',
                'font-size':'25px'
        }
})

八、点击事件

node.el = new DOMElement(node,{
        content:'点我点我',
        properties:{
                'background':'blue',
                'color:'white',
                'font-size':'25px'

        }
})

node.addUIEvent('click')

这段代码它的效果是这样的
Famous的常用属性
今天的介绍就先到这里啦~(づ ̄ 3 ̄)づ,赶快动动你们的小手试试Famous的这些属性吧,一起做一下这个简单的登录页面吧(*^__^*) 嘻嘻cordova+famous实战篇(2)——登录页面

未经允许,不得转载本站任何文章:代码山 » Cordova+Famous的常用属性(看我看我~)

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们