网页统一引入
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/demo/demo.css"/>
<script src="jquery-easyui-1.5/jquery.min.js"></script>
<script src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
$.messager.prompt("aa1","bb1",function(s){
console.log(s);
});
$.messager.confirm("标题","你好",function(r){//confirm操作框
if(r){
$.messager.alert("标题","您点击了确认按钮");
}else{
$.messager.alert("标题","您点击了取消按钮");
}
});
<div id="aa" class="easyui-accordion">
<div title="aa" data-options="iconCls:'icon-help'">
内容
</div>
</div>
<div class="easyui-calendar"/>
<script type="text/javascript">
$(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 class="easyui-panel"style="width:100%;max-width:400px;padding:3px 4px;">
<input id="cc"/>
</div>
<div id="sp"><!-- 下拉选择框里面的具体内容 -->
<div>select a language</div>
<div>
<input type="radio" name="lang" value="name1"/><span>name1</span><br/>
<input type="radio" name="lang" value="name2"/><span>name2</span><br/>
</div>
</div>
</body>
</html>
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"
}]
页面代码
<script type="text/javascript">
//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 id="ac"class="easyui-combobox" style="width:100%" label="省份" labelPosition="top">
<option value="heibei">河北</option>
<option value="heinan">河南</option>
<option value="hubei">湖北</option>
</select><br/>
<!-- 从Json数据中读取数据,valueField:充当value的字段,还有个参数groupField是以什么字段分组,icon是图片 ,multiple:是否多选,multiline:是否多行;value:设值;loader:加载方法-->
<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/>
<!-- 点击按钮LoadData加载数据 -->
<input class="easyui-combobox"id="ld" data-options="valueField:'id',textField:'text',label:'LoadData',labelPosition:'top'"/><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>
[{
"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 class="easyui-combogrid" data-options="url:'./combogrid.json',columns:[[{field:'id',title:'ID'},{field:'name',title:'Name'}]],fitColumns:true,idField:'id',textField:'name'"style="width:10%">
</select>
