| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

差分

ナビゲーションに移動 検索に移動

JQuery Tips (ソースを閲覧)

2020年2月15日 (土) 08:03時点における版

431 バイト追加 、 2020年2月15日 (土) 08:03
編集の要約なし
==jQuery Tips==
[[jQuery][JavaScript]]
*リファレンス http://docs.jquery.com/Main_Page
*リファレンス(日本語) http://semooh.jp/jquery/
===読み込み中メッセージを表示===
=====html=====
<&lt;div id="loading" style="display:none">&gt;計算中・・・<&lt;/div>&gt;
=====style=====
<&lt;style type="text/css">&gt;
#loading {
position: absolute;
width:100px;
}
<&lt;/style>&gt;
=====表示=====
$("#loading").show("normal");
:
<&lt;blockquote>&gt;ただし、XMLが文字列として取得されるので、jQuery でXMLとして利用するには、DOMへの変換が必要<&lt;/blockquote>&gt;
=====XML文字列をDOMに変換するライブラリ=====
*http://outwestmedia.com/jquery-plugins/xmldom/
=====例=====
*http://jsbin.com/eqape
<&lt;div id="hoge_panel">&gt; <&lt;h3><&gt;&lt;a href="#">&gt;タイトル 1<&lt;/a><&gt;&lt;/h3>&gt; <&lt;div>&gt;test1<&lt;/div>&gt; <&lt;h3><&gt;&lt;a href="#">&gt;タイトル 2<&lt;/a><&gt;&lt;/h3>&gt; <&lt;div>&gt;test2<&lt;/div>&gt; <&lt;h3><&gt;&lt;a href="#">&gt;タイトル 3<&lt;/a><&gt;&lt;/h3>&gt; <&lt;div>&gt;test3<&lt;/div>&gt; <&lt;h3><&gt;&lt;a href="#">&gt;タイトル 4<&lt;/a><&gt;&lt;/h3>&gt; <&lt;div>&gt;test4<&lt;/div>&gt; <&lt;/div>&gt;
$("#hoge_panel").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
.find("h3").addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
.hover(function() { $(this).toggleClass("ui-state-hover"); })
.prepend('<&lt;span class="ui-icon ui-icon-triangle-1-s"><&gt;&lt;/span>&gt;')
.click(function() {
$(this)
.toggleClass("ui-accordion-header-active ui-corner-bottom")
.find("> &gt; .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
.next().toggleClass("ui-accordion-content-active").slideToggle();
return false;
=====DOMを操作する(IEでもOK)=====
var selectBox = document.getElementById("selectboxId");
for (var i=0; i<&lt;selectBox.options.length; i++) {
if (selectBox.options[i].value == targetCode) {
selectBox.options[i] = new Option(newName, targetCode);
==HTML(テーブル)==
===選択された行のセルのテキストを取得===
var tr = $("<&lt;tr>&gt;")
tr.click(function(){
var cols = $(this).children();
===テーブルの行が選択された時にラジオボタンをONにする。===
var tr = $("<&lt;tr>&gt;")
tr.click( function () {
$("#projects_table tbody tr").removeClass("selected_row");
// $.getJSON callback
function reload_date(json) {
if ($("#calc_expr_table tbody").length > &gt; 0) {
$("#calc_expr_table tbody").remove();
}
$("#calc_expr_table").append("<&lt;tbody><&gt;&lt;/tbody>&gt;");
$("#calc_expr_table tbody").append(
"<&lt;tr><&gt;&lt;th>&gt;プログラムサイズ(KLOC)<&lt;/th><&gt;&lt;td>&gt;" + json.kdsi + "<&lt;/td><&gt;&lt;/tr>&gt;" + "<&lt;tr><&gt;&lt;th>&gt;工数(PM)<&lt;/th><&gt;&lt;td>&gt;" + json.effort + "<&lt;/td><&gt;&lt;/tr>&gt;" + "<&lt;tr><&gt;&lt;th>&gt;開発期間(M)<&lt;/th><&gt;&lt;td>&gt;" + json.tdev + "<&lt;/td><&gt;&lt;/tr>&gt;" + "<&lt;tr><&gt;&lt;th>&gt;プログラムサイズ(KLOC)<&lt;/th><&gt;&lt;td>&gt;" + json.fsp + "<&lt;/td><&gt;&lt;/tr>&gt;" + "<&lt;tr><&gt;&lt;th>&gt;生産性(KLOC/PM)<&lt;/th><&gt;&lt;td>&gt;" + json.prod + "<&lt;/td><&gt;&lt;/tr>&gt;"
);
}
=====HTML=====
<&lt;table id="calc_expr_table"><&gt;&lt;/table>&gt;
==CSS==
===クラスの追加===
「https://www.typea.info/tips_/index.php/特別:携帯機器差分/3410」から取得

© 2006 矢木浩人

案内メニュー