jqueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。
官方api
其他教程：jQueryUI教程
基本使用:
1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能

jquery滚动条demo

html程序

<div class="interviews_right"> <!-- "会员访谈" 右侧内容 -开始- --> 
                    <div class="paragraph">
                                <!-- 往期会员一--> 
                                <ul class="interviews_right_ul">
                                 <li class="former_member_img">
                                    <a class="track" name="home-hishow-john" target="_blank" href="/designer/1.html"> 
                                        <img class="lazy_load_img" src="img/1.jpg"  height="50" width="50">
                                    </a>
                                </li> 
                                <li class="former_member_name">张卜文</li> 
                                </ul>   
                                 <!-- 往期会员二--> 
                                 <ul class="interviews_right_ul">
                                    <li class="former_member_img">
                                        <a class="track" name="home-hishow-huihui" target="_blank" href="/designer/2.html"> 
                                            <img class="lazy_load_img" src="img/2.jpg"  height="50" width="50">
                                        </a>
                                    </li> 
                                    <li class="former_member_name">俏宝</li> 
                                </ul>
                                
                                <ul class="interviews_right_ul">
                                    <li class="former_member_img">
                                        <a class="track" name="home-hishow-huihui" target="_blank" href="/designer/3.html"> 
                                            <img class="lazy_load_img" src="img/1.jpg"  height="50" width="50">
                                        </a>
                                    </li>
                                    <li class="former_member_name">刘昱</li> 
                                </ul>
                    </div>
                    <div class="scroll_bar_con">
                                <!-- 滚动条 -->
                                <div class="scroll_bar"></div>
                    </div>


                </div > 
            </div>

滚动条jQuery demo

$(function(){
           //获取整体段落的高度
           var h = $('.paragraph').outerHeight();
           //剩下没有出现的高度，500是容器的高度
           var hide = h - 230;

           //滚动自定义的滚动条
           $('.scroll_bar').draggable({
               axis:'y',
               containment:'parent',
               opacity:0.6,
               drag:function(ev,ui){
                   //当前已拖拽的高度
                   var nowtop = ui.position.top;
                   //换算出段落内容需要滚动多少
                   //父490-滑块200=290
                   var nowscroll = parseInt(nowtop/225*hide);
                   //设置（滑块向下时）内容向上滚动的距离
                   $('.paragraph').css({top:-nowscroll});
               }
           })
       })

本地存储

本地存储分为cookie，以及新增的localStorage和sessionStorage

1、cookie 存储在本地，容量最大4k，
在同源的http请求时携带传递，
在设置的过期时间之前有效。

jquery 设置cookie
.cookie('mycookie','123',{expires:7,path:'/'}); jquery 获取cookie.cookie('mycookie');

---

2、localStorage 存储在本地，
容量为5M或者更大，
不会在请求时候携带传递，
除非人为删除，可作为长期数据。

---

//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

---

//获取：
localStorage.getItem("dat");
localStorage.dat

---

//删除
localStorage.removeItem("dat");

---

3、sessionStorage 存储在本地，
容量为5M或者更大，
不会在请求时候携带传递，
在同源的当前窗口关闭前有效。

---

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。

---

iPhone的无痕浏览不支持Web Storage，只能用cookie。

demo

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）
 
window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据
 
window.localStorage.clear();//清空所有的存储数据
 
 
 
window.sessionStorage.setItem(key,value);
 
window.sessionStorage.getItem(key);
 
window.sessionStorage.removeItem(key);
 
window.sessionStorage.clear()

代码解析：

setItem(key,value) 向本地存储一条数据

getItem(key) 通过键名获取本地相应数据

key(index) 通过索引获取本相应地数据

removeItem(key) 通过键名删除本地相应数据

clear() 删除本地所有数据