هذا المثال يوضح كيفية انشاء قائمة منسدلة , يتم اضافة في داخل صور بجانب النص .
في البداية ستكون لدينا قاعدة بيانات تحتوي على جدول .
الجدول يحتوي على البيانات التالية .
يحتوي التطبيق على قاعدة بيانات يمكنك استخدمها بعد القيام بعملية استعادة لها , لتعرف كيفية الاستعادة شاهد الموضوع كيفية استعادة قاعدة البيانات , يحتوي على المجلد msdropdown يحتوي على الملفات جافا سكربت تستخدم لاضافة وتنسيق وانشاء التأثير الحركي عليها , وهناك مجلد الصور الذي يحتوي على الأعلام المختلفة .
تصميم الصفحة
كود المصدر للصفحة
كما تشاهد في البداية Head يحتوي على ملفات السكربت Jquery وكذلك ملف CSS
<head runat="server">
<title>Untitled Page</title>
<script src="msdropdown/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link href="msdropdown/dd.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
try {
$("#ddlCountry").msDropDown();
} catch (e) {
alert(e.message);
}
});
</script>
</head>
<body style="font-weight: 700">
<form id="form1" runat="server">
<div>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="30">
<b style="text-align: center"> دمج صور داخل القائمة المنسدلة</b></td>
</tr>
<tr>
<td height="40">
<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True"
onselectedindexchanged="ddlCountry_SelectedIndexChanged" Width="200px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td height="30">
<asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
كود البرمجة للصفحة
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDropDownlist();
BindTitles();
lblMsg.Text = ddlCountry.Items[0].Text;
}
}
protected void BindTitles()
{
if (ddlCountry != null)
{
foreach (ListItem Li in ddlCountry.Items)
{
Li.Attributes["title"] = "Images/" + Li.Value;
}
}
}
protected void BindDropDownlist()
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings
["Country"].ToString());
if (conn.State != ConnectionState.Open)
conn.Open();
SqlDataAdapter da = new SqlDataAdapter("Select * from Country", conn);
DataTable dt = new DataTable();
da.Fill(dt);
ddlCountry.DataTextField = "CountryName";
ddlCountry.DataValueField = "CountryImage";
ddlCountry.DataSource = dt;
ddlCountry.DataBind();
conn.Close();
}
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
lblMsg.Text = ddlCountry.SelectedItem.Text;
BindTitles();
}
}
 |
