Mail panel json test

by amitava82

HTML

<script src="http://github.com/kerberoS/jQuery-Tweets/raw/master/js/jquery.tweets.0.1.js"></script>
<script>
    //twitter function
    $.fn.myFn = function(options){
    var defaults = {
    search: 'blue',
    wrapper: 'li'     
    };
    var options = $.extend(defaults, options);
    var obj = this;
    var wrapperLeft = '<'+ options.wrapper + '>';
    var wrapperRight = '</'+ options.wrapper + '>';
    var tweeturl = 'http://search.twitter.com/search.json?q='+ options.search +'&rpp=5&include_entities=true&callback=?';
    $.ajax({
    url: tweeturl,
    dataType: 'jsonp',
    success: function(data){
    $.each(data.results, function(i, item){
    $(obj).append(wrapperLeft + item.text + wrapperRight);
    });
    }
    
    });
    }
    </script>    
    
    <div class="info">Loading...</div>
    <div class="error"></div>
    <div id="container">
        
        <div id="leftNav">
            <ul>
                <li><a href="">Notes</a></li>
                <li><a href="">Alerts</a></li>
                <li><a href="">Reminders</a></li>
                <li><a href="">History</a></li>
                <li><a href="">Completed Studies</a></li>
                <li><a href="">Open Studies</a></li>
            </ul>    
        </div>
        <div id="rightPanel">
            <div><input class="back" type="button" value="Back" />
                <div id="list">
                    <table>
                        <tbody>
                            <tr>
                                <td>title</td>
                                <td>Item details</td>
                                <td>date</td>
                            </tr>
                            <tr>
                                <td>title</td>
                                <td>Item details</td>
                                <td>date</td>
                            </tr>
                            <tr>
                                <td>title</td>
                                <td>Item...

CSS

.info, .error{
    text-align: center;
    clear: both;
    background: #222;
    color: #FFF;
    margin: 0 auto;
    width: 20%;
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
}
#container{
    background: #F0F0F0;
    margin: 0 auto;
    width: 95%;
}

#leftNav{
    width: 25%;
    background: #FFF;
    Border: 1px solid #DDD;
    float: left;
}
#leftNav li{
    display: block;
    margin: 5px;
    background: #CCC;
}
#rightPanel{
    margin-left: 10px;
    
    width: 70%;
    float: left;
    margin-left: 10px;
}
#list, #details{
    Border: 1px solid #DDD;
    background: #FFF;
}
#list tr{
    cursor: pointer;
}
#details{
    display: none;
    
}
.clear { clear: both;}

table{
    width: 100%;
}
table td{
    border: 1px solid #DDD;
}

JavaScript

$('.info').ajaxStart(function() {
    $(this).text('Loading...').show();
});
$('.info').ajaxStop(function() {
    $(this).hide();
});

$('#list tr').click(function() {
    //var data = $(this).children().eq(1).text();
    $('#details').html('');
    $('#details').myFn();
    $('#details').show();
    $('#list').hide();
});

$('.back').click(function() {
    $('#list').show();
    $('#details').hide();
});