一、盒模型css屬性

box架構class為ub…所控制屬性

box子元素分配比例	ub-f…	子元素的box-flex
元素垂直方向位置排列	ub-ac，ub-ae	box-align
元素水平方向位置排列	ub-pc,ub-pe,ub-pj	box-pack
元素垂直排列	ub-ver	box-orient
元素反向排列	ub-rev	box-direction
橫向滑動效果	ub-fh…	width:100%
縱向滑動效果	ub-fv…	height:100%
背景圖片類別	ub-img	background(css3)的屬性

二、基礎框架Base的css屬性

元素class所控制屬性

圓角類別	uc-……	border-radius，background-clip
外陰影類別	us	box-shadow
內陰影類別	us-i	box-shadow
文字陰影	uts	text-shadow
字體大小類別	ulev	font-size
邊框類別	ub	border
外邊框類別	umar-	margin
內邊框類別	uinn	padding
文字對齊方向	tx-	text-align

以上css3的新屬性在此不描述。

示例代碼，效果圖如下：

<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a" id="btn"> 按鈕1 </div> <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba" id="btn"> 按鈕2 </div> <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev1" id="btn"> 按鈕3 </div> <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev-4" id="btn"> 按鈕4 </div> <div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a uba ulev-4 uts" id="btn"> 按鈕5 </div>

三、UI框架的js控件

插入內置的元素模板后，每個元素都有對應的js控制代碼一并插入，下面是控制函數的介紹。

1.Button 按鈕

appcan.button(selector, //按鈕的選擇器,可同時處理多個按鈕 css, //按鈕點擊后的效果CSS類名稱。預置 ani-act和 btn-act callback //按鈕點擊后的回調函數，回調函數中this代表點擊的按鈕 ) //示例 appcan.button(".btn", "ani-act", function() {})

2.圖片滑塊

appcan.slider({selector:'', //選擇器hasIndicator:'', //true or false,是否有位置提示條hasLable:'', //true or false,是否有標簽文字欄aspectRatio:'', //0 or !=0,是否控制縱橫比，0為使用控件高度，>0使用縱橫比index:'' //0 or >0, })

3.列表

appcan.listview({selector:'', //選擇器type:'', //thinLine or thickLine,窄行和寬行設定hasIcon:'', //true or false，是否有圖片hasAngle:'', //true or false,是否有右側箭頭hasSubTitle:'',//true or false,是否有子標題 hasTouchEffect:'', // true or false,是否有點擊效果 hasCheckbox:'', //true or false,是否有復選按鈕hasRadiobox:'', //true or false,是否有單選按鈕 align:'', //“left” or “right”,checkbox和radiobox居左還是居右 multiline:'', //1 2 or 3,主標題文字占用最大行數。到達行數顯示不全使用…替換 touchClass:'', // ‘sc-bg-active’ or 用戶自定義,列表條目點擊效果CSS類 hasControl:'', //true or false,列表條目中是否包含switch組件 hasGroup:'' //true or false,列表條目是否以分組的形式展示 })

4.下拉框控件

HTML代碼

<div class="select uba bc-border bc-text"><div class="text">請選擇</div><div class="icon"></div><select selectedindex="0"><option value=0>選項一</option><option value=1>選項二</option><option value=2>選項三</option><option value=3>選項四</option></select> </div>

JS控制部分

appcan.select(selector, //select的選擇器，例如 .select、div或#id。可同時處理多個下拉按鈕 callback //Select點擊后的回調函數，告知select標簽對應dom對象和選中的狀態和選中的option的value )

5.Input/Textarea文本輸入控件

登陸表單HTML代碼：

<form method="get" action=""><div class="umar-a uba bc-border"><div class="ub ub-ac ubb umh5 bc-border "><div class=" uinput ub ub-f1"><div class="uinn fa fa-user sc-text"></div><input placeholder="請輸入登錄賬號" type="text" class="ub-f1"></div></div> ……..</div><div class="uinn"><div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="submit"><div class="uinn3 fa fa-shield umh1 umw1"></div>登錄</div></div><button type="submit"class="uinvisible"></button> </form>

JS代碼：

$("form").on('submit', function() {appcan.request.postForm($("form"), function() {appcan.window.alert({title : "提醒",content : "您已經成功提交了表單:)",buttons : '確定',callback : function(err, data, dataType, optId) {}});},function(err){});return false; });

6.開關按鈕

HTML 代碼：

<div class="switch uba bc-border switch-mini" data-checked="false">

JS代碼

appcan.switch(selector, //按鈕的選擇器，例如 .btn、div或#id。可同時處理多個按鈕 css, //開啟后的背景CSS類名稱。預置 bc-head。可選參數 callback //狀態變更后的回調函數 ) //例子 appcan.switch(".switch", function(obj, value) { })

7.單選框

HTML代碼

<div class="radiobox umar-r" name=""><input type="radio" class="uabs ub-con" name="lv_radio"> </div>

js代碼

$('.radiobox').find('input').on('change',function(evt){/*添加Radio變更處理代碼*/ });

8.復選框

HTML代碼

<div class="checkbox umar-r"><input type="checkbox" class="uabs ub-con" > </div>

js代碼

$('.checkbox').find('input').on('change',function(evt){/*添加Checkbox變更處理代碼*/ });

9.導航

HTML代碼

<div id="header" class="uh bc-text-head ub bc-head"><div class="nav-btn" id="nav-left"><div class="fa fa-angle-left fa-2x"></div></div><h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">標題</h1><div class="nav-btn" id="nav-right"></div> </div>

js代碼

appcan.button(".nav-btn", "btn-act", function() {appcan.window.close(-1); })

10.tab選項卡組件

js代碼

appcan.tab({ selector: '', //選擇器 hasIcon : '', //true or false，是否有圖標 hasAnim : '', //true or false，切換時是否有動畫hasLabel : '', //true or false，是否有文字 hasBadge : '', //false or false，是否有badge data :[{ /*選項卡數據*/ label : "全部", /*顯示文字*/ icon: "fa-home" /*顯示Font Awesome 圖標*/ }, { label : "待辦", icon: "icon-edit ub-img",/*顯示圖片圖標*/ }, { label : "已辦", icon: "fa-home", badge: 1 /*顯示badge數字*/ }] })

11.折疊列表

js代碼

appcan.treeview({selector: '', //選擇器type:'', //thinLine or thickLine,窄行和寬行設定*/, hasIcon:'', //true or false,是否有圖片 hasAngle:'', //true or false,是否有右側箭頭 hasTouchEffect:'', //true or false,是否有點擊效果 touchClass:'' , // ‘sc-bg-active’ or 用戶自定義,列表條目點擊效果CSS類 defaultOpen:'', //1 2 or 3,默認打開第幾項，必須包含數據 isCloseOther: '' //true or false,是否關閉其他組 })

總結

以上是生活随笔為你收集整理的AppCan学习笔记（2）-UI控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。