EasyUi

来源：互联网发布：apt get install java 编辑：程序博客网时间：2024/06/06 12:35

一、说明

网页统一引入

二、消息提示信息

$.messager.prompt("aa1","bb1",function(s){

console.log(s);

});

$.messager.confirm("标题","你好",function(r){//confirm操作框

if(r){

$.messager.alert("标题","您点击了确认按钮");

}else{

$.messager.alert("标题","您点击了取消按钮");

}

});

三、折叠accordion

内容

</div>

四、日历calendar

五、联合体combo

$(function(){

$("#cc").combo({

required:true,//必填项,如果把鼠标浮动到输入框cc上面，而且cc没有值，就会提示"this fieldis required"

editable:false,//不可编辑

label:'Language:',//输入框的名称

labelPosition:'top' //输入框的名称的位置

});

//打开的动画效果

$("#cc").combo("panel").panel({

openAnimation:"slide",//动画效果。slide:滑动;fade:;show:

closeAnimation:"close"

}

);

$("#sp").appendTo($("#cc").combo("panel"));

$("#spinput").click(function(){

var value=$(this).val();

var text=$(this).next("span").text();

$("#cc").combo("setValue",value);

$("#cc").combo("setText",text);

$("#cc").combo("hidePanel");

});

</script>

</head>

<body>

</div>

<div>select a language</div>

<div>

</div>

</body>

</html>

六、 Combobox:联合下拉列表框

1,data

[{

"id":1,

"text":"Java",

"desc":"Writeonce, run anywhere"

},{

"id":2,

"text":"C#",

"desc":"Oneof the programming languages designed for the Common LanguageInfrastructure"

},{

"id":3,

"text":"Ruby",

"selected":true,

"desc":"Adynamic, reflective, general-purpose object-oriented programming language"

}]

页面代码

//combobox的各种事件

function clickone(){

$("#ac").combobox("setValue","ee");//赋值

var v=$("#ac").combobox("getValue");//得到值

console.log(v);

$("#ac").combobox("disable");//不可点击

$("#ac").combobox("enable");//可以点击

}

//编辑option里面的格式内容

function formatItem(row){

var s = '<spanstyle="font-weight:bold">' + row.text + '</span><br/>' +

'<spanstyle="color:#888">' + row.desc + '</span>';

return s;

}

//点击加载数据

function loadData(){

$("#ld").combobox("reload","./combobox.json");

}

</script>

</head>

<body>

<a href="javascript:void(0)"class="easyui-linkbutton" onclick="clickone()">clickone</a>

<a href="javascript:void(0)"class="easyui-linkbutton" onclick="loadData()">LoadData</a>

<a href="javascript:void(0)"class="easyui-linkbutton" onclick="clickone3()">clickone3</a>

<br/>

</select><br/>

<input class="easyui-combobox"name="language" data-options="

url:'./combobox.json',

method:'get',

valueField:'id',

textField:'text',

panelWidth:350,

panelHeight:'auto',

formatter:formatItem,

label:'Language',

labelPosition:'top',

icons:[{iconCls:'icon-add'},{iconCls:'icon-cut'}],

multiple:'true',

multiline:'true'

"/><br/>

<input class="easyui-combobox"data-options="showItemIcon:true, data:[{value:'add',text:'新增',iconCls:'icon-add'},{value:'del',text:'删除',iconCls:'icon-remove'},{value:'save',text:'保存',iconCls:'icon-save'}],label:'group icon',labelPosition:'top'"

</body>

</html>

七、 Combogrid下拉框

[{

"id":1,

"text":"Java",

"desc":"Write once, run anywhere"

},{

"id":2,

"text":"C#",

"desc":"One of the programminglanguages designed for the Common Language Infrastructure"

},{

"id":3,

"text":"Ruby",

"selected":true,

"desc":"A dynamic, reflective,general-purpose object-oriented programming language"

}]

</select>

阅读全文

0 0

EasyUi

一、 说明

二、 消息提示信息

三、 折叠accordion

四、 日历calendar

五、 联合体combo

六、 Combobox:联合下拉列表框

七、 Combogrid下拉框

一、说明

二、消息提示信息

三、折叠accordion

四、日历calendar

五、联合体combo