Fetch twitter News sử dụng jQuery twitter API plugin

jQuery Twitter là thư viện javascript giúp chúng ta dễ dàng get thông tin twitter new sử dụng Jquery syntax.

Chúng ta có thể tải thư viện mới nhất tại đây:

http://plugins.jquery.com/project/jtwitter

Get Started!

Ở đây mình sẽ sử dụng Twitter library để get twitter news sử dụng asp.net, sau khi download library về mình add master page:


    <script src="<%=Page.ResolveUrl("~/Scripts/jquery-1.4.1.js")%>" type="text/javascript" />

    <script src="<%=Page.ResolveUrl("~/Scripts/jquery.jtwitter.js")%>" type="text/javascript" />

Sau đó mình sẽ tạo 1 tag div với id=post để load data trả về:


    <script language="javascript" type="text/javascript">
 
        function parseTwitterDate(text) {

            var newtext = text.replace(/(\+\S+) (.*)/, "$2 $1")

            var date = new Date(Date.parse(newtext)).toLocaleDateString();

            var date_time = date.split(',');

            var time = new Date(Date.parse(newtext)).toLocaleTimeString();

            return date_time[1] + date_time[2] + ', ' + time;

        }

 

        $(document).ready(function () {

            $.jTwitter('quachnguyen', 10, function (data) {

                $('#posts').empty(); $.each(data, function (i, post) {

                    $('#posts').append('<div class="post">' +

                    '<div class="date">'

                    + parseTwitterDate(post.created_at) + ' via ' + post.source + 

                    '</div>' +

                    ' <div class="txt">'

                        + post.text +

                    ' </div>' + '</div>');

                });

            });

        });

    </script>

Đoạn code script trên dùng để load twitter news vào div post, hàm jTwitter nhận vào 3 tham số: tên user cần fetch, số lượng bài post được fetch, và callback function

Hope this help

If you are using blogengine, you want to embed lazy load image libray in your blog, which is cool library is makes your image only load when you see it, not all by default

We have 2 way to embed this libary in your blog
1. By programming lazy loading images với jQuery
2. By adding script to header (in admin section)

The first, download libraies and upload to your host: Jquery Lazy Load and Jquery
http://www.appelsiini.net/projects/lazyload
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js

I uploaded it to my host:
http://code2code.info/tmp/js/jquery-1.4.2.min_2.js
http://code2code.info/tmp/js/jquery.lazyload.min.js
http://code2code.info/tmp/images/grey.gif

I added the grey.gif becuase i want the user see the grey before loading the image, if everything is done, now you login to blogengine by admin account.

Navigate to  HTML head section  in Settings page

< script src="http://code2code.info/tmp/js/jquery-1.4.2.min_2.js" type="text/javascript"></script>

<script src="http://code2code.info/tmp/js/jquery.lazyload.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    $(function () {

        $("img").lazyload({ placeholder: "http://code2code.info/tmp/images/grey.gif", effect: "fadeIn" });

    });

</script>

Hope this help

Thay vì cho phép user nhận ngày tháng năm sinh chẳng hạn bằng input control thông thường, cải tiến hơn người ta thường dùng calendar hổ trợ người dùng chỉ chọn ngày tháng thay vì phải nhập, và giúp chúng ta có thể hạn chế vấn đề lổi nhập liệu của người dùng.

Bạn có thể tạo 1 calendar dể dàng với thư viện jquery ui version 1.8.2 có thể tải tại đây

Nếu bạn có 1 bài viết rất là nhiều hình, ví dụ 1 bài blog, bạn muốn những tấm hình chỉ load khi user scroll tới tấm hình đó, chứ không cần phải load tất cả tấm hình xem trang đó, Lazy Load Plugin cho jquery giúp bạn làm điều đó.

Trớc hết tải thư việc tại:

Jquery Lazy Load
http://www.appelsiini.net/projects/lazyload

Jquery
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js

Reference vào page:

    <title>using lazy load image in asp.net</title>

    <script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>

    <script src="js/jquery.lazyload.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

        $(function () {

            $("img").lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });

        });

    </script>

 

Mình sẽ copy toàn bộ bài viết và paste vào trong tag div

<div>

 

        <div class="text">

            <p class="MsoNormal">

                <span style="font-size: small;"><span style="font-family: verdana,geneva;">Có

                rất nhiều cách để install BlogEngine chẳng hạn như: download file từ codeplex,

                Web Platform Installer (WPI), và Web Matrix (WM).Trong bài blog này mình sẽ

                hướng dẫn các bạn cài đặt BlogEngine sử dụng WM.<br />

                <br />

                Đầu tiên chúng ta sẽ phải cài đặt WPI version hiện tại v3 beta tải ở

                <a href="http://www.microsoft.com/web">đây</a>, sau khi cài đặt xong, chúng ta

                start WPI lên và tiến hành cài đặt WM.<br />

                <br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fwfiv3.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Click Install<br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fwfi-accept-term.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Click Accept để install<br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2finstall-finish.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Sau khi install thành công WM, chúng ta Start WM lên</span><span

                    style="font-family: verdana,geneva;"><br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fstart-web-matrix.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Màng hình QuickStart xuất hiện chúng ta chọn Site From Web Gallery</span><span

                    style="font-family: verdana,geneva;"><br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fstart-screen.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Từ Site Web Gallary chọn danh mục Blog và chọn BlogEngine</span><span

                    style="font-family: verdana,geneva;"><br />

                </span></span>

            </p>

            <p>

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fselect-blogengine.png" /></p>

            <p class="MsoNormal">

                <span style="font-size: small;"><span style="font-family: verdana,geneva;">Click

                Next để tiếp tục<br />

                </span></span>

            </p>

            <p>

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2faccept-term.png" /></p>

            <p class="MsoNormal">

                <span style="font-size: small;"><span style="font-family: verdana,geneva;">

                <br />

                Click I Accept để chấp nhận<br />

                <br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2finstall-blogengine-finish.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Click Ok, chúng ta sẽ thấy màng hình index</span><span

                    style="font-family: verdana,geneva;"><br />

                <br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fbe-webmatrix-index-page.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Từ Menu Run chọn Browser để start blogengine.<br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2frun-be.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fbe-homepage.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                bởi mặc định BE sử dụng xml như là database để lưu data, chúng ta có thể edit

                chúng bằng cách setup database mà chúng ta prefer trực tiếp trong WM hoặc chỉnh

                sửa trong Visual studio bằng cách launch visual studio.<br />

                </span></span>

            </p>

            <p class="MsoNormal">

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fbe-default-aspx.png" /><span

                    style="font-size: small;"><span style="font-family:

verdana,geneva;"><br />

                <br />

                Để publish blogEngine vừa install chúng ta chọn publish, nếu host available thì

                chọn Config, ngược lại chúng ta có thể Find web hosting...<br />

                </span></span>

            </p>

            <p>

                <img alt=""

                    src="http://code2code.info/image.axd?picture=2010%2f7%2fpublish.png" /></p>

            <p class="MsoNormal">

                <span style="font-size: small;"><span style="font-family: verdana,geneva;">

                <a href="http://mugi.or.id/blogs/ciebal/archive/2010/07/15/installing-blogengine-net-using-webmatrix.aspx">

                Reference</a></span></span></p>

        </div>

 

    </div>

Check out my code: http://code2code.googlecode.com/svn/trunk/LazyImageLoad

Cho rằng bạn đang buộc người dùng phải check vào 1 trong những checkbox trước khi submit, sau đây là đoạn code snippest giúp bạn làm được điều đó.

Ở đây mình sử dụng thư viện Jquery Validation.

Thêm thư viện:
Chúng ta có thể tải về hoặc include url của thư viện:

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

 Html makup:

    <form id="form1" runat="server">

    <div id="chkboxes">

        <input type="checkbox" name="bev" value="cream" />With cream<br />

        <input type="checkbox" name="bev" value="sugar" />With sugar<br />

        <input type="checkbox" name="bev" value="sugar" />With salt<br />

    </div>

    <div id="msg">

    </div>

    <input id="btnSubmit" type="submit" value="submit" />

    </form>

 Đầu tiên mình check xem có bao nhiêu checkbox được check trong sự kiện ready của document

        function countChecked() {

            var n = $("input:checked").length;

            $("#msg").text(n + (n <= 1 ? " is" : " are") + " checked!");

        }

Jquery validation cho phép chúng ta thay thế thông điệp lổi khác với message mặc định

        $.validator.addMethod('onecheck', function (value, ele) {

            return $("input:checked").length >= 1;

        }, 'Please Select Atleast One CheckBox')

full code:

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!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 runat="server">

    <title>Using the jQuery Validation Plugin to choose atleast one CheckBox before submitting

        the Form</title>

    <style type="text/css">

        label.error, #msg

        {

            float: none;

            color: red;

            padding-left: .3em;

            vertical-align: top;

        }

    </style>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

    <script type="text/javascript">

        $.validator.addMethod('onecheck', function (value, ele) {

            return $("input:checked").length >= 1;

        }, 'Please Select Atleast One CheckBox')

 

        $(document).ready(function () {

            $("#form1").validate({

                rules: {

                    bev: {

                        onecheck: true

                    }

                },

                errorPlacement: function (error, element) {

                    error.appendTo('#msg');

                }

            });

            countChecked();

            $(":checkbox").click(countChecked);

        });

 

        function countChecked() {

            var n = $("input:checked").length;

            $("#msg").text(n + (n <= 1 ? " is" : " are") + " checked!");

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="chkboxes">

        <input type="checkbox" name="bev" value="cream" />With cream<br />

        <input type="checkbox" name="bev" value="sugar" />With sugar<br />

        <input type="checkbox" name="bev" value="sugar" />With sugar<br />

    </div>

    <div id="msg">

    </div>

    <input id="btnSubmit" type="submit" value="submit" />

    </form>

</body>

</html>

Reference
http://www.devcurry.com/2010/05/using-jquery-validation-plugin-to_30.html
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

bassisstance.de cung cấp 1 thự viện dùng để validation bao gồm 1 số đặc trưng:
Các phương thức validat cơ bản: email, số, ngày tháng, url, thẻ tín dụng...
Ẩn và hiện thông điệp lổi khi cần thiết.
Validate trên các sự kiện: Submit, Keyup, Blur.
Linh động trong vấn đề chỉ ra các quy luật kiểm chứng (rule).

jQuery Validation là plug-in dành cho client side với việc sử dụng version visual studio 2010 chúng ta có thể dể dàng viết code giao tiếp với html control

Cách sử dụng:
1. Tải thư viện về bao gồm: jQuery 1.4.2-min và jQuery Validation plug-in bỏ trong thư mục js.
2. Tạo 1 blank website sử dụng Visual Studio 2010 và add libraries vào website

    <title>Using jQuery Validation trong ASP.NET</title>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="js/jquery.validate.min.js" type="text/javascript"></script>

3. Thêm 2 controls textboxes: username và password, cuối cùng là 1 button submit

    <div>

        <p>

            Username:

            <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox></p>

        <p>

            Email:

            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></p>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

    </div>

4. Add script enable validation cho trang asp.net

    <script type="text/javascript">

        $(document).ready(function () {

            $("#form1").validate({

                rules: {

                    txtUsername: {

                        required: true,

                        minlength: 5

                    },

                    txtEmail: {

                        required: true,

                        minlength: 5,

                        email: true

                    }

                }, messages: {

                    txtUsername: {

                        required: "* Required Field *",

                        minlength: "* Please enter atleast 5characters *"

                    },

                    txtEmail: {

                        required: "* Required Field *",

                        minlength: "* Please enter atleast 5 characters *"

                    }

                }

            });

        });

    </script>

Thử submit khi giá trị 2 trường là rỗng chúng ta sẻ thấy (mặc định):

Khi nhập sai email và số ký tự tối thiểu chưa đạt.

Thử submit khi giá trị 2 trường là rỗng chúng ta sẻ thấy (custom message)

have fun!

Reference

By default there is no select all comments for deleting or approving these comments, in this blog i will show you the way to do this with jquery.

BlogEngine v1.6 don’t use jquery so we must get jquery library form here and reference it to admin’s master page if we are going to use this javascript framework in another admin page, or admin/Comment/DataGrid.ascx user control.

    <script src="<%= ResolveUrl("~/Admin/jquery-1.3.2.js")%>" type="text/javascript"></script>

Now in DataGrid.ascx usercontrol, we will add new html checkbox in the header for selecting all checkboxes by adding either design view or source view. Here is markup:

<HeaderTemplate>

    <input id="chkAll" type="checkbox" />

</HeaderTemplate>

In order up and running jquery i call “document ready” handler:

    $(document).ready(function () {

    });

and fire click event of chkAll checkbox input control
    $("input[type=checkbox]").each(function () {
    });

When the user click on the chkAll input control, i will loop for all checkboxes and check whether chkAll is checked or not, if chkAll is checked then all checkboxes have checked and vice versa, here is the code:

<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        $('#chkAll').click(function () {

            $("input[type=checkbox]").each(function () {

                if (this.checked == true) {

                    $("input[type=checkbox]").attr('checked', 'checked');

                }

                else {

                    $("input[type=checkbox]").attr('checked', false);

                }

            });

        });

    });

</script>

Hope this help!

 

FAQ are answers of common question in your website , it’s very helpful for the user who want to understand clearly about the website.

In this post I will show you how to implement it using Linq2Xml and then using jquery for face-in and face-out effect.

Take a look at Faq xml data , and I put it in the App_Date folder

<?xml version="1.0" encoding="utf-8" ?>

<faqs>

  <faq id="1" question="1.Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor in imperdiet placerat?" answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">

  </faq>

  <faq id="2" question="2.Lorem ipsum dolor sit amet, consectetur adipiscing elit." answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">

  </faq>

  <faq id="3" question="3.Lorem ipsum dolor sit amet, consectetur adipiscing elit in quam vestibulum consequat a in lacus?" answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">

  </faq>

  <faq id="4" question="4.Lorem ipsum dolor sit amet, consectetur adipiscing elit." answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor in quam vestibulum consequat a in lacus. Nulla cursus, tortor in imperdiet placerat, massa lacus sagittis urna, quis tincidunt elit mauris porttitor lorem. Nulla gravida lacinia ornare. Duis nec lorem lacus, a feugiat lacus">

  </faq>

</faqs>

Create a new ASP.NET website and write the code in the Page Load event like bellow:

using System;

using System.Collections.Generic;

using System.Xml.Linq;

 

public partial class _Default : System.Web.UI.Page

{

    public IEnumerable<XElement> faqsElement;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            XElement element = XElement.Load(Server.MapPath("~/App_Data/Faq.xml"));

            faqsElement = element.Elements("faq");

        }

    }

}

When the default page has loaded, it will return a list of faq element, and I will get faq data in the aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!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 runat="server">

    <title>Building faq page using Linq2Xml and Jquery</title>

    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>

    <style type="text/css">

        .divAnswer

        {

            display: none;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <h1>

        FAQ</h1>

    <div class="faqs">

        <% foreach (var item in faqsElement)

           { %>

        <div class="faq">

            <a href="#" class="question">

                <%= item.Attribute("question").Value %></a><br />

            <div class=" divAnswer">

                <%= item.Attribute("answer").Value%>

            </div>

        </div>

        <% } %>

    </div>

    </form>

</body>

<script type="text/javascript">

    $(document).ready(function () {

        $("a.question").click(function () {

            $(this).parent().find("div.divAnswer").slideToggle();

        })

    });

</script>

</html>

 
Answer section only show when user clicks on the hyperlink question, so the divAnswer css class hides it for this purpose.

Run this page you will the result as above

faq-linq2xml-and-jquery.rar (19.41 kb)

In celebration of jQuery’s 4th birthday, the jQuery team is pleased to release the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone into this release, and we’re really quite proud of it.

I want to personally thank Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Katić, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint who put a lot of work into fixing bugs and getting the release out the door.

http://jquery14.com/day-01/jquery-14

Với textbox thì bạn có thể dể dàng giới hạn được ký tự nhập vào qua thuộc tính MaxLength, nhưng với TextArea thì đây sẻ là 1 hàm rất có ích.

<!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>
    <title>Limit Number of Characters in a TextArea</title>
        <script type='text/javascript'
   src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
    <script type='text/javascript'>
        $(document).ready(function() {
            $('#ta').keyup(function() {
                var len = this.value.length;
                if (len >= 150) {
                    this.value = this.value.substring(0, 150);
                }
                $('#charLeft').text(150 - len);
            });
        });
    </script>
</head>
<body>
<textarea id="ta" cols="20" rows="8"></textarea><br/>
(Maximum characters: 150)<br/>
<span id="charLeft"> </span>  Characters left
</body>
</html>

See demo

Reference