建議，在當(dāng)前輪播圖的div添加類active，設(shè)置.active {display：block；}，.ban{display:none;};這樣可以通過添加或移除active就可以了；這樣以下就比較方便很多，要不然又要做循環(huán)，麻煩（swiper插件做輪播效果不錯(cuò)）
創(chuàng)新互聯(lián)公司主營(yíng)閩侯網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開發(fā),閩侯h5重慶小程序開發(fā)公司搭建,閩侯網(wǎng)站營(yíng)銷推廣歡迎閩侯等地區(qū)企業(yè)咨詢
$(".left").click(function(){
var $index = $(".ban").hasClass("active").index();//獲取當(dāng)前輪播圖的下標(biāo)
if($index === 0 ) {//當(dāng)前為第一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動(dòng)切換的代碼，我這里只是一個(gè)無動(dòng)態(tài)切換效果的方法
}else {
$(".ban").eq($index-1).addClass("active)
.siblings(".ban").removeClass("active");
})
$(".right").click(function(){
var $index = $(".ban").hasClass("active").index();//獲取當(dāng)前輪播圖的下標(biāo)
if($index === ($(".ban").length-1) ) {//當(dāng)前為最后一張輪播圖
$(".ban").eq($(".ban").length-1).addClass("active)
.siblings(".ban").removeClass("active");
//這里寫成你自動(dòng)切換的代碼，我這里只是一個(gè)無動(dòng)態(tài)切換效果的方法
}else {
$(".ban").eq($index+1).addClass("active)
.siblings(".ban").removeClass("active");
})
//大體思路是這樣了，代碼可能有個(gè)別字母寫得不對(duì)，畢竟是手敲的，但是大概思路是這樣了
用jquery使一個(gè)按鈕讓div左右移動(dòng)方法如下：
就是點(diǎn)擊“#anniu”，然后"#caozuo"div左右移動(dòng)，我的代碼左移了就不能移動(dòng)回來了 ?div class="bottom textstyle" id="caozuo" a href="#" id="anniu"img src="jiantou2.png" width="20" id="tanchu" //a /div ?$(document).ready(function()... 就是點(diǎn)擊“#anniu”，然后"#caozuo"div左右移動(dòng)，我的代碼左移了就不能移動(dòng)回來了。
div class="bottom textstyle" id="caozuo"
a href="#" id="anniu"img src="jiantou2.png" width="20" id="tanchu" //a
/div
$(document).ready(function() {
$("#anniu").click(function(event){
event.preventDefault();
if($('#caozuo').is({right:'0em'})){
$('#caozuo').animate({right:'-8.5em'},"fast");}
else{
$('#caozuo').animate({right:'0em'},"fast");
}
});
});
jQuery是一套跨瀏覽器的JavaScript庫，簡(jiǎn)化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上發(fā)布第一個(gè)版本。目前是由 Dave Methvin 領(lǐng)導(dǎo)的開發(fā)團(tuán)隊(duì)進(jìn)行開發(fā)。全球前10000個(gè)訪問最高的網(wǎng)站中，有59%使用了jQuery，是目前最受歡迎的JavaScript庫。
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleJQ獲得鼠標(biāo)位置-柯樂義/title
script type="text/javascript" src="jq/js/jquery.js"/script
/head
body
a href="" target="_blank"原文/a
div id="mousePosition_keleyi_com" style="border:1px solid silver;width:219px;height:23px"/div
script type="text/javascript"
$(document).mousemove(function (e) {
var xy_keleyi_com="x坐標(biāo):"+ e.pageX+",y坐標(biāo)："+ e.pageY;
$("#mousePosition_keleyi_com").text(xy_keleyi_com);
})
/script
/body
/html
jquery的遍歷方法可以獲取復(fù)選框所欲的選中值
$("input:checkbox:checked").each(function(index,element)); // 為所有選中的復(fù)選框執(zhí)行函數(shù)，函數(shù)體中可以取出每個(gè)復(fù)選框的值
$("input:checkbox:checked").map(function(index,domElement)); // 將所有選中的復(fù)選框通過函數(shù)返回值生成新的jQuery 對(duì)象
實(shí)例演示：點(diǎn)擊按鈕獲取checkbox的選中值
創(chuàng)建Html元素
div class="box"
span點(diǎn)擊按鈕獲取checkbox的選中值：/spanbr
div class="content"
input type='checkbox' name='message' value='1'/發(fā)送短信
input type='checkbox' name='message' value='2'/發(fā)送郵件
/div
input type="button" value="提交"
/div
設(shè)置css樣式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
編寫jquery代碼
$(function(){
$("input:button").click(function() {
text = $("input:checkbox[name='message']:checked").map(function(index,elem) {
return $(elem).val();
}).get().join(',');
alert("選中的checkbox的值為："+text);
});
});
EasyUI
簡(jiǎn)介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶界面。
easyui是個(gè)完美支持HTML5網(wǎng)頁的完整框架。
easyui節(jié)省您網(wǎng)頁開發(fā)的時(shí)間和規(guī)模。
easyui很簡(jiǎn)單但功能強(qiáng)大的。
在后臺(tái)管理系統(tǒng)開發(fā)的過程中，上左右的布局是最常見的頁面布局方式，現(xiàn)在我們來看看使用easyui這個(gè)jquery前端框架如何快速搭建一個(gè)可用的頁面框架。
1.在頁面中引入easyui所需的文件
%--
加載easyui的樣式文件，bootstrap風(fēng)格
--%
link
href="${ctx
}/css/themes/bootstrap/easyui.css"
rel="stylesheet"
link
href="${ctx
}/css/themes/icon.css"
rel="stylesheet"
%--
加載jquery和easyui的腳本文件
--%
script
src="${ctx
}/js/jquery-easyui-../jquery.min.js"/script
script
src="${ctx
}/js/jquery-easyui-../jquery.easyui.min.js"/script
script
src="${ctx
}/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"/script
2.在頁面body部分構(gòu)建必要的html結(jié)構(gòu)
body
div
id="home-layout"
!--
頁面北部，頁面標(biāo)題
--
div
data-options="region:'north'"
style="height:50px;"
!--
add
your
code
--
/div
!--
頁面西部，菜單
--
div
data-options="region:'west',title:'菜單欄'"
style="width:200px;"
div
class="home-west"
ul
id="home-west-tree"/ul
/div
/div
!--
頁面中部，主要內(nèi)容
--
div
data-options="region:'center'"
div
id="home-tabs"
div
title="首頁"
h2
style="text-align:
center"歡迎登錄/h2
/div
/div
/div
/div
/body
這里需要注意一點(diǎn)：easyui在使用layout布局的時(shí)候，north、south需要指定高度，west、east需要指定寬度，而center會(huì)自動(dòng)適應(yīng)高和寬。
3.使用js初始化easyui組件
我個(gè)人比較推薦使用js代碼去初始化easyui組件，而不使用easyui標(biāo)簽中的data-options屬性去初始化。因?yàn)閷?duì)于后臺(tái)開發(fā)人員來說，寫js代碼可能比寫html標(biāo)簽更加熟悉，而且這樣使得html代碼更加簡(jiǎn)潔。
script
$(function(){
/*
*
初始化layout
*/
$("#home-layout").layout({
//使layout自適應(yīng)容器
fit:
true
});
/*
*
獲取左側(cè)菜單樹，并為其節(jié)點(diǎn)指定單擊事件
*/
$("#home-west-tree").tree({
//加載菜單的數(shù)據(jù)，必需
url:
"${ctx
}/pages/home-west-tree.json",
method:
"get",
//是否有層次線
lines:
true,
//菜單打開與關(guān)閉是否有動(dòng)畫效果
animate:
true,
//菜單點(diǎn)擊事件
onClick:
function(node){
if(node.attributes
node.attributes.url){
//打開內(nèi)容區(qū)的tab，代碼在其后
addTab({
url:
"${ctx
}/"
+
node.attributes.url,
title:
node.text
});
}
}
});
/*
*
初始化內(nèi)容區(qū)的tabs
*/
$("#home-tabs").tabs({
fit
:
true,
//tab頁是否有邊框
border
:
false
});})
/script
script
/*
*
在內(nèi)容區(qū)添加一個(gè)tab
*/
function
addTab(params){
var
t
=
$("#home-tabs");
var
url
=
params.url;
var
opts
=
{
title:
params.title,
closable:
true,
href:
url,
fit:
true,
border:
false
};
//如果被選中的節(jié)點(diǎn)對(duì)應(yīng)的tab已經(jīng)存在，則選中該tab并刷新內(nèi)容
//否則打開一個(gè)新的tab
if(t.tabs("exists",
opts.title)){
var
tab
=
t.tabs("select",
opts.title).tabs("getSelected");
t.tabs("update",
{
tab:
tab,
options:
opts
});
}else{
t.tabs("add",
opts);
}
}
/script
4.easyui-tree組件所需的json格式
easyui使用的傳輸格式為json，它對(duì)json內(nèi)容的格式有比較嚴(yán)格的限制，所以請(qǐng)注意查看api
[{
"text":"區(qū)域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"預(yù)約信息管理",
"children":[{
"text":"商戶預(yù)約信息查詢",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"準(zhǔn)入申請(qǐng)管理",
"children":[{
"text":"商戶準(zhǔn)入申請(qǐng)",
"state":"closed",
"children":[{
"text":"商戶待處理申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_wait"
}
},{
"text":"商戶審批中申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_current"
}
},{
"text":"商戶審批通過申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_pass"
}
},{
"text":"商戶被拒絕申請(qǐng)",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_refuse"
}
}]
}]
},{
"text":"準(zhǔn)入審批管理",
"children":[{
"text":"商戶審批管理",
"state":"closed",
"children":[{
"text":"當(dāng)前任務(wù)",
"children":[{
"text":"商戶當(dāng)前初審任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商戶當(dāng)前復(fù)審任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商戶已完成任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商戶不通過任務(wù)",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]
就這樣，我們使用easyui完成了簡(jiǎn)單的左右布局。
以上所述是小編給大家分享的jQuery
Easyui實(shí)現(xiàn)上左右布局的相關(guān)內(nèi)容，希望對(duì)大家有所幫助。
在點(diǎn)擊按鈕，先遍歷右邊下拉框的數(shù)據(jù)，如果有與左邊下拉框選中的數(shù)據(jù)相同的話，就代表重復(fù)，如果不相同的話就可以添加到右邊的下拉框。
重慶分公司
重慶分公司
