DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> jQuery之選擇組件的深入解析
jQuery之選擇組件的深入解析
編輯：JavaScript基礎知識     
1：選擇(Selectable)組件可以讓用戶頁面上的一些元素變成可選擇的，用戶可以通過單擊元素或者拖動的方式來選擇它們，也可以
按住Ctrl鍵來選擇不連續的元素
$('.selector').selectable(options);
但是在jQuery UI庫中的主題包中並未提供ui-selecting和ui-selected類的樣式，因此在使用選擇組件時，還需要自己來創建這些樣式
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectable組件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<style type="text/css">
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:0px;
}
#feedback {
 font-size: 1.4em;
}
#selectable .ui-selecting {
 background: #FECA40;
}
#selectable .ui-selected {
 background: #00BF00;
 color: white;
}
#selectable {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 85%;
}
#selectable li {
 margin: 3px;
 padding: 0.4em;
 font-size: 16px;
 height: 18px;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#selectable").selectable();
 });
 </script>
</head>
<body>
<div class="demo">
  <h1>新手上路</h1>
  <ol id="selectable">
    <li class="ui-widget-content">開通網銀，百付寶為您一路護航</li>
    <li class="ui-widget-content">認准標識，精選實力賣家任您選擇</li>
    <li class="ui-widget-content">收藏 + 購物車，逛街搜店更便捷</li>
    <li class="ui-widget-content">先驗貨再付款，交易更安全</li>
    <li class="ui-widget-content">信用誠實可靠，品質有保障</li>
    <li class="ui-widget-content">精選誠信商戶，賣家可信賴</li>
    <li class="ui-widget-content">強大客服支持，購物更放心 </li>
  </ol>
</div>
<!-- End demo -->
</body>
</html>



2：過濾選擇項
可以對子元素進行過濾，已指定哪些子元素是能夠可選的，為此，可以在調用selectable()方法時將filter屬性設置為一個jQuery選擇器，此時只有與選擇器相匹配的
元素才能夠成為選擇項
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectable組件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<style type="text/css">
* {
}
body {
 text-align:center;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 520px;
 height:220px;
 background: #fff;
 border: 5px solid #000;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:0px;
 text-align:center;
}
#feedback {
 font-size: 1.4em;
}
#selectable .ui-selecting {
 background: #FECA40;
}
#selectable .ui-selected {
 background: #F39814;
 color: white;
}
#selectable {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#selectable li {
 margin: 5px;
 padding:2px;
 font-size: 16px;
 height: 20px;
 cursor:pointer;
 border: 1px solid #aaaaaa;
 background: #ffffff;
 color: #222222;
 width:114px;
 float:left;
}
#result {
 clear:both;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#wrap").selectable({
   filter:"li",   //定義li元素為可選項
   stop: function (e, ui) {  //處理選擇事件
    var selection = [];
    $("li.ui-selected", this).each(function () {
     selection.push($(this).text());
    });
    //顯示結果
    $("#result").text("您選擇了 " + selection.length + " 項：" + selection.join("，"));
   }
  });
 });
 </script>
</head>
<body>
<div id="wrap">
  <h1>城市列表</h1>
  <ul id="selectable">
    <li>重慶</li>
    <li >北京</li>
    <li >上海</li>
    <li >廣州</li>
    <li >深圳</li>
    <li >成都</li>
    <li >天津</li>
    <li >南京</li>
    <li >杭州</li>
    <li >武漢</li>
    <li >西安</li>
    <li >長沙</li>
    <li >廈門</li>
    <li >鄭州</li>
    <li >太原</li>
    <li >青島</li>
  </ul>
  <div id="result"></div>
</div>
</body>
</html>

效果圖：


3：選擇事件回調函數
選擇事件提供了6個事件
selected, 事件類型為selectableseleted, 當把某個元素添加到選項中並且結束選擇操作後觸發
selecting: 事件類型為selectableselecting, 在選擇過程中，當選定某個元素時觸發
start: 事件類型為selectablestart, 當開始選擇操作時觸發
stop: 事件類型為selectablestop，當結束選擇操作時觸發
unselected: 事件類型為selectableunselected, 當從選定項中移除每個元素，並且結束選擇操作後觸發
unselecting: 事件類型為selectableunselecting, 在選擇過程中，當從選定項中移除每個元素時觸發
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectable組件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<style type="text/css">
* {
}
body {
 text-align:center;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 520px;
 height:220px;
 background: #fff;
 border: 5px solid #000;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:0px;
 text-align:center;
}
#feedback {
 font-size: 1.4em;
}
#selectable .ui-selecting {
 background: #FECA40;
}
#selectable .ui-selected {
 background: #F39814;
 color: white;
}
#selectable {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#selectable li {
 margin: 5px;
 padding:2px;
 font-size: 16px;
 height: 20px;
 cursor:pointer;
 border: 1px solid #aaaaaa;
 background: #ffffff;
 color: #222222;
 width:114px;
 float:left;
}
#result {
 clear:both;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#wrap").selectable({
   filter:"li",
   selected: eventCallback,
   stop: eventCallback,
   start: eventCallback,
   selecting: eventCallback,
   unselecting: eventCallback 
  });
  var selection;
  function eventCallback(e, ui) {
   if (e.type == "selectableselected") {
    selection = [];
    $(".ui-selected", this).each(function () {
     selection.push($(this).text());
    });    
   } else if (e.type == "selectablestop") {
    $("#result").text("您選擇了 " + selection.length + " 項：" + selection.join("，"));
   }
  }
 });
 </script>
</head>
<body>
<div id="wrap">
  <h1>城市列表</h1>
  <ul id="selectable">
    <li>重慶</li>
    <li >北京</li>
    <li >上海</li>
    <li >廣州</li>
    <li >深圳</li>
    <li >成都</li>
    <li >天津</li>
    <li >南京</li>
    <li >杭州</li>
    <li >武漢</li>
    <li >西安</li>
    <li >長沙</li>
    <li >廈門</li>
    <li >鄭州</li>
    <li >太原</li>
    <li >青島</li>
  </ul>
  <div id="result"></div>
</div>
</body>
</html>

效果和上例相同

JavaScript基礎知識
10分鐘掌握XML、JSON及其解析
引言NOKIA 有句著名的廣告語：“科技以人為本”。任何技術都是為了滿足人的生產生活需要而產生的。具
用正則表達式替換圖片地址img標簽
開始想到的解決方法是：復制代碼 代碼如下:content.replace(/<img [^&g
簡單解析JavaScript中的__proto__屬性
JavaScript是一個面向對象語音，即一切皆對象。那麼怎麼生成對象？在Java的世界裡，對象是由

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
盡可能寫友好的Javascript代碼 2.5 運算符 window.location.hash知識匯總 javascript delete 使用示例代碼 JavaScript中join()方法的使用簡介 深入理解JavaScript系列（25）：設計模式之單例模式詳解 Javascript 布爾型分析 JavaScript toFixed() 方法 淺談Unicode與JavaScript的發展史 javascript操作css屬性
熱門推薦
js實現checkbox全選和反選示例 JavaScript For...In 使用方法 服務端 VBScript 與 JScript 幾個相同特性的寫法 By shawl.qiu JavaScript var聲明變量背後的原理示例解析 JavaScript中的對象與JSON javascript 數組的方法集合 中文輸入法不觸發onkeyup事件的解決辦法 javascript中不等於的代碼是什麼怎麼寫 深入分析Javascript事件代理
大家都在看
CSS實例教程:制作網頁特殊產品列表 Javascript實例教程(20) OLE Automation(7) CSS中內聯元素與塊級元素 IE盒子模型和標准W3C盒子模型 javascript中處理時間戳為日期格式的方法 動態的改變IFrame的高度實現IFrame自動伸展適應高度 企業應該如何處理消費者在網上負面評論 實現無刷新聯動例子匯總
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved